[Ajax-相濡以沫,不如相忘於江湖] Ajax核心: XMLHttpRequest對象

時間 2019-11-11

標籤 ajax 相濡以沫不如江湖核心 xmlhttprequest 對象欄目 Ajax 简体版

原文原文鏈接

Ajax應用工做模式/過程:
javascript

第一步，初始化XMLHttpRequest對象;
html

第二步，打開與服務器的鏈接。打開鏈接時，指定發送請求的方法: 採用GET或POST; 指定是否採用異步方式;
java

第三部，設置監聽XMLHttpRequest狀態改變的事件處理函數;
瀏覽器

第四部，發送請求。如採用POST方式發送請求，可發送帶參數的請求。
緩存

下面給出一個示例: 級聯菜單。頁面中兩個下拉框，選擇或改變下拉框1的值將影響下拉框2中所加載的值。服務器

<!DOCTYPE html>
<html>
<head>
	<title>XMLHttpRequest -- Test</title>
</head>
<body>
	<select name="first" id="first" onchange="change(this.value);">
		<option value="1">中國</option>
		<option value="2">美國</option>
		<option value="3">日本</option>
	</select>
	<select name="second" id="second"></select>
	<div id="output"></div>

	<script type="text/javascript">
		// 定義XMLHttpRequest對象
		var xmlrequest;
		// 初始化XMLHttpRequest對象
		function createXMLHttpRequest() {
			if (window.XMLHttpRequest) {
				xmlrequest = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				try {
					xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
					}
				}
			}
		}

		function change(id) {
			// 初始化XMLHttpRequest對象
			createXMLHttpRequest();
			// 設置請求相應的URL
			var uri = "second.jsp?id=" + id;
			// 打開與服務器響應地址的鏈接
			xmlrequest.open("POST", uri, true);
			// 設置請求頭
			xmlrequest.setRequestHeader("Content-Type", "application/x-www.form-urlencoded");
			// 設置處理相應的回調函數
			xmlrequest.onreadystatechange = processResponse;
			// 發送請求
			xmlrequest.send(null);
		}

		// 定義處理響應的回調函數
		function processResponse() {
			// 響應完成且響應正常
			if (xmlrequest.readyState == 4) {
				if (xmlrequest.status == 200) {
					var cities = xmlrequest.responseText.split('$');
					var displaySelect = document.getElementById("second");
					displaySelect.innerHTML = null;
					
					for (var i=0; i<cities.length; i++) {
						var opt = document.createElement("option");
						opt.innerHTML = cities[i];
						displaySelect.appendChild(opt);
					}
					// 信息已經成功返回，開始處理信息
					//var headers = xmlrequest.getAllResponseHeaders();
					// 經過警告框輸出響應頭
					//alert("響應頭類型: " + typeof headers + "\n" + headers);
					// 在頁面輸出全部響應頭
					//document.getElementById("output").innerHTML = headers;
				}
			} else {
				// 頁面不正常
				//window.alert("狀態信息: " + xmlrequest.readyState + " -- 服務器響應狀態信息: " + xmlrequest.status + "-- 服務器狀態信息描述: " + xmlrequest.statusText + "-- 請求頁面有異常!");
			}
		}
	</script>
</body>
</html>

XMLHttpRequest對象定義:
app

XMLHttpRequest是一套能夠在JavaScript、VBScript、JScript等腳本語言中使用的API，它經過HTTP協議異步地向服務器發送請求，獲取服務器返回的響應。XMLHttpRequest的用處是: 提供與服務器異步通訊的能力。
異步

XMLHttpRequest的方法和屬性:jsp

XMLHttpRequest包含了一些基本的屬性和方法，XMLHttpRequest正是經過這些屬性和方法與服務器通訊的。
async

XMLHttpRequest的方法:

XMLHttpRequest對象的方法並很少，如下是其基本方法:

abort(): 中止發送當前對象。
getAllResponseHeaders(): 獲取服務器返回的所有響應頭。
getResponseHeader("headerLabel"): 根據響應頭的名字，獲取對應的響應頭。
open("method", "URL"[,asyncFlag[,"userName"[,"password"]]]): 創建與服務器URL的鏈接，並設置請求的方法，以及是否使用異步請求。若是遠程服務須要使用用戶名、密碼，則提供對應的信息。
send(content): 發送請求。其中content是請求參數。
setRequestHeader("label", "value"): 在發送請求以前，先設置請求頭。

