Ajax的一些有用的小技巧_AJAX教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:如何克服對Ajax應用的阻礙
        未來的Web services和面向服務的架構(SOA)可能就在于Ajax。Ajax是一種用于創建豐富的、基于Web應用的編程技術,它看起來和桌面軟件差不多,但卻基于瀏覽器,而且消耗資源不多。    A

      在使用Ajax過程中,有時候總會遇到一些難題,瀏覽器兼容、編碼、IE下的特殊處理等等,偶爾會搞的人頭昏腦脹哭笑不得,這里列一些小貼士,或許有些用。

      使用javascript庫

      Ajax的流行和巨大威力,讓我們重新審視了javascript的開發,也直接促使各種庫的出現。對于普通的開發者,使用一些適合自己的javascript庫不僅可以避免Ajax應用上的瀏覽器兼容等問題,也使其開發更加的穩定和高效。這里列一些我知曉的輕量級的javascript庫:

      1. YUI:YAHOO出品,組件豐富強大健壯穩定,是團隊協作開發的首選。
      2. JQuery:靈活、高效,其基于CSS3 和XPath的選擇器語法引擎非常的強大和完整。
      3. Prototype:是一個非常優雅的javascript庫,最經典的莫過于$符號了,DWR,JQuery都被它吸引了。在它基礎上出現了script.aculo.us。
      4. Mootools:核心語法和Prototype比較類似,但是用過之后才知道什么叫簡單輕巧和短小精悍。

      編碼問題

      通過XMLHttpRequest獲取的數據,默認的字符編碼是UTF-8,如果前端頁面是GB2312或者其它編碼,顯示獲取的數據就是亂碼。通過XMLHTTPRequest,POST的數據也是UTF-8編碼,如果后臺是GB2312或者其他編碼也會出現亂碼。解決方法:

      1. 統一到UTF-8。這也是國際化的必然趨勢。
      2. 輸出通過XMLHttpRequest獲取的文本文本時,在headers中增加文本聲明(直接HTML聲明沒有作用)。如:
        PHP:header('Content-Type:text/html;charset=GB2312');
        ASP:Response.Charset = "GB2312"
        JSP:response.setHeader("Charset","GB2312");
      3. WWW服務器上強制聲明。比如:apache下的配置:
        AddDefaultCharset GB2312

        這種情況主要是應對通過XMLHttpRequest訪問的文件是靜態文件,無法聲明headers的情況下。
        靜態頁面一般都會經過Apache的deflate或gzip壓縮,此時在上面情況下IE中,首次通過XMLhttpRequest獲得的數據可以正常顯示,但再獲取數據顯示時出現亂碼,這次因為再次獲取的數據來自緩存,可能由于瀏覽器解壓縮的問題導致Apache設置的默認編碼聲明丟失。由于這種情況下一般是純文本,可能還無法禁止緩存,可以設置XMLhttpRequest訪問的文本文件不壓縮來解決這個問題。
      4. 非UTF-8頁面通過XMLHttpRequest獲取的文本文本輸出前字符轉碼成unicode,或者編碼直接是UTF-8,可以正常顯示。如實例所示

      IE下的緩存問題

      由于IE的緩存處理機制問題,每次通過XMLHttpRequest訪問動態頁面返回的總是首次訪問的內容,解決方法有:

      1. 客戶端通過添加隨機字符串解決。如:
        var url = 'http://dancewithnet.com/';
        url = '?temp=' new Date().getTime();
        url = '?temp=' Math.random();
      2. 在HTTP headers禁止緩存。如:
        HTTP:




        PHP:
        header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
        header("Cache-Control: no-cache, must-revalidate");
        header("Pragma: no-cache");
        ASP:
        Response.expires=0
        Response.addHeader("pragma","no-cache")
        Response.addHeader("Cache-Control","no-cache, must-revalidate")
        JSP:
        response.addHeader("Cache-Control", "no-cache");
        response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");
      3. 在XMLHttpRequest發送請求之前加上:
        XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
        XMLHttpRequest.send(null);

      IE下的reponseXML問題

      使用responseXML時,IE下只能接受.xml為后綴的XML文件,如果不能以.xml文件為結尾的,則需要如下處理:

      1. 在服務器端聲明是xml文件類型。如:
        PHP:header("Content-Type:text/xml;charset=utf-8");
        ASP:Response.ContentType = "text/xml";
        JSP:response.setHeader("ContentType","text/xml");
      2. 利用responseText獲取,然后封裝成XML。
      3. 在AJAX應用上,JSON和JsonML是XML非常好的替代品。

      分享:AJAX技術開發Back按鈕問題的應用程序
      一、 簡介AJAX,一個異步javascript和XML的縮略詞,是最近出來的技術詞語。異步意味著你可以經由超文本傳輸協議(HTTP)向一個服務器發出請求并且在等待該響應時繼續處理另外的數據。這就

      來源:模板無憂//所屬分類:AJAX教程/更新時間:2008-08-22
      相關AJAX教程