1. 程式人生 > >XMLHttpRequest對象

XMLHttpRequest對象

改變 client 例如 rip 速度 不同 普通 change 對象初始化

1.XMLHttpRequest對象   

(1)XMLHttpRequest是XMLHTTP組件的對象,通過這個對象。AJAX能夠像桌面應用程序一樣僅僅同server進行數據層面的交換。而不用每次都刷新界面,也不用每次將數據處理的工作都交給server來做;這樣既減輕了server負擔又加快了響應速度、縮短了用戶等待的時間。

(2)XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的。非W3C標準。
創建XMLHttpRequest對象(因為非標準所以實現方法不統一)
Internet Explorer把XMLHttpRequest實現為一個ActiveX對象
其它瀏覽器(Firefox、Safari、Opera…)把它實現為一個本地的JavaScript對象。

XMLHttpRequest在不同瀏覽器上的實現是兼容的,所以能夠用相同的方式訪問XMLHttpRequest實例的屬性和方法,而不論這個實例創建的方法是什麽。

2.XMLHttpRequest對象初始化

	function createXHR() {
		var xmlHttp;
		try {
			// Firefox, Opera 8.0+, Safari瀏覽器
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			// IE瀏覽器
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("您的瀏覽器不支持AJAX!");
					return false;
				}
			}
		}
	}
3.XMLHttpRequest對象方法

技術分享

4.XMLHttpRequest對象屬性

技術分享

5.onreadystatechange對象屬性:
該事件處理函數由server觸發,而不是用戶
在 Ajax 運行過程中,server會通知client當前的通信狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是server對client連接操作的一種方式。


每次 readyState 屬性的改變都會觸發 readystatechange事件

xmlHttp.onreadystatechange=function()
  {
  // 我們須要在這裏寫一些代碼
  }

6.readystate屬性:

狀態 描寫敘述
0 請求未初始化(在調用 open() 之前)
1 請求已提出(調用 send() 之前)
2 請求已發送(這裏通常能夠從響應得到內容頭部)
3 請求處理中(響應中通常有部分數據可用。可是server還沒有完畢響應)
4 請求已完畢(能夠訪問server響應並使用它)
繪圖理解各種狀態:

技術分享

7.open(method, url, asynch)方法
XMLHttpRequest 對象的 open 方法同意程序猿用一個Ajax調用向server發送請求。
method:請求類型。類似 “GET”或”POST”的字符串。若僅僅想從server檢索一個文件,而不須要發送不論什麽數據,使用GET(能夠在GET請求裏通過附加在URL上的查詢字符串來發送數據,只是數據限制大小為2000個字符)。

若須要向server發送數據,用POST。


在某些情況下,有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。

假設對每一個請求的響應不同,這就會帶來不好的結果。把當前時間戳追加到URL的最後。就能確保URL的惟一性,從而避免瀏覽器緩存結果。

var url = "/FirstAjax/CityServlet?

time="+new Date().getTime()+"&province="+province
url:路徑字符串,指向你所請求的server上的那個文件。能夠是絕對路徑或相對路徑。
asynch:表示請求是否要異步傳輸。默認值為true(異步)。指定true,在讀取後面的腳本之前,不須要等待server的對應。指定false,當腳本處理過程經過這點時,會停下來,一直等到Ajax請求運行完成再繼續運行。

8.send(data)方法:
open 方法定義了 Ajax 請求的一些細節。

send 方法可為已經待命的請求發送指令
data:將要傳遞給server的字符串。
若選用的是 GET 請求,則不會發送不論什麽數據, 給 send 方法傳遞 null 就可以:request.send(null);假設傳值的話。server也收不到。
當向send()方法提供參數時,要確保open()中指定的方法是POST,假設沒有數據作為請求體的一部分發送,則使用null.

9.setRequestHeader(header,value)方法:

當瀏覽器向server請求頁面時,它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描寫敘述請求的元數據(metadata)。首部信息用來聲明一個請求是 GET 還是 POST。
Ajax 請求中。發送首部信息的工作能夠由 setRequestHeader完畢
參數header: 首部的名字; 參數value:首部的值。
假設用 POST 請求向server發送數據,須要將 “Content-type” 的首部設置為 “application/x-www-form-urlencoded”.它會告知server正在發送數據,而且數據已經符合URL編碼了。
該方法必須在open()之後才幹調用
完整的 Ajax 的 POST 請求演示樣例:

//準備以POST方式發送請求
xhr.open("post","/FirstAjax/PostServlet?

time="+new Date().getTime());
//設置請求頭,僅僅有是POST方式下,才設置該請求頭
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//真正發送請求
xhr.send("username="+username);

10.接收方法和屬性

用 XMLHttpRequest 的方法可向server發送請求。

在 Ajax 處理過程中,XMLHttpRequest 的例如以下屬性可被server更改:
readyState
status
responseText
responseXML

(1).readyState

readyState 屬性表示Ajax請求的當前狀態。

它的值用數字代表(前面的表格中的[0-4]數值)

每次 readyState 值的改變,都會觸發 readystatechange 事件。假設把 onreadystatechange 事件處理函數賦給一個函數。那麽每次 readyState 值的改變都會引發該函數的運行。
readyState 值的變化會因瀏覽器的不同而有所差異。可是,當請求結束的時候,每一個瀏覽器都會把 readyState 的值統一設為 4

(2)status
server發送的每個響應也都帶有首部信息。三位數的狀態碼是server發送的響應中最重要的首部信息,而且屬於超文本傳輸協議中的一部分。
經常使用狀態碼及其含義:
404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部server出錯(internal service error)
200 一切正常(ok)
304 沒有被改動(not modified)(server返回304狀態。表示源文件沒有被改動 )
在 XMLHttpRequest 對象中。server發送的狀態碼都保存在 status 屬性裏。

通過把這個值和 200 或 304 比較,能夠確保server是否已發送了一個成功的響應

(3) responseText
XMLHttpRequest 的 responseText 屬性包括了從server發送的數據.它是一個HTML,XML或普通文本。這取決於server發送的內容。(將傳回的信息當字符串使用
當 readyState 屬性值變成 4 時, responseText 屬性才可用。表明 Ajax 請求已經結束。

(4)responseXML(將傳回的信息當XML文檔使用。能夠用DOM處理。


假設server返回的是 XML, 那麽數據將儲存在 responseXML 屬性中。
僅僅用server發送了帶有正確首部信息的數據時, responseXML 屬性才是可用的。

MIME 類型必須為 text/xml

11.AJAX開發步驟及具體解釋
(1)創建ajax_1.html或ajax_1.jsp
(2)加入事件
(3)在事件響應後創建Ajax引擎對象
(4)異步發送請求
(5)將響應結果放入Ajax引擎對象中
(6)從Ajax引擎對象中取得響應結果
(7)使用DOM和JS將響應結果動態加入到Html或Jsp面頁中
(8)對於POST請求,一定要設置請求頭,代碼例如以下:
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
在open()之後。在send()之前
對於GET請求,無需設置請求頭

XMLHttpRequest對象