XMLHttpRequest的屬性:

onreadystatechange: 該屬性用於指定XMLHttpRequest對象狀態改變時的事件處理函數。
readyState: 該屬性用於獲取XMLHttpRequest對象的處理狀態。
responseText: 該屬性用於獲取服務器的響應文本。
responseXML: 該屬性用於獲取服務器相應的XML文檔對象。
status: 該屬性是服務器返回的狀態嗎，只有服務器的響應已經完成時，纔會有該狀態碼。
statusText: 該屬性是服務器返回的狀態文本信息，只有當服務器的響應已經完成時，纔會有該狀態文本信息。

屬性詳解:

onreadystatechange:

onreadystatechange屬性用於指定XMLHttpRequest對象的狀態改變函數。當XMLHttpRequest對象的狀態改變時，該函數將被觸發。onreadystatechange屬性的做用與按鈕對象的onclick屬性同樣，都是事件處理屬性。也就是說，XMLHttpRuquest對象是事件源，它能夠引起readystatechange事件。當程序講一個函數引用賦給XMLHttpRequest對象的onreadystatechange屬性後，該函數即成爲XMLHttpRequest對象的事件處理器。每次XMLHttpRequest發生readystatechange事件，都會觸發監聽該事件的事件處理器。

readyState:

XMLHttpRequest對象有以下幾種狀態，這些狀態可經過readyState屬性得到:

0：XMLHttpRequest對象尚未完成初始化
1：XMLHttpRequest對象開始發送請求
2：XMLHttpRequest對象的請求發送完成
3：XMLHttpRequest對象開始讀取服務器的響應
4：XMLHttpRequest對象讀取服務器響應結束

XMLHttpRequest對象的這幾種狀態信息可經過readyState屬性讀取。每當XMLHttpRequest對象的readyState屬性改變時，其onreadystatechange屬性指定的方法都會被觸發。

status和statusText:

服務器的響應完成後(readyState=4)，依然不能直接獲取服務器響應。由於服務器響應也有不少種狀況。爲了判斷服務器的響應是否正確，能夠檢測XMLHttpRequest的status或statusText屬性。當服務器的響應正常時，JavaScript才應該讀取服務器響應信息，並將響應信息動態加載到目標頁面。

服務器經常使用的狀態碼及其對應的含義以下:

200：服務器響應正常
304：該資源在上次請求以後沒有任何修改。這一般用於瀏覽器的緩存機制，使用GET請求時尤爲須要注意
400：沒法找到請求的資源
401：訪問資源的權限不夠
403：沒有權限訪問資源
404：須要訪問的資源不存在
405：須要訪問的資源被禁止
407：訪問的資源須要代理身份驗證
414：請求的URL太長
500：服務器內部錯誤

若是想經過JavaScript獲取服務器響應，必須先判斷服務器響應是否完成。要判斷服務器的響應是否完成，只需判斷XMLHttpRequest對象的readyState屬性便可，當readyState值爲4，表明響應完成；服務器響應完成後，還應判斷服務器響應是否正確，要判斷服務器響應是否正確，可經過判斷XMLHttpRequest對象的status屬性進行。當status值爲200時，服務器響應正確，不然響應不正常。

發送請求:

發送GET請求:

一般狀況下，GET請求用於從服務器上獲取數據，POST請求用於向服務器發送數據。GET請求將全部請求參數轉換成一個查詢字符串，並將該字符串添加到請求的URL以後，於是可在請求的URL後看到請求參數名、請求參數值。若是將某個表單的action屬性設置爲GET，則請求會將表單中個字段的名和值轉換爲字符串，並附加到URL以後。

GET 和 POST異同:

GET請求傳送的數據量較小，通常不能大於2KB。POST傳送的數據量較大，一般認爲POST請求參數的大小不受限制，但每每取決於服務器的限制。一般來講，POST請求的數據量總比GET請求的數據量大。
POST請求則經過HTTP POST機制，將請求的參數以及對應的值放在HTML Header中傳輸，用戶看不到明碼的請求參數值。

當使用Ajax發送異步請求時，建議使用POST請求，而不是GET請求。發送GET請求需注意以下兩點: