XHR:

// XHR(XMLHttpRequest):為向服務器發送請求和解析服務器響應提供了流暢的接口
// 能夠以異步方式從服務器取得更多信息,意味著用戶點擊后,可以不必刷新頁面也能取得新數據
// 換句話說,可以使用XHR對象獲取新數據,然后再通過DOM將新數據插入到頁面中.

XMLHttpRequest對象:

// IE5是第一款引入XHR對象的瀏覽器.再IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現的.
// 因此,在IE中可能會遇到三種不同版本的XHR對象:
// IE7之前的生成xhr對象
function createXHR() {if(typeof arguments.callee.activeXString != "string") {var version = ["XSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","XSXML2.XMLHttp"],i, len;for (i=0, len = versions.length; i < len; i++) {try {new activeXObject(versions[i]);arguments.callee.activeXString = versions[i];} catch (ex) {// jump this}}return new ActiveXObject( arguments.callee.activeXString);}
}// 支持IE7及更高的版本,生成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;} catct(ex) {// 跳過}}return new ActiveXObject(arguments.callee.activeXString);} else {throw new Error("No XHR object avilable.");}
}

XHR.open()創建一個待發送的請求:

// open():它接受3個參數:要發送的請求的類型("get","post"等)、請求的URL和是否異步發送請求的布爾值
// 利用上面定義的方法
var xhr = createXHR();
xhr.open("get", "example.php", false);// 以上代碼會啟動一個針對example.php的GET請求.
// 注1:以上的URL是相對于執行代碼的當前頁面
// 注2:open方法并不會真正發送請求,而只是啟動一個請求以備發送
// 注3:只能像同一個域中使用相同端口和協議的URL發送請求.

XHR.send()發送待發送請求:

// send():接收一個參數,即要作為請求主體發送的數據.如果不需要通過請求主體發送數據,則必須傳入null.
// 利用上面創建的待發送請求
xhr.send(null);

服務器響應的幾個XHR屬性:

// responseText: 作為響應主體被返回的文本
// responseXML: 如果響應的內容類型是"text/xml" 或”application/xml",這個屬性中將保存包含著響應數據的XML DOM文檔
// status: 響應的HTTP狀態
// statusText: HTTP狀態的說明// 可以像下面這樣檢測返回的status
xhr.open("get", url, false);   // 同步方式
xhr.send(null);if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304) {alert(xhr.responseText);  // 響應主體
} else {alert("Request was unsuccessful: " + xhr.status);
}
// 注1:狀態碼304,代表請求資源未修改

XHR異步發送請求的readyState屬性:

// 該屬性表示請求 / 響應過程的當前活動階段
// xhr.readyState == 0：未初始化,尚未調用open方法
// xhr.readyState == 1: 啟動,調用了open方法,但未調用send方法
// xhr.readyState == 2: 發送,已經調用了send方法,但并未收到響應
// xhr.readyState == 3: 接收,已經接收到部分響應數據
// xhr.readyState == 4: 完成,已經接收到全部響應數據,而且已經可以在客戶端使用了// 看下面一個例子:
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.stauts);}}
};
xhr.open("get", url, true);    // 異步發送請求
xhr.send(null);// 注1:每次readyState改變時,都會觸發一次onreadystatuschange事件
// 注2:以上onreadystatuschange事件是通過DOM0級方法添加的(原因,DOM2級添加方法僅支持部分瀏覽器)// xhr.abort():用于在接收到響應前,取消異步請求
xhr.abort();

HTTP頭部信息:

// Accept: 瀏覽器能夠處理的內容類型
// Accept-Charset: 瀏覽器能夠顯示的字符集
// Accept-Encoding: 瀏覽器能夠處理的壓縮編碼
// Accept-Language: 瀏覽器當前設置的語言
// Connection: 瀏覽器域服務器之間連接的類型
// Cookie: 當前頁面設置的任何Cookie
// Host: 發出請求的頁面所在的域
// Referer: 發出請求的頁面的URI
// User-Agent: 瀏覽器的用戶代理// 使用xhr.setRequestHeader發送請求頭部信息.必須位于xhr.open和xhr.send之間
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", url, true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);// xhr.getResponseHeader():可以取得響應的響應頭部信息
// xhr.getAllResponseHeaders():可以取得一個包含所有頭部信息的長字符串
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

GET請求:

// 用于向服務器查詢某些信息,可以將查詢字符串參數追加到URL的末尾
// 查詢字符串中的每個參數的名稱和值都必須使用encodeURIComponent()進行編碼,然后才能放到URL的末尾// addURLParam
function addURLParam(url, name, value) {url += (url.indexOf("?") == -1 ? "?" : "&");url += encodeURIComponent(name) + "=" + encodeURIComponent(value);return url;
}// use
var url = "example.php";
url = addURLParam(url, "name", "Nicholas");   // example.php?name=Nicholas
url = addURLParam(url, "book", "Professional JavaScript"); // example.php?name=Nicholas&book=Professional%JavaScriptxhr.open("get", url, false);

POST請求:

// 通常用于向服務器發送應該被保存的數據// 使用XHR來模仿表單提交
function submitData() {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("post", "postexample.php", ture);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));   // serialize是標準化表單元素的函數
}// 附:serialize()
function serialize (form) {var parts = [],i,len,j,optLen,option,optValue;for( i =0, len = form.elments.length; i< len; i ++) {filed = form.ekenebts[i];switch(field.type) {case "select-one":case "select-multiple":if(field.name.length) {for(j = 0, optLen = field.options.length; j < optLen; j++) {option = field.options[j];if(option.selected) {optValue = "";if ( option.hasAttribute) {optValue = (option.hasAttribute("value") ?option.value : option.text);} else {optValue = (option.attribute["value"].specified ?option.value : option.text);}parts.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));}}}break;case undefined:case "file":case "submit":case "reset":case "button":break;case "radio":case "checkbox":if(!field.checked) {break;}default:if(field.name.length) {parts.push(encodeURIComponent (field.name) + "=" +encodeURIComponent (field.value));}}}return parts.join("&");
}// 注:在發送相同大小數據的時候,GET請求的速度最多可達POST請求速度的2倍

參考《JavaScript高級程序設計》(第3版)P436~P437 、P571~P578