ajax核心技術的簡練總結——XMLHttpRequestd

一、XMLHttpRequest對象

1.XMLHttpRequest對象的屬性

1>readyState屬性——描述將請求發到服務器經歷的幾個狀態

0：未初始化XMLHttpRequest對象

1：“發送”，已調用XMLHttpRequest的open()方法，準備發送

2：“發送”，用send()方法發送請求，沒有響應

3：“正在接收”

4：”已加載“

2>responseText屬性

包含客戶端接收到的文本內容，readyState == 4時responseText才包含完整的文本響應。

3>responseXML屬性

也是客戶端接收到的回覆信息（響應），只不過格式是XML

4>Status屬性

描述Http的狀態代碼

5>statusText屬性

描述Http的狀態代碼文本信息

2.XMLHttpRequest對象的方法

1>abort()暫停Http請求，把XMLHttpRequest對象還原到沒初始化的狀態

2>open(method, url, bool, username, userpassword)初始化XMLHttpRequest對象

method: 必有參數，傳送方法如POST、GET

url:必選參數，目標地址

bool:是否異步請求（true），同步（false）

username/password:可選參數，當服務器要驗證用戶名和密碼時使用

3>send()向服務器發送具體請求，readyState == 1時纔可以調用，調用後，readyState == 2

XMLHttp_Object.send(content);

4>setRequestHeader()，一般在send()方法之前調用，

XMLHttp_Object.setRequestHeader(string head, string value)

head :Http頭名稱

value:Http頭的值

5>getResponseHeader(string header)，返回指定header的值，readyState == 3/4纔可調用

6>getAllResponseHeader()，以一個字符串的形式返回所有header的值

二、發送請求

1.GET請求

實現步驟：

1>創建XMLHttpRequest對象

try
	{
		var xmlhttp = new XMLHttpRequest();
	}
	catch(e)
	{
		var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');//當瀏覽器是IE時
	}

2>設置服務器地址,用“？”指定請求中所需傳遞參數，第一個“？”隔開，其餘用“&”隔開

eg:

var url = “ http://127.0.0.1/sample/server.aspx?name="+escape(name) + "&psw=" + escape(psw);

3>打開請求

xmlhttp.open('GET',url,true);

4>發送請求

xmlhttp.send();

2.POST請求

實現步驟：

1>創建XMLHttpRequest對象

2>設置服務器地址

3>打開請求

4>設置Http頭部信息

兩種：application/x-www-form-urlencoded和multipart/form-data

eg：XMLHttp_Object.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

5>發送請求

三、處理響應（處理服務器的回覆信息）

1.調用響應函數

XMLHttp_Object.onreadystatechange = ResponseReq;//當readyState值變化時該語句起作用，該代碼放於send()前

2.根據處理狀態採取措施

function ResponseReq()
{
	if (XMLHttp_Object.readyState == 4)
	{
		//處理信息
	}
}

3.返回狀態碼

處理完響應後無論成功失敗都會返回一個狀態碼，表示服務器處理請求的結果

if(XMLHttp_Object.status == 200)
		{
			//處理信息
		}
		else{
			alert("error:返回碼：" + XMLHttp_Object.status)
		}

1>響應爲文本

var str = XMLHttp_Object.responseText;
document.getElementById('test').innerHTML = str;

2>響應爲XML

（1）識別XML的根節點

<span style="font-size:14px;">var root = XMLHttp_Object.responseXML.documentElement;</span>

（2）獲取XML響應信息中的值：

根據獲取到的根節點和getElementByTagName等方法獲取根節點中子節點的值

（3）使用響應信息中的值：

類似響應爲文本，將值反饋給客戶端