javascript高級程序設計第三版 第21章 Ajax與Comet

21.1 XMLHttpRequest對象

21.1.1 XHR的用法

var xhr = new XMLHttpRequest();

//接受3個參數：要發送的請求的類型（"get"，"post"等）、請求的URL和表示是否異步發送請求的布爾值
xhr.open("get","example.php",false);

//接受一個參數：即要作爲請求主體發送的數據，無則傳入null
xhr.send(null);

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);
        }
    }
};

//接收響應之前還可以調用abort()方法來取消異步請求
xhr.abort();

在收到響應後，響應的數據會自動填充XHR對象的屬性
responseText：作爲響應主體被返回的文本
responseXML：如果響應的內容類型是“text/xml”或“application/xml”，這個屬性中將保存包含着響應數據的XML DOM文檔
status：響應的HTTP狀態
statusText：HTTP狀態的說明

由於內存原因，不建議重用XHR對象。

21.1.2 HTTP頭部信息

setRequestHeader() 設置自定義的請求頭部信息，必須在調用open()方法之後且調用send()方法之前調用
getReponseHeader() 傳入頭部字段名稱
getAllReponseHeaders()

21.1.3 GET請求

URL末尾的查詢字符串必須經過正確的編碼
encodeURIComponent()

21.1.4 POST請求

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

21.2 XMLHttpRequest 2級

21.2.1 FormData

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

xhr.send(data);

//var form = document.getElementById("user-info");
//xhr.send(new FormData(form));

21.2.2 超時設定

略

21.2.3 overrideMimeType()方法

略

21.3 進度事件

loadstart，progress，error，abort，load，loadend

21.3.1 load事件

略

21.3.2 progress事件

略

21.4 跨源資源共享

CORS定義了在必須訪問跨源資源時，瀏覽器與服務器應該如何溝通。CORS背後的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或相應是應該成功，還是應該失敗。

在發送請求時，需要給它附加一個額外的Origin頭部，其中包含請求頁面的源信息（協議，域名和端口），以便服務器根據這個頭部信息來決定是否給予響應。
Origin: http://www.nczonline.net

如果服務器認爲這個請求可以接受，就在Access-Control-Allow-Origin頭部中回發相同的源信息（如果是公共資源，可以回發*）
Access-Control-Allow-Origin: http://www.nczonline.net

如果沒有這個頭部，或者有這個頭部但源信息不匹配，瀏覽器就會駁回請求。正常情況下，瀏覽器會處理請求。注意，請求和響應都不包含cookie信息。

其餘略

21.5 其它跨域技術

21.5.1 圖像Ping

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

21.5.2 JSONP

function handleResponse(response){
    alert(response);
}

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

其餘略