很久沒有來博客，發現這篇博客是訪問量最高的
在近期會整理一下這篇博客的重點知識。希望給查找資料的朋友們方便，同時繼續開始我的博客記錄之旅
目錄：
1、XMLHttpRequest 用法
1、XMLHttpRequest 用法
IE5是第一款引入XHR對象的瀏覽器。在IE5中，XHR對象是通過MSXML庫中的一個ActiveX對象實現的。因此，在IE中可能會遇到三種不同版本的XHR對象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。 要使用MSXML庫中的XHR對象，需要編寫一個函數：
//適用於IE7之前的版本
Function createXHR(){
If (typeof arguments.calle.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) {
//跳過
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
這個函數會盡力根據IE中可用的MSXML庫的情況創建最新版本的XHR對象。
IE7+,firefox,opera,chrome和safari都支持原生的XHR對象，在這些瀏覽器中創建對象要像下面這樣使用XMLHttpRequest構造函數。
var xhr = new XMLHttpRequest();
如只想支持ie7+版本，可以直接用原生XHR實現。
使用XHR對象時，要調用的第一個方法是open()
它接受3個參數：
要發送的請求的類型（”get,post等）
請求的URL
表示是否異步發送請求的布爾值
xhr.open(“get”, ”example.php”, false);
這段代碼會啟動一個針對example.php的GET請求。
但注意兩點:
1.URL相對於執行代碼的當前頁面（也可以使用絕對路徑）
2.調用open()方法並不會真正發送請求，只是啟動一個請求以備發送
要發送特定的請求，必須像下面這樣調用send()方法：
xhr.open(“get”, “example.txt”, false)
xhr.send(null);
這里的send()方法接收一個參數，即要做為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入null,因為這個參數對有些瀏覽器來說是必須的。
調用send()之后，請求就會被分派到服務器。
由於請求是同步的，javascript代碼會等到服務器響應之后再繼續執行。在收到響應后，響應的數據會自動填充XHR對象的屬性：
responesText: 作為響應主體被返回的文本。
responesXML: 如果響應的內容類型是“text/xml”或”application/xml”，這個屬性中將包含着響應數據的XML DOM文檔。
status: 響應HTTP狀態
statusText: HTTP狀態說明。
在收到響應后，第一步檢查status屬性，以確定響應已經成功返回。
一般可以將HTTP狀態碼為200作為成功的標志。此時responseText屬性的內容已經就緒，而且在內容類型正確的情況下，responseXML也應該能夠訪問了。
狀態代碼為304表示請求的資源並沒有修改，可以直接使用瀏覽器中的緩存版本;也意味着響應是有效的。
為確保接收到適應的響應，應該像下面這樣檢查上述這兩種狀態代碼：
xhr.open(“get”, “example.txt”, false);
xhr.send(null);
if((xhr.status == 200 && xhr.status < 300 ) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert(“Requst was unsuccessful: “ + xhr.status);
}
根據返回的狀態代碼，顯示服務器返回的內容，或是錯誤提示。
建議通過檢測status來決定下一步的操作，不要依賴statusText，因為后者在跨瀏覽器中使用時不太可靠。
無論內容類型是什么，響應主體的內容都會保存在responseText屬性中;而對於非XML數據而言，responseXML屬性值為null.
[有的瀏覽器會錯誤的報告204狀態代碼。IE中XHR的ActiveX版本會將204設置為1223，而IE中原生的XHR則會將204規范化為200.opera會在取得204時報告 status 為0]
多數情況下，我們還是要發送異步請求，才能讓javascript繼續執行而不必等待響應。可以檢測XHR對象的readyState屬性。該屬性表示請求、響應過程的當前活動階段。
readyState可取的值如下：
0： 未初始化。尚未調用open()方法。
1： 啟動。已經調用open()方法，但尚未調用send()方法。
2： 發送。已經調用send()方法，但尚未接收到響應。
3： 接收。已經接收到部分響應數據。
4： 完成。已經接收到全部響應數據，而且已經可以在客戶端使用了。
只要readyState屬性的值由一個值變成變一個值，都會觸發一次readystatechange事件。可以利用這個事件來檢測每次狀態變化后readyState的值。
通常只對readyState值為4的階段感興趣，因為這時所有的數據已經就緒。
不過，必須在調用open()之前指定onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。
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(“Requst was unsuccessful: “ + xhr.status)
}
}
}
xhr.open(“get”, “example.txt”, true);
Xhr.send(null)
在接收到響應之前還可以調用abort()方法來取消異步請求，
xhr.abort();
2、HTTP頭部信息
每個HTTP請求和響應都會帶有相應的頭部信息，其中有的對開發人員有用，有的沒什么用。
XHR對象也提供了操作這兩種頭部（即請求頭部和響應頭部）信息的方法。
默認情況下，在發送XHR請求的同時，還會發送下列頭部信息：
Accept: 瀏覽器能夠處理的內容類型。
Accept-Charset: 瀏覽器能顯示的字符集。
Accept-Encoding: 瀏覽器能夠處理的壓縮編碼。
Accept-Language: 瀏覽器當前設置的語言。
Connection: 瀏覽器與服務器之間連接的類型
Cookie: 當前頁面設置的任何Cookie.
Host: 發出請求的頁面所在的域。
Referer: 發出請求的頁面的URI。 HTTP規范裝飾這個頭部字段拼寫錯了，為保證與規范一致，只能將錯就錯（原拼法：referrer）
User-Agent: 瀏覽器的用戶代理字符串。
雖然不同瀏覽器實際發送頭部信息有所不同，但以上列出的基本上是所有瀏覽器都會發送的。
使用setRequestHader()方法可以設置自定義的請求頭部信息。
這個方法接受兩個參數：頭部字段的名稱和頭部字段的值。
要成功發送請求頭部信息，必須在調用open()方法之后且調用send()方法之前調用setRequestHeader()：
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(“Requst was unsuccessful: “ + xhr.status)
}
}
}
xhr.open(“get”, “example.txt”, true);
xhr.setRequestHeader(“myHeader”,”myvalue”)
Xhr.send(null)
服務器在接收到這種自定義的頭部信息后，可以執行相應的后續操作。建議使用自定義的頭部字段名稱，不要使用瀏覽器正常發送的字段名稱，否則有可能影響服務器的響應。
有的瀏覽器允許開發人員重寫默認的頭部，但有的瀏覽器不允許這樣做。
調用XHR對象的getResponseHeader()方法並傳入頭部字段的名稱，可以取得相應的響應頭部信息。
調用getAllResponseHeaders()方法則可以取得一個包含所有頭部信息長字符串。
var myHeader = xhr.getRequestHeader(“myHeader”);
var allHeader = xhr.getAllRequestHeaders();
在服務器端，也可以利用頭部信息向瀏覽器發送額外的、結構化的數據。
在沒有自定義信息的情況下，getAllResponseHeaders()方法通常會返回如下所示的多行文本內容。
Date: Sun, 14 Nov 2004 18:04:03 GMT
Server: Apache/1.3.29(Unix)
Vary: Accept
X-Powered-By: PHP/4.3.8
Connection: close
Content-Type: text/html; charset=iso-8859-1;
格式化的輸出可以方便我們檢查響應中所有頭部字符的名稱，而不必一個一個檢查某個字段是否存在。
調用這個方法后，XHR對象會停止觸發事件，而且也不再允許訪問任何與響應有關的對象屬性。在終止請求之后，還應對XHR對象進行解引用操作。由於內在原因，不建議重用XHR對象。
3、progress events 及進度事件
Progress Events 規范是W3C的一個工作草案，定義了與客戶端服務器通信有關的事件。這些事件最早其實只針對XHR操作，但目前也被其它API借鑒。
有以下6個進度事件。
loadstart: 在接收到響應數據的第一個字節時觸發
progress：在接收響應期間持續不斷的觸發
error: 在請求錯誤時觸發
abort: 在因為調用abort()方法而終止連接時觸發
load: 在接收到完整的響應數據時觸發
loadend:在通信完成或者觸發error,abort ,load事件后觸發
每個請求都從觸發loadstart事件開始，接下來是一個或多個progress事件，然后觸發error,abort,load事件中的一個，最后以觸發loadend事件結束。
支持5個事件的瀏覽器有firefox3.5+ safari 4+ chrome opera ie8+只支持load事件。
本文內容均是整理自《javascript高級設計設計第3版》