Ajax通信與數(shù)據(jù)格式無關，從服務器獲取的數(shù)據(jù)不一定是XML數(shù)據(jù)。

Ajax的核心：XMLHttpRequest對象(簡稱XHR)

在XHR對象之前，Ajax通信通常使用hack手段，如使用隱藏的或內(nèi)嵌的框架。

XHR對象為向服務器發(fā)送信息和解析服務器響應提供了流暢的接口。

1.XMLHttpRequest對象

IE5是第一款引進XHR對象的瀏覽器，通過MSXML庫中的ActiveX對象實現(xiàn)(有3個版本)。

　　兼容所有瀏覽器，創(chuàng)建XHR對象：

function createXHR(){
  if (typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined"){
    if (typeof arguments.callee.activeXString != "string"){
      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
              "MSXML2.XMLHttp"],
        i, len;
  
      for (i=0,len=versions.length; i < len; i++){
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (ex){
          //skip
        }
      }
    }
  
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

之后就能在所有瀏覽器創(chuàng)建XHR對象：var xhr = createrXHR();

2.原生XHR對象 (支持的瀏覽器: IE7+、FF、Chrome、Opera、Safari)

通過XMLHttpRequest構建函數(shù)，創(chuàng)建XHR對象：

var xhr = new XMLHttpRequest();

3.XHR用法

3-1.open()

open() 3個參數(shù): 發(fā)送的類型、請求的URL、表是否異步的布爾值

xhr.open("get","example.php", false);

①URl為相對于執(zhí)行代碼的當前頁，或絕對地址；

②false為同步，JavaScript代碼會在服務器響應后再繼續(xù)執(zhí)行；

③調(diào)用open()只是啟動一個請求以備發(fā)送，還沒真正發(fā)送；

④只能在同個域中使用相同端口和協(xié)議的URL發(fā)送請求。

3-2.send()

send() 1個參數(shù): 請求主體發(fā)送的數(shù)據(jù)，不需要通過請求主體發(fā)送數(shù)據(jù)則傳入null。

調(diào)用send()后，請求被分派到服務器。

xhr.open("get","example.php", false) ;
xhr.send(null);

3-3. 收到響應后，響應數(shù)據(jù)會自動填充XHR對象的屬性：

responseText：作為響應的主體被返回的文本；

responseXML：若響應的內(nèi)容類型”text/xml”或”application/xml”，此屬性保存響應數(shù)據(jù)XML DOM文檔

status：響應的HTTP狀態(tài)；

statusText：HTTP狀態(tài)的說明。

☆：無論什么內(nèi)容類型，響應主體的內(nèi)容都會保存在responseText屬性中。對于非XML數(shù)據(jù)，responseXML屬性值為null。
3-4.status屬性確認響應是否成功返回

HTTP狀態(tài)代碼：

200：響應有效，responseText屬性已就緒，內(nèi)容類型正確下的responseXML也可訪問。

304：響應有效，只是請求的資源并為修改，可直接使用瀏覽器中緩存的版本。

正確檢查上述2種狀態(tài)代碼:

status判斷

 if ((xhr.status >= 200 && xhr.status <=300) || xhr.status == 304) {
   alert(xhr.responseText);
} else {
   alert("Request was unsuccessful:" + xhr.status);
};

3-5.readystate屬性

該屬性存儲 請求/響應過程的 當前活動狀態(tài)。

0 : 未初始化，未調(diào)用open()；
1 : 啟動，調(diào)用了open()；
2 : 發(fā)送，調(diào)用了send()，未接受響應；
3 : 接受，已接受部分響應；
4 : 完成，已接受全部響應，且可在客戶端使用。

3-6.readystatechange事件

該事件，在readystate屬性值改變時觸發(fā)。

readystatechange事件句柄

var xhr = createXHR();
xhr.onreadystatechange = function(event){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

①必須在調(diào)用open()之前知道readystatechange事件的事件處理程序，確保兼容。

②該事件處理程序中沒有傳遞event對象，必須通過XHR對象本地來確定下一步怎么做；

③使用xhr對象而不使用this對象，是因為onreadystatechange事件處理程序的作用域問題。使用this對象在一些瀏覽器會導致函數(shù)執(zhí)行失敗或發(fā)生錯誤。

3-7.abort()

調(diào)用此方法可取消異步請求：xhr.abort();

調(diào)用后，xhr對象停止觸發(fā)事件，不允許訪問如何與響應相關的屬性；

終止請求后，應對XHR對象進行解引用操作，不建議重用XHR對象。

4、HTTP頭部信息

發(fā)送請求時的頭部信息：

Accept：瀏覽器能夠處理的內(nèi)容類型

Accept-Charset：瀏覽器能夠顯示的字符集

Accept-Encoding：瀏覽器能夠處理的壓縮編碼

Axxept-Language：瀏覽器當前設置的語言

Connection：瀏覽器與服務器之間連接的類型

Cookie：當前頁面設置的如何Cookie

Host：發(fā)送請求耳洞頁面所在域

Referer：發(fā)出請求的頁面的URI

User-Agent：瀏覽器的用戶代理字符串

setRequestHeader()

設置自定義頭部信息。

2個參數(shù)：頭部字段名稱、頭部信息值。

需在open()方法之后調(diào)用send()之前調(diào)用setRequestHeader()，才能成功發(fā)送請求頭部信息。

自定義HTTP頭部信息

var xhr = createXHR();    
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

getRequestHeader()

獲取指定的相應頭部信息

xhr.getRequestHeader(“MyHeader”);
getAllRequestHeader()

獲取一個包含所有頭部信息的長字符串

xhr.getAllRequestHeader();

5、GET請求

　　對于XHR對象，位于opne()的URL末尾的查詢字符串 需經(jīng)過編碼，使用encodeURIComponent()編碼。

　　名-值對需用和號(&)分隔。

　　自定義函數(shù)，添加URL查詢字符串參數(shù)：

function addURLParam(url,name,value){
  url += (url.indexOf('?') == -1?'?':'&');
  url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
  return url;
}

6、POST請求

　　長用于想服務器發(fā)送要保存的數(shù)據(jù)。

　　由于XHR其初的設計是為了處理XML，故在send(0中可傳入XHR DOM文檔。

6-1.服務端讀取POST數(shù)據(jù)

　　①默認情況下，服務器對POST請求和提交Web表單不會一視同仁，故服務端需要程序來讀取發(fā)送的原始數(shù)據(jù)，并解析出有用部分。

　?、赬HR模擬表單提交：

　　　　1.將Content-Type頭部信息設置為application/x-www-form-urlencoded (即表單提交時的內(nèi)容問題)；

　　　　2.以適當格式創(chuàng)建一個字符串。(通過serialize()函數(shù)創(chuàng)建該字符串，序列化表單數(shù)據(jù))

XHR模擬表單提交

function submitData(){
  var xhr = createXHR();    
  xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
    }
  };

  

  xhr.open("post", "postexample.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var form = document.getElementById("user-info");      
  xhr.send(serialize(form));
}

 7、CORS 跨源資源共享（IE8+、FF、Chrome....）

　　跨域安全策略限制了Ajax的異步通信，CORS則是定義了跨域時，客戶端和服務器的溝通。

　　CORS思想：使用自定義HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求/響應的成功與否。

7-1.給一個請求附加Origin頭部，包含請求頁面的源信息(協(xié)議、域名 和 端口)

Origin: http://www.domain.com

服務器根據(jù)Origin判斷是否接收請求，接收則在Access-Control-Allow-Origin頭部會發(fā)相同信息。

　　　?。ㄈ羰枪操Y源，可以回發(fā)"*"）

Access-Control-Allow-Origin: http://www.domain.com

若無此頭部或頭部信息不匹配，瀏覽器將駁回請求。

☆請求和響應不會包含cookie信息。

7-2.IE8+對CORS的實現(xiàn)

　　IE8引入的XDR(XDomainRequest)類型，類型XHR，可實現(xiàn)安全可靠的跨域通信。

7-2-1.XDR與XHR的不同之處：

　　①cookie不會隨請求發(fā)送，也不會隨響應返回；

　?、谥荒茉O置請求頭部信息中的Content-Type字段；

　?、鄄荒茉L問響應頭部信息；

　?、苤恢С諫ET和POST請求

XDR緩解了CSRF(跨站請求偽造)和XSS(跨站點腳本)問題

被請求的資源可判斷用戶代理、來源頁面等如何數(shù)據(jù) 來決定是否設置Access-Control-Allow-Origin頭部

7-2-2. XDR使用方法類似XHR，創(chuàng)建一個XDomainRequest實例，調(diào)用open()，再調(diào)用send()。

　　XDR只能執(zhí)行異步請求，所以open()方法只有兩個參數(shù)，請求的類型和URL。

　　在收到響應后，只能訪問響應的原始文本，無法確定響應的狀態(tài)代碼。

　　只要響應有效就會觸發(fā)load事件，響應的數(shù)據(jù)會保存在responseText屬性中。

　　如果失?。ㄈ?，響應中缺少Access-Control-Allow-Origin頭部）就會觸發(fā)error事件，但該事件無有用信息，需要自定義一個onerror事件句柄。

obload事件-onerror事件

var xdr = new XDomainRequest();
xdr.onload = function(){
  alert(xdr.responseText);
};
xdr.onerror = function(){
  alert("Error!");
};

xdr.open("get", "http://www.somewhere-else.com/xdr.php");
xdr.send(null);

在請求返回前調(diào)用abort()可終止請求。

7-2-3.XDR也支持timeout屬性及ontiomout事件處理程序，在運行超過timeout設定的秒數(shù)后，調(diào)用ontimeout事件句柄。

　　為支持POST請求，XDR提供了contentType屬性，用于表示發(fā)送數(shù)據(jù)的格式。

　　　　contentType屬性是XDR對象影響頭部信息的唯一方式。

xdr.contentType = "application/x-www-form-urlencoded";

7-3其他瀏覽器對CORS的實現(xiàn)

　　FF等瀏覽器都通過XMLHttpRequest對象實現(xiàn)了對CORS的原生支持。要請求另一個域中的資源時，使用標準XHR對象并在open()中傳入絕對URL即可。

標準XHR的跨域

var xhr = createXHR();    
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "http://www.abc.com/page/", true);
xhr.send(null);

與IE不同，通過跨域XHR對象可以訪問status屬性和statusText屬性，也可同步請求。

7-3-1.跨域XHR的限制：

　?、俨荒苁褂胹etRequestHeader()設置自定義頭部；

　?、诓荒馨l(fā)送和接收cookie；

　　③調(diào)用getAllResponseHeader()方法總會返回空字符串。

7-3-2.無論同源請求還是跨域請求都是使用相同的接口，故對于本地資源，最好用相對URL，對遠程資源再用絕對URL。

　　這樣能消除歧義，避免出現(xiàn)限制訪問頭部或本地cookie信息等問題。

7-4、跨瀏覽器的CORS（IE8+、FF等）

　　檢測XHR是否支持CORS的方法：檢查是否存在withCredentials屬性，在結(jié)合檢測XDomainRequest對象是否存在。

CORS跨域兼容

function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");
if (request){
  request.onload = function(){
    //do something with request.responseText
  };
  request.send();
}

上述createCORSRequest()函數(shù)返回的對象的屬性(XHR和XDR的共同屬性)：

　　①abort()：停止正在進行的請求；

　?、趏nerror：用于替代onreadystatechange檢測錯誤；

　?、踥nload：用于代替onreadystatechange檢測成功；

　　④responseText：用于取得響應內(nèi)容；

　?、輘end()：用于發(fā)送請求。

8、其他跨域技術

　　在CORS出現(xiàn)前，常利用DOM中能夠執(zhí)行跨域請求的功能，在不依賴XHR對象時，也能發(fā)送某種請求。

　　與COSR不同的是，不用修改服務器代碼。

8-1.圖像Ping

　　使用<img>標簽，由于可以從任何網(wǎng)頁加載圖像，故常是在線廣告跟蹤瀏覽量的只要方式。

　　可動態(tài)創(chuàng)建圖像，使用它們的onload和onerror事件句柄，確定是否接受到了響應。

var img = new Image();
img.onload = img.onerror = function(){
  alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas"; 

圖像Ping是與服務器進行簡單、單向的跨域通信的一種方式。請求的數(shù)據(jù)通過查詢字符串形式發(fā)送，響應可以是任何內(nèi)容，通常是像素圖或204響應。雖然通過圖像Ping，瀏覽器得不到任何具體數(shù)據(jù)，但通過偵聽load和error事件，能找到響應收到的時間。

　　圖像Ping常用于跟蹤用戶點擊頁面 或動態(tài)廣告曝光次數(shù)。

　　缺點：①只能發(fā)送GET請求；②無法訪問服務器響應文本。

8-2.JSONP

　　JSONP(JSON width Padding)填充式JSON或參數(shù)式JSON，類似JSON，是包含在函數(shù)調(diào)用中的JSON：

callback( {"name" : "value"} );
8-2-1.JSONP有兩個部分：回調(diào)函數(shù) 和 數(shù)據(jù)

　　回調(diào)函數(shù)：當響應到來時應該在頁面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名稱在請求中指定。

　　數(shù)據(jù)：傳入回調(diào)函數(shù)的JSON數(shù)據(jù)。

8-2-2.JSONP通過動態(tài)<script>元素，為其src屬性指定一個跨域的URL。類似<img>元素，即都能不受限制地跨域加載資源。

　　JSONP為有效的JavaScript代碼，在請求完成即JSONP響應 加載到頁面后就會立即執(zhí)行。

function handleResponse(response){
  alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

headleResponse()為回調(diào)函數(shù)，將在響應到來后執(zhí)行。

8-2-3.JSONP之所以流行，是因為 ：

　　　?、倌軌蛑苯釉L問響應文本；

　　　?、谥С譃g覽器與服務器之間的雙向通信。

　　不足：

　　　?、貸SONP從其他域加載代碼執(zhí)行，因此該域必須安全可靠；

　　　?、诤茈y確保JSONP請求是否失敗。

8-3Comet ”服務器推送" 【不兼容IE】

　　Ajax從頁面想服務器請求數(shù)據(jù)，Comet則是服務器向頁面推送數(shù)據(jù)，Comet能近乎實時地向頁面推送信息。

8-3-1.實現(xiàn)Comet的2種方式：長輪詢 和 流

　?、匍L輪詢：與短輪詢相反，頁面發(fā)送一個請求，服務器一直保持連接打開，直到有數(shù)據(jù)可發(fā)送時就向頁面發(fā)送數(shù)據(jù)。接收完數(shù)據(jù)后瀏覽器關閉連接，隨機又發(fā)送一個新請求，在頁面打開期間如此循環(huán)...

　　【短輪詢是服務器立即發(fā)送數(shù)據(jù)，即使數(shù)據(jù)無效，長輪詢是等待發(fā)送響應?！?/p>

　　輪詢的優(yōu)點是，所有瀏覽器都支持。通過XHR對象和setTimeout()實現(xiàn)。

　?、贖TTP流：它在網(wǎng)頁的整個生命周期內(nèi)只使用一個HTTP連接。瀏覽器發(fā)送一個請求，服務器保持連接打開，再周期性向瀏覽器發(fā)送數(shù)據(jù).

PHP例子

<?php
　　$i = 0;
　　while (true) {
　　　　//輸出一些數(shù)據(jù)，然后刷新輸出緩存
　　　　echo "Number is $1";
　　　　flush();

　　　　//等幾秒
　　　　sleep(10);

　　　　$++;
　　}
...

實現(xiàn)HTTP流的關鍵：所有服務器端語言都支持打印到輸出緩存然后刷新的功能。(將輸出緩存中的內(nèi)容一次性全部發(fā)送給客戶端)

使用XHR實現(xiàn)HTTP流的典型例子

var xhr = new XMLHttpRequest(),
  received = 0;
  
xhr.open("get", url, true);
xhr.onreadystatechange = function(){
  var result;
  
  if (xhr.readyState == 3){
  
    //get only the new data and adjust counter
    result = xhr.responseText.substring(received);
    received += result.length;
    
    //call the progress callback
    progress(result);
    
  } else if (xhr.readyState == 4){
    finished(xhr.responseText);
  }
};
xhr.send(null);
return xhr;
}

var client = createStreamingClient("streaming.php", function(data){
      alert("Received: " + data);
     }, function(data){
      alert("Done!");
     });

以上就是腳本之家小編為大家分享的Ajax高級筆記的相關內(nèi)容，對于學習ajax的朋友應該是個不錯的入門講解。

最新評論