Ajax核心對象——XMLHttpRequest對象


XMLHttpRequest對象在Ajax中占據着十分重要的地位,因為通常意義上的和服務器進行交互是通過提交表單的形式,而在Ajax中的客戶端通過XMLHttpRequest對象實現與服務器的通信。也就是說正是因為XMLHttpRequest才使得Ajax得以實現,於是我們的與服務器的交互速度明顯提升,消除了令人頭疼的等待之后用戶體驗便也更加良好。

名字由來:

XMLHttpRequest之所以叫這個名字是因為它與服務器通信得過稱中利用XMLHttpposthead或者get方式)請求(Request)的過程,然后通過XMLXML是常用格式,並不限於和XML 文檔,可以接收任何形式的文本文檔)的形式將服務器的返回結果發送到客戶端進行解析。上面的話翻譯成英文就是:the object send request in order to get the XML by XMLHttp method.(你說外國人編程能不好么,人家寫代碼就跟說話一樣,丫的!)

其實XMLHttpRequest對象也不是一個新技術,這個對象最早出現在微軟的IE瀏覽器中,是以ActiveX組件的形式出現的,況且也不是W3C的標准,所以在當時並沒有引起開發人員太大的注意。自從Google推出Google MapGoogle Suggest產品以后,Ajax技術以飛快的速度發展起來,而XMLHttpRequest對象又是Ajax的重要組成部分,所以XMLHttpRequest對象也開始重新受到重視。到目前為止XMLHttpRequest依舊不是W3C的標准,所以一個有趣的現象就是常用的各種瀏覽器提供對XMLHttpRequest對象支持,但是在各種瀏覽器中,XMLHttpRequest對象的創建方法稍有不同,更加奇怪的是創建成功之后,在使用方法上是沒有任何區別的。也就是說這個對象已經成為事實意義上的標准,只是標准還不是很完善罷了。

創建XMLHttpRequest

function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		//Mozilla瀏覽器
		XMLHttpReq=new XMLHttpRequest();
	}else{
		//IE瀏覽器
		if(window.ActiveXObject){
			try{
				XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
			}catch(e){
				try{
					XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
			}
		}
	}
}

在上面這個JavaScript函數中,實現的功能是創建一個XMLHttpRequest對象,其中windowXMLHttpRequest可以判斷瀏覽器是否通過JavaScript本地方法支持XMLHttpRequest對象,如果是通過JavaScript本地方法支持XMLHttpRequest對象,就可以用第5行代碼的方法創建這個對象,這就是除IE瀏覽器外其他瀏覽器中創建XMLHttpRequest對象的方法。

windowActiveXObject可以判斷瀏覽器是否支持ActiveX,在IE瀏覽器中是通過ActiveX組件支持XMLHttpRequest對象,如果瀏覽器支持ActiveX,就可以使用下面的方法創建XMLHttpRequest對象,這就是在IE瀏覽器中創建XMLHttpRequest對象的方法。

總之,這里提供的XMLHttpRequest對象的創建方法解決了不同瀏覽器的差異,而且也處理了不同版本IE瀏覽器之間的差別,所以可以作為創建XMLHttpRequest對象的通用方法。無論讀者使用哪種瀏覽器都可以在自己的程序中使用上面的代碼創建XMLHttpRequest對象。

XMLHttpRequest常用的方法:

XMLHttpRequest對象創建之后,就可以對這個對象進行各種不同的操作,從而完成和服務器的通信,接下來介紹XMLHttpRequest對象常用的方法。

open(Method, URL, Asynchronous, UserName, Password )方法可以建立對服務器的調用,這個方法有五個參數,前兩個參數是必須的,其中method可以是GET或者POSTurl是指所要訪問的服務器資源的位置,Asynchronous是指異步訪問服務器還是同步訪問,默認是異步訪問,異步訪問正是Ajax的優勢所在。使用最后兩個參數可以使用指定的用戶名和密碼訪問服務器資源。

send( Data)這個方法可以向服務器發送請求,這個方法中的參數回座位請求中的內容發送到服務器。

小結:常用的方法就兩個,一個open一個send,類比數據庫的知識,想要和服務器進行交互,首先要打開連接,然后發送請求。

XMLHttpRequest常用屬性

readyState這個屬性,每個狀態的改變都會調用事件處理器,使用這個屬性可以監聽XMLHttpRequest的狀態。狀態可以取下面的5個值:0(為初始化)、1(正在加載)、2(已加載)、3(交互中)、4(已完成)。

onreadystatechange屬性,比較標准的叫法應該叫The onreadystatechange event listener。是一個監聽器,每個狀態的改變都會調用這個事件處理器,使用這個屬性可以監聽狀態的變化,並提供對應的處理方法(有些地方叫回調函數)。

status屬性描述了服務器的狀態碼,可以是200也可以是404

statusText描述了HTTP狀態碼對應的文本,例如200對應OK404對應Not Found等。

responseText是服務器以文本字符串返回的響應

responseXML是服務器以XML格式返回的響應,以XML返回的好處是可以方便的解析返回的內容。

小結:交互必是兩個以上的對象,所以雙方的狀態都需要考慮(readyStatestatusstatusText),而判斷雙方是否准備好需要一個觸發事件(onreadystatechange),當雙方都准備好之后就開始進行傳輸(responseTextresponseXML)。

總結:

創造的好處是明顯的,但是成本也是令人望而生畏的,與此相比,利用已有的資源通過改變思想,然后去解決新的問題就顯得更加高明。換句話說,思想上的創造比具體事物上的創造更加具有顛覆作用。SB英語學習中的走遍美國、EAI當中對已有系統的整合都和XMLHttpRequestAjax當中的應用有異曲同工之妙,思想上的創造才是真正的創造。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM