XHR——XMLHttpRequest對象

XmlHttp是什麼？

最通用的定義爲：XmlHttp是一套能夠在Javascript、VbScript、Jscript等腳本語言中經過http協議傳送或從接收XML及其餘數據的一套API。XmlHttp最大的用處是能夠更新網頁的部份內容而不須要刷新整個頁面。
來自MSDN的解釋：XmlHttp提供客戶端同http服務器通信的協議。客戶端能夠經過XmlHttp對象(MSXML2.XMLHTTP.3.0) 向http服務器發送請求並使用微軟XML文檔對象模型Microsoft? XML Document Object Model (DOM)處理迴應。

如今的絕對多數瀏覽器都增長了對XmlHttp的支持，IE中使用ActiveXObject方式建立XmlHttp對象，其餘瀏覽器如：Firefox、Opera等經過window.XMLHttpRequest來建立xmlhttp對象。

XmlHttp對象參考：

屬性：

onreadystatechange*	指定當readyState屬性改變時的事件處理句柄。只寫
readyState	返回當前請求的狀態，只讀.
responseBody	將回應信息正文以unsigned byte數組形式返回.只讀
responseStream	以Ado Stream對象的形式返回響應信息。只讀
responseText	將響應信息做爲字符串返回.只讀
responseXML	將響應信息格式化爲Xml Document對象並返回，只讀
status	返回當前請求的http狀態碼.只讀
statusText	返回當前請求的響應行狀態，只讀

* 表示此屬性是W3C文檔對象模型的擴展.

方法：

abort	取消當前請求
getAllResponseHeaders	獲取響應的全部http頭
getResponseHeader	從響應信息中獲取指定的http頭
open	建立一個新的http請求，並指定此請求的方法、URL以及驗證信息(用戶名/密碼)
send	發送請求到http服務器並接收回應
setRequestHeader	單獨指定請求的某個http頭

建立XMLHttpRequest對象

建立XMLHttpRequest對象
對於Ajax，最核心的一個對象是XMLHttpRequest，全部的Ajax操做都離不開對這個對象的操做
xmlHttp = new XMLHttpRequest();

三、XMLHttpRequest對象相關方法
XMLHttpRequest.open(傳遞方式,地址,是否異步請求)
XMLHttpRequest.onreadystatechange
XMLHttpRequest.responseText(xhr.send(null))

與以前衆多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);


@font-face { font-family: "Times New Roman"; }@font-face { font-family: "宋體"; }p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: "Times New Roman"; font-size: 10.5pt; }h3 { margin-top: 13pt; margin-bottom: 13pt; page-break-after: avoid; text-align: justify; line-height: 172%; font-family: "Times New Roman"; font-weight: bold; font-size: 16pt; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { page: Section0; }

同步（flase）異步(true)原理

1、同步原理（flase）:使用回調函數時，回調函數會插入執行隊列，執行對列得等回調函數執行完纔會依次往下執行（造成堵塞）

 

2、異步原理（true）:使用回調函數時，回調函數會插入執行隊列，執行對列不會等回調函數執行才執行，而是一直往下執行。而回調函數則會跑到執行隊列的最前面。（不造成堵塞）

 

3、狀態值(state :0.1.2.3.4.)

 

 

例子：

 

 

 

 

 

 

 

 

4、異步原理例子：（不堵塞代碼執行）

 

 

5、同步原理：（堵塞代碼執行）