XHR——XMLHttpRequest對象

創建XMLHttpRequest對象

與之前眾多DOM操作一樣,創建XHR對象也具有兼容性問題:IE6及之前的版本使用ActiveXObject,IE7之后及其它瀏覽器使用XMLHttpRequest

不但IE6及其之前的版本將XHR作為一個ActiveXObject運行,而且還存在眾多版本:一開始是Microsoft.XMLHTTP 之后變成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP

	function XHR() {
		var xhr;
		try {xhr = new XMLHttpRequest();}
		catch(e) {
			var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
			for (var i=0,len=IEXHRVers.length;i< len;i++) {
				try {xhr = new ActiveXObject(IEXHRVers[i]);}
				catch(e) {continue;}
			}
		}
		return xhr;
	}

使用XHR

	var xhr = XHR();
	//open方法 創建一個新的http請求，並指定此請求的方法、URL以及驗證信息(用戶名/密碼)
	xhr.open("get","test.txt",true);
	/*第一個參數是請求方式,一般用get與post方法,與form標簽的method類似
	第二個參數是請求的URL
	第三個參數是請求是同步進行還是異步進行,true表示異步
	調用了open方法僅僅是傳遞了參數而已*/
	xhr.send(null);//調用了send方法后才會發出請求
	//並且get方式發送請求時send參數是null

在服務器環境中執行上面的腳本,並且給一個php或asp腳本發送請求,會發現服務器端腳本其實會被執行

	//PHP腳本
	$fp =fopen("a.txt","wb");
	fwrite($fp,"PHP文件在后台執行了");
	fclose($fp);
	echo "返回內容!";

上面PHP腳本的返回內容不會直接在頁面上顯示出來,必需要用JS通過XHR對象接收

	var xhr = XHR();
	xhr.open("get","test.php",true);
	xhr.onreadystatechange = callback;//在readystatechange事件上綁定一個函數
	//當接收到數據時,會調用readystatechange事件上的事件處理函數
	xhr.send(null);
	functon callback() {
		//在這里面沒有使用this.readyState這是因為IE下面ActiveXObject的特殊性
		if (xhr.readyState == 4) {//readyState表示文檔加載進度,4表示完畢
			alert(xhr.reponseText);//responseText屬性用來取得返回的文本
		}
	}

XHR對象參考

readyState屬性 返回當前請求的狀態

• 0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
• 1 (初始化) 對象已建立，尚未調用send方法
• 2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
• 3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤
• 4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據

	var xhr =XHR();
	alert(xhr.readyState);//0
	xhr.open("get","test.htm",true);
	alert(xhr.readyState);//1
	xhr.send(null);
	alert(xhr.readyState);//IE下會是4,而FF下會是2
	//可以通過readystatechange事件監聽
	xhr = XHR();
	xhr.onreadystatechange = function () {
		alert(xhr.readyState);//FF下會依次是1,2,3,4但最后還會再來個1
		//IE下則是1,1,3,4
	};
	xhr.open("get","test.txt",true);
	xhr.send(null);

從上面可以看到,對於readyState這個屬性,各個瀏覽器看法也不一樣,但其實我們只需要知道當狀態為4的時候可以獲取response就行了!

status 返回當前請求的http狀態碼

status屬性返回當前請求的http狀態碼,此屬性僅當數據發送並接收完畢后才可獲取。完整的HTTP狀態碼如下:

• 100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其余部分
• 101 Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協議
• 200 OK 一切正常，對GET和POST請求的應答文檔跟在后面。
• 201 Created 服務器已經創建了文檔，Location頭給出了它的URL。
• 202 Accepted 已經接受請求，但處理尚未完成。
• 203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因為使用的是文檔的拷貝
• 204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態代碼是很有用的
• 205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容
• 206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它
• 300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果服務器要提出優先選擇，則應該在Location應答頭指明。
• 301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
• 302 Found 類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。
• 303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文檔應該通過GET提取
• 304 Not Modified 客戶端有緩沖的文檔並發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩沖的文檔還可以繼續使用。
• 305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取
• 307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。
• 400 Bad Request 請求出現語法錯誤。
• 401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，然后在填寫合適的Authorization頭后再次發出請求。
• 403 Forbidden 資源不可用。
• 404 Not Found 無法找到指定位置的資源
• 405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。
• 406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容
• 407 Proxy Authentication Required 類似於401，表示客戶必須先經過代理服務器的授權。
• 408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以后重復同一請求。
• 409 Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。
• 410 Gone 所請求的文檔已經不再可用，而且服務器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文檔永久地離開了指定的位置，而404表示由於未知的原因文檔不可用。
• 411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭
• 412 Precondition Failed 請求頭中指定的一些前提條件失敗
• 413 Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。如果服務器認為自己能夠稍后再處理該請求，則應該提供一個Retry-After頭
• 414 Request URI Too Long URI太長
• 416 Requested Range Not Satisfiable 服務器不能滿足客戶在請求中指定的Range頭
• 500 Internal Server Error 服務器遇到了意料不到的情況，不能完成客戶的請求
• 501 Not Implemented 服務器不支持實現請求所需要的功能。例如，客戶發出了一個服務器不支持的PUT請求
• 502 Bad Gateway 服務器作為網關或者代理時，為了完成請求訪問下一個服務器，但該服務器返回了非法的應答
• 503 Service Unavailable 服務器由於維護或者負載過重未能應答。例如，Servlet可能在數據庫連接池已滿的情況下返回503。服務器返回503時可以提供一個Retry-After頭
• 504 Gateway Timeout 由作為代理或網關的服務器使用，表示不能及時地從遠程服務器獲得應答
• 505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本

事實上,我們只需要知道狀態為200的時候(OK)才讀取response就行了!

responseText與responseXML

responseText 將響應信息作為字符串返回 . XMLHTTP嘗試將響應信息解碼為Unicode字符串，XMLHTTP默認將響應數據的編碼定為UTF-8，如果服務器返回的數據帶BOM(byte-order mark)，XMLHTTP可以解碼任何UCS-2 (big or little endian)或者UCS-4 數據。注意，如果服務器返回的是xml文檔，此屬性並不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。

responseXML 將響應信息格式化為Xml Document對象並返回 . 如果響應數據不是有效的XML文檔，此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument對象獲取錯誤信息。

其它一些XHR對象的方法

abort 取消當前請求

getAllResponseHeaders 獲取響應的所有http頭 每個http頭名稱和值用冒號分割，並以\r\n結束。當send方法完成后才可調用該方法。

getResponseHeader 從響應信息中獲取指定的http頭 當send方法成功后才可調用該方法。如果服務器返回的文檔類型為"text/xml", 則這句話xmlhttp.getResponseHeader("Content-Type");將返回字符串"text/xml"。可以使用getAllResponseHeaders方法獲取完整的http頭信息。

setRequestHeader 單獨指定請求的某個http頭 如果已經存在已此名稱命名的http頭，則覆蓋之。此方法必須在open方法后調用。

請求方式

GET 請求

 	//JS
 	var xhr = XHR();
 	xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	xhr.send(null);
 	//PHP
 	print_r($_GET);

POST 請求

 	//JS
 	var xhr = XHR();
 	xhr.open("post","test.php",true);
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			alert(xhr.responseText);
 		}
 	};
 	//比GET請求多了一步
 	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 	//另外,數據是通過send方法發送的
 	xhr.send("qs=true&userName=abc&pwd=123456");
 	//PHP
 	header("Cache-Control: no-cache, must-revalidate");//可以讓瀏覽器不緩存結果
 	print_r($_POST);