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