Ajax非同步與JavaScript的一些初淺認識

發表於2015-01-04

向伺服器請求資料的技術

有以下五種常用技術用於向伺服器請求資料

  1. XMLHttpRequest(XHR)
  2. Dynamic script tag insertion(動態指令碼標籤插入)
  3. iframes
  4. Comet
  5. Multipart XHR (多部分的XHR)

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. 燈標

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. 自定義格式

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頭,確保返回報文被快取在瀏覽器中

在客戶端,於本地快取已獲取的資料,不要多次請求同一資料。

相關文章