一、XMLHttpRequest對(duì)象

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 對(duì)象，在這些瀏覽器中創(chuàng)建XHR 對(duì)象要像下面這樣使用XMLHttpRequest 構(gòu)造函數(shù)。

var xhr = new XMLHttpRequest();

1、XHR的用法

open()方法和send()方法
open()接收三個(gè)參數(shù)，分別是發(fā)送的請(qǐng)求類型，請(qǐng)求的url和是否發(fā)送異步請(qǐng)求的布爾值。send()方法接收的參數(shù)是請(qǐng)求主題發(fā)送的參數(shù)。例如：

var xhr = new XMLHttpRequest();
xhr.open("get", "example.php", false);
xhr.send(null);

由于這次請(qǐng)求是同步的，JavaScript 代碼會(huì)等到服務(wù)器響應(yīng)之后再繼續(xù)執(zhí)行。在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充XHR 對(duì)象的屬性，相關(guān)的屬性簡(jiǎn)介如下。

• responseText：作為響應(yīng)主體被返回的文本。
• responseXML：如果響應(yīng)的內(nèi)容類型是"text/xml"或"application/xml"，這個(gè)屬性中將保存包含著響應(yīng)數(shù)據(jù)的XML DOM 文檔。
• status：響應(yīng)的HTTP 狀態(tài)。
• statusText：HTTP 狀態(tài)的說(shuō)明。

xhr.open("get", "example.php", false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    alert(xhr.responseText);
}else{
    alert("Request was unsuccessful:" + xhr.status);
}

像前面這樣發(fā)送同步請(qǐng)求當(dāng)然沒(méi)有問(wèn)題，但多數(shù)情況下，我們還是要發(fā)送異步請(qǐng)求，才能讓JavaScript 繼續(xù)執(zhí)行而不必等待響應(yīng)。此時(shí)，可以檢測(cè)XHR 對(duì)象的readyState 屬性，該屬性表示請(qǐng)求/響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段。這個(gè)屬性可取的值如下。

• 0：未初始化。尚未調(diào)用open()方法。
• 1：?jiǎn)?dòng)。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法。
• 2：發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)。
• 3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
• 4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。
  只要readyState 屬性的值由一個(gè)值變成另一個(gè)值，都會(huì)觸發(fā)一次readystatechange 事件。可以利用這個(gè)事件來(lái)檢測(cè)每次狀態(tài)變化后readyState 的值。通常，我們只對(duì)readyState 值為4 的階段感興趣，因?yàn)檫@時(shí)所有數(shù)據(jù)都已經(jīng)就緒。不過(guò)，必須在調(diào)用open()之前指定onreadystatechange事件處理程序才能確?？鐬g覽器兼容性。

var xhr = new XMLHttpRequest();
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.send(null);

2、http頭部信息

xhr.setRequestHeader("MyHeader","MyValue");
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

3、GET請(qǐng)求和POST請(qǐng)求

GET 是最常見(jiàn)的請(qǐng)求類型，最常用于向服務(wù)器查詢某些信息。必要時(shí)，可以將查詢字符串參數(shù)追加到URL 的末尾，以便將信息發(fā)送給服務(wù)器。對(duì)XHR 而言，位于傳入open()方法的URL 末尾的查詢字符串必須經(jīng)過(guò)正確的編碼才行。
使用GET 請(qǐng)求經(jīng)常會(huì)發(fā)生的一個(gè)錯(cuò)誤，就是查詢字符串的格式有問(wèn)題。查詢字符串中每個(gè)參數(shù)的名稱和值都必須使用encodeURIComponent()進(jìn)行編碼，然后才能放到URL 的末尾

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

使用頻率僅次于GET 的是POST 請(qǐng)求，通常用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)。POST 請(qǐng)求應(yīng)該把數(shù)據(jù)作為請(qǐng)求的主體提交，而GET 請(qǐng)求傳統(tǒng)上不是這樣。POST 請(qǐng)求的主體可以包含非常多的數(shù)據(jù)，而且格式不限。

二、XMLHttpRequest 2級(jí)

1、FormData

代Web 應(yīng)用中頻繁使用的一項(xiàng)功能就是表單數(shù)據(jù)的序列化，XMLHttpRequest 2 級(jí)為此定義了FormData 類型。下面的代碼創(chuàng)建了一個(gè)FormData 對(duì)象，并向其中添加了一些數(shù)據(jù)。

var data = new FormData();
data.append("name", "Nicholas");

創(chuàng)建了FormData 的實(shí)例后，可以將它直接傳給XHR 的send()方法。

三、進(jìn)度事件

Progress Events 規(guī)范是W3C 的一個(gè)工作草案，定義了與客戶端服務(wù)器通信有關(guān)的事件。這些事件最早其實(shí)只針對(duì)XHR 操作，但目前也被其他API 借鑒。有以下6 個(gè)進(jìn)度事件

