Ajax異步與JavaScript的一些初淺認識

jopen 9年前發布 | 21K 次閱讀 Ajax JavaScript開發

向服務器請求數據的技術

有以下五種常用技術用于向服務器請求數據

  1. XMLHttpRequest(XHR)
  2. Dynamic script tag insertion(動態腳本標簽插入)
  3. iframes
  4. Comet
  5. Multipart XHR (多部分的XHR)
  6. </ol>

    XHR

    優點:能夠精細的控制發送請求和數據接收,也就是說你可以在請求的報文中添加任意的頭信息和參數(包括Get和Post),并讀取從服務器返回的頭信息,以及響應文本自身。

    缺點:不能使用XHR從當前運行的代碼域之外請求數據,而且老版本的IE不提供readyState為3的狀態(為3的狀態表示數據正在接收中),它也不支持流。從請求返回的數據像一個字符串或者一個XML對象那樣對待,這意味著處理大量數據時將相當緩慢。

    建議:當使用XHR請求數據時,可以使用POST或GET。如果請求不改變服務器狀態而只是取回數據建議使用GET,因為GET請求的數據會被瀏覽器自動緩沖起來,如果多次提取相同的數據可提高性能。

    只有當URL和參數的長度超過了2048個字符時才使用POST提取數據,因為IE限制了URL的長度,過長將導致請求參數被截斷。

    Dynamic script tag insertion(動態腳本標簽插入)

    優點:可以從不現域的服務器上獲取數據

    因為其響應結果是運行JavaScript,而不是作為字符串必須被進一步處理。所以它應該是客戶端上獲取并解析數據最快的方法。

    缺點:不能通過請求發送信息頭,參數只能通過GET方法傳遞,不能POST。

    不能設置請求的超時或重試,實際上你不需要知道它是否失敗,而且你必須得等待所有數據返回之后才可以進行處理。

    不能訪問響應信息頭或像訪問字符串那樣訪問整個響應報文

    備注:因為JavaScript沒有權限或訪問控制的概念,所以你的頁面上任何使用動態腳本標簽插入的代碼都可以完全控制整個頁面,所以在使用外部來源的代碼時務必非常小心。

    因為響應報文被用作腳本標簽的源碼,它必須是可執行的JavaScript。也就是說任何數據無論什么格式必須在一個回調函數中被組裝起來。

    Multipart XHR (多部分的XHR)

    多部分的XHR(MXHR)允許你只用一個HTTP請求就可能從服務器端獲取多個資源,通過將資源打包成一個由特定分隔符界定的大字符串,從服務器端發送到客戶端。JavaScript代碼處理此長字符串,根據它的媒體類型和其他“信息頭”解析出每個資源。

    優點:顯著提高了整個頁面的性能。

    缺點:獲得的資源不能被瀏覽器緩存。

    老版本的IE并不支持readyState=3或data:URL

    建議:由于MXHR響應報文越來越大,有必要在每個資源收到時立刻處理而不是等待整個響應報文接收完成,這可以通過監聽readyState =3 來實現

    發送數據

    有時候我們只需要將數據發送給服務器而并不關心接收數據,可以采取如下兩個技術

    1. XHR
    2. 燈標
    3. </ol>

      XHR

      使用XHR將數據發回服務器時,它比GET要快。(原因:向服務器發送一個GET請求要占用一個單獨的數據包,另一方面一個POST至少發送兩個數據包,一個用于信息頭,一個用于POST體)POST更適合于向服務器發送大量數據,因為它不關心額外數據包的數量 ,又因為IE的URL長度限制,所以使用GET會受到限制。

      燈標

      實現原理:創建一個Image對象,將src設置為服務器上一個腳本文件的URL,此URL包含我們打算通過GET格式傳回的鍵值對數據。(并沒有創建img元素或者將它們插入到DOM中),服務器取得此數據并保存下來,而不必向客戶端返回什么,因此沒有實際圖像顯示。

      優點:這是將信息返回服務器的最有效方法,回送數據最快,其開銷最小,而且任何服務器端錯誤并不會影響客戶端。

      缺點:接收到的響應類型是受限的,不能發送POST數據,所以URL長度限制在一個相當小的字符數量上。可以用非常有限的方法接收返回數據,可以監聽Image對象的load事件,它可以告訴你服務器端是否成功接收了數據。

      如果你需要向客戶端返回大量數據,那么使用XHR,如果你只關心將數據發送到服務器端(可能需要極少的回復),那么使用燈標

      數據格式

      主要有以下幾種數據格式

      1. XML
      2. JSON
      3. HTML
      4. 自定義格式
      5. </ol>

        XML

        優點:格式嚴格,易于驗證

        缺點:數據冗長,解析困難,解析速度慢,雖然XPath可稍微加快點解析速度,但并未得到廣泛支持。

        JSON

        JSON是一個輕易級并易于解析的數據格式 ,它按照JavaScript對象和數組字面量語法編寫。JSON數據可稱為能夠運行的JavaScript代碼。

        優點:格式小,占用空間小,下載最快,解析時間最短

        下面具體說一下JSON

        當使用XHR時JSON數據作為一個字符串返回,該字符串使用()轉換為一個本地對象

        當使用動態腳本標簽插入時,JSON數據被視為另外一個JavaScript文件并作為本地碼執行。為了做到這一點,JSON數據必須被包裝在回調函數中,這也就是JSON-P(JSON填充   也就是JSON-Padding)

        JSON-P

        JSON-P因為回調包裝的原因略微增加了文件尺寸,但與其解析性能的改進相比這點增加微不足道,由于數據作為本地JavaScript處理,它的解析速度像本地JavaScript一樣快。

        最快的JSON格式是使用數組的JSON-P格式。

        注意點:因為JSON-P必須是可執行的JavaScript,實驗室能夠跨域使用它使用動態腳本標簽注入技術可以任何網站中被任何人調用 ,所以安全性必須得注意,不應該涉及敏感數據。

        HTML

        使用HTML傳輸數據大合格解析時間長(在此不討論 一般盡量少使用)

        自定義格式

        自定義格式下載懂事,易于解析,只需要調用字符串的split將分隔符來解析數據。當創建你的自定義格式時,最重要的決定是采用何種分隔符(分隔符應該是一個單字符而不能存在于你的數據之中)。

        總結:XHR和動態腳本標簽注入都可以使用這種格式 ,兩種情況下都要解析字符串,在性能上沒有實質上的差異,對于非常大的數據集,它是最快的傳輸格式,甚至可以在解析速度和下載時間上擊敗本機執行的JSON。用此格式向客戶端傳送大量數據只用很少的時間。

        數據格式總結

        最好是用JSON和自定義格式 ,如果數據集大或者需要很長解析時間,請最好使用這兩種格式之一

        JSON-P數據用動態技術標簽插入法獲取 ,它將數據視為可運行的JavaScript而不是字符串,解析速度極快,能夠跨域使用,但不應涉及敏感數據。

        字符分隔的自定義格式,使用XHR或動態腳本標簽插入技術提取,使用split解析。此技術在解析非常大數據集時比JSON-P技術略快,而且通常文件尺寸更小。

        緩存數據

        在服務器端,設置HTTP頭,確保返回報文被緩存在瀏覽器中

        在客戶端,于本地緩存已獲取的數據,不要多次請求同一數據。

        原文出處: YouYaInsist 的博客   
 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!