javascript：Ajax與Comet

標籤：state   改變   style   text   script   size   star   pos   request對象   

一：使用XMLHttpRequest對象

　　ajax的核心是XMLHttpRequest對象。IE7以下的瀏覽器XHR定義方法不同。對於較進階的瀏覽器 var xhr = new XMLHttpRequest().　

var xhr  = new XMLHttpRequest();xhr.open()xhr.send(null)

xhr.open接收三個參數，第一個為發送方式get或者post。第二個參數是URL,第三個參數是布爾值，是否是非同步。

xhr.send(null),參數為向伺服器發送的資料，如果沒有，必須寫上null.

瀏覽器的響應資料作為xhr的屬性：respenseText,responseXML,status,statusText。status的狀態為200表示成功，狀態為304表示內容沒有被修改，可以直接使用緩衝。

　　2）非同步請求下，xhr的屬性readyState,表示當前活動狀態，等於4時表示成功，每當狀態改變時都會調用onreadystatechange()事件，該事件的定義必須放在xhr.open函數之前。

　　xhr.abort()取消非同步請求

　　3）設定和擷取http請求的頭部資訊

　　　　通過方法xhr.setRequestHeader(頭部欄位名稱名稱，要設定的值)進行設定。

　　　　擷取響應的頭部資訊：xhr.getResponseHeader(頭部欄位名稱) ， getAllResponseHeaders()擷取所有的頭部資訊

　　4）get請求--url字串編碼問題

　　　　url中的每個字串必須要使用encodeURLComponent()進行編碼，例如example.php?name1=value1&name2=value2

　　5) post請求

　　　　向伺服器發送資料，xhr.send(data)。FormData對象，定義發送的表單對象，var data = new FormData(),data.append(key,value),FormData對象是在xhr2級中出現的。

　　6）timeout 逾時設定

　　　　xhr.timeout  = 1000hs。當逾時時會觸發ontimeout事件，xhr.ontimeout = function(){}

var xhr  = new XMLHttpRequest();xhr.onreadystatechange = function(){  if (xhr.readystate == 4)       {    try{    if((xhr.statue>=200 && xhr.status<=300)||xhr.status==304)          {xhr.responseText}}  catch(ex){//假設有ontimeout處理事件}}       }xhr.open();xhr.timeout = 1000;xhr.ontimeout = function(){}xhr.send(null)

　　　

二：使用XMLHttpRequest事件

　　進度事件：有以下6個進度事件。loadstart、progress、error、abort、load、loadend。

　　1) 使用load事件最佳化：

var xhr  = new XMLHttpRequest();xhr.onload = function(){          try{    if((xhr.statue>=200 && xhr.status<=300)||xhr.status==304)          {xhr.responseText}}  catch(ex){//假設有ontimeout處理事件}      }xhr.open();xhr.timeout = 1000;xhr.ontimeout = function(){}xhr.send(null)

瀏覽器只要接收到伺服器響應，不管狀態如何都會觸發load事件，因此必須要檢查status.

 　　2)使用progress事件建立進度條

　　　　onprogress事件接收到一個event對象，event對象有個屬性target,指向XHR對象，另外還包括lengthComputabel(布爾值，表示是否可用), totalsize , position。

三：跨域Ajax通訊的限制

　　CORS（跨域資源共用），其基本思想是自訂http頭部資訊，讓瀏覽器與伺服器進行溝通，從而決定請求是成功還是要失敗。

javascript：Ajax與Comet