• loadstart：在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
• progress：在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。
• error：在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。
• abort：在因?yàn)檎{(diào)用abort()方法而終止連接時(shí)觸發(fā)。
• load：在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
• loadend：在通信完成或者觸發(fā)error、abort 或load 事件后觸發(fā)。

1、load事件

2、progress事件

四、跨源資源共享

21.4 跨源資源共享

通過(guò)XHR 實(shí)現(xiàn)Ajax 通信的一個(gè)主要限制，來(lái)源于跨域安全策略。默認(rèn)情況下，XHR 對(duì)象只能訪問(wèn)與包含它的頁(yè)面位于同一個(gè)域中的資源。這種安全策略可以預(yù)防某些惡意行為。但是，實(shí)現(xiàn)合理的跨域請(qǐng)求對(duì)開(kāi)發(fā)某些瀏覽器應(yīng)用程序也是至關(guān)重要的。
CORS（Cross-Origin Resource Sharing，跨源資源共享）是W3C 的一個(gè)工作草案，定義了在必須訪問(wèn)跨源資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS 背后的基本思想，就是使用自定義的HTTP 頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功，還是應(yīng)該失敗。
比如一個(gè)簡(jiǎn)單的使用GET 或POST 發(fā)送的請(qǐng)求，它沒(méi)有自定義的頭部，而主體內(nèi)容是text/plain。在發(fā)送該請(qǐng)求時(shí)，需要給它附加一個(gè)額外的Origin 頭部，其中包含請(qǐng)求頁(yè)面的源信息（協(xié)議、域名和端口），以便服務(wù)器根據(jù)這個(gè)頭部信息來(lái)決定是否給予響應(yīng)

要請(qǐng)求位于另一個(gè)域中的資源，使用標(biāo)準(zhǔn)的XHR 對(duì)象并在open()方法中傳入絕對(duì)URL 即可

五、其他跨域技術(shù)

1、圖像ping

上述第一種跨域請(qǐng)求技術(shù)是使用<img>標(biāo)簽。我們知道，一個(gè)網(wǎng)頁(yè)可以從任何網(wǎng)頁(yè)中加載圖像，不用擔(dān)心跨域不跨域。這也是在線廣告跟蹤瀏覽量的主要方式。正如第13 章討論過(guò)的，也可以動(dòng)態(tài)地創(chuàng)建圖像，使用它們的onload 和onerror 事件處理程序來(lái)確定是否接收到了響應(yīng)。動(dòng)態(tài)創(chuàng)建圖像經(jīng)常用于圖像Ping。圖像Ping 是與服務(wù)器進(jìn)行簡(jiǎn)單、單向的跨域通信的一種方式。

2、JSONP

JSONP 是JSON with padding（填充式JSON 或參數(shù)式JSON）的簡(jiǎn)寫(xiě)，是應(yīng)用JSON 的一種新方法，在后來(lái)的Web 服務(wù)中非常流行。JSONP 看起來(lái)與JSON 差不多，只不過(guò)是被包含在函數(shù)調(diào)用中的JSON

3、Coment

Comet 是Alex Russell①發(fā)明的一個(gè)詞兒，指的是一種更高級(jí)的Ajax 技術(shù)（經(jīng)常也有人稱為“服務(wù)器推送”）。Ajax 是一種從頁(yè)面向服務(wù)器請(qǐng)求數(shù)據(jù)的技術(shù)，而Comet 則是一種服務(wù)器向頁(yè)面推送數(shù)據(jù)的技術(shù)。Comet 能夠讓信息近乎實(shí)時(shí)地被推送到頁(yè)面上，非常適合處理體育比賽的分?jǐn)?shù)和股票報(bào)價(jià)。
有兩種實(shí)現(xiàn)Comet 的方式：長(zhǎng)輪詢和流。長(zhǎng)輪詢是傳統(tǒng)輪詢（也稱為短輪詢）的一個(gè)翻版，即瀏覽器定時(shí)向服務(wù)器發(fā)送請(qǐng)求，看有沒(méi)有更新的數(shù)據(jù)。圖21-1 展示的是短輪詢的時(shí)間線。

4、服務(wù)器發(fā)送事件

SSE（Server-Sent Events，服務(wù)器發(fā)送事件）是圍繞只讀Comet 交互推出的API 或者模式。SSE API用于創(chuàng)建到服務(wù)器的單向連接，服務(wù)器通過(guò)這個(gè)連接可以發(fā)送任意數(shù)量的數(shù)據(jù)。服務(wù)器響應(yīng)的MIME類型必須是text/event-stream，而且是瀏覽器中的JavaScript API 能解析格式輸出。SSE 支持短輪詢、長(zhǎng)輪詢和HTTP 流，而且能在斷開(kāi)連接時(shí)自動(dòng)確定何時(shí)重新連接。有了這么簡(jiǎn)單實(shí)用的API，再實(shí)現(xiàn)Comet 就容易多了。

• SSE API
• 事件流

5、Web Sockets

• Web Sockets API

var socket = new WebSocket("ws://www.example.com/server.php");

• 發(fā)送和接收數(shù)據(jù)

    var socket = new WebSocket("ws://www.example.com/server.php");
    socket.send("hello world");

    var message = {
        time:new Date(),
        text:"Hello world!",
        clientId:"adfw"
    };
    socket.send(JSON.stringify(message));

    // 接收數(shù)據(jù)
    socket.onmessage = function(event){
        v

• 其他事件
  WebSocket 對(duì)象還有其他三個(gè)事件，在連接生命周期的不同階段觸發(fā)。
  ?open：在成功建立連接時(shí)觸發(fā)。
  ?error：在發(fā)生錯(cuò)誤時(shí)觸發(fā)，連接不能持續(xù)。
  ?close：在連接關(guān)閉時(shí)觸發(fā)。