解析ajax核心XMLHTTPRequest對象的創建與瀏覽器的兼容問題

MLHttpRequest 對象是AJAX功能的核心,要開發AJAX程序必須從瞭解XMLHttpRequest 對象開始。

  瞭解XMLHttpRequest 對象就先從創建XMLHttpRequest 對象開始,在不同的瀏覽器中創建XMLHttpRequest 對象使用不同的方法:

  先看看IE創建XMLHttpRequest 對象的方法(方法1):

  var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//較新的IE版本創建Msxml12.XMLHTTP對象

  var xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//較老的IE版本創建Microsoft.XMLHTTP對象

  而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法(方法2)創建XMLHttpRequest 對象:

  var xmlhttp=new XMLHttpRequest();

  注意實際上Internet Explorer 使用了一個名爲 XMLHttp 的對象,而不是 XMLHttpRequest 對象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是後者(下文統稱 XMLHttpRequest 對象)。IE7開始也開始使用XMLHttpRequest 對象了。

  因此我們需要創建一個能兼容多瀏覽器的XMLHTTPRequest對象:

function CreateXMLHttp(){
		 //創建一個新變量並賦值false,使用false作爲判斷條件說明還沒有創建XMLHTTPRequest對象 
		 var flag=true;
		 
		 var xmlhttp = null;
		 try{
			 //嘗試創建 XMLHttpRequest 對象,除 IE 外的瀏覽器都支持這個方法。
			 xmlhttp=new XMLHttpRequest();
		 }catch(e){
			 try{
				 //使用較新版本的 IE 創建 IE 兼容的對象(Msxml2.XMLHTTP)。
				 xmlhttp=ActiveXobject("Msxml12.XMLHTTP");
			 }catch(e1){
				 try{
					 //使用較老版本的 IE 創建 IE 兼容的對象(Microsoft.XMLHTTP)。
					 xmlhttp=ActiveXobject("Microsoft.XMLHTTP");
				 }catch(e2){
					 flag=false; 
				 } 
			 }
		 }
		
		//判斷是否成功的例子:
		 if(!flag){
			 throw new RuntimeExecption("創建XMLHTTPRequest 對象失敗");
		 }else{
			 return xmlhttp;
		 }
	 }


  //這個是除了IE之外的瀏覽器創建XMLHttpRequest對象

  var xmlhttp=new XMLHttpRequest();

  創建xmlhttp成功後,然後再來看看它的一些屬性和方法吧,還有最重要的onreadystatechange事件句柄

  方法:

  open() 初始化http請求參數,包括URL和http方法,但是不發送請求;

  abort() 取消當前響應,關閉連接並斷開所有網絡未結束的活動;

  getAllResponseHeaders() 把http響應頭部作爲未解析字符串返回;

  getResponseHeaders) 返回指定的http響應頭的值;

  send() 發送http請求使用傳遞給open()方法的參數,以及傳個該方法的可選請求體;

  setResponseHeader() 向一個打開但沒有發送的請求設置或添加一個Http請求。

  屬性:

  readyState 說明http請求的狀態;(有5個狀態分別是

  0 表示沒有初始化;

  1 表示讀取中

  2 表示已讀取

  3 交互中(接受中)

  4 完成

  )

  responseText 說明爲服務器接收到得響應體,如果沒有接收到數據就返回空字符串;

  responseXML 說明對請求的迴應 解析爲XML並用document對象返回;

  status 說明http請求的狀態;

  statusText 說明http請求狀態不是以數字形式而是用名稱;

  onreadystatechange 是readySate狀態改變時調用事件的函數。

  下面是一個發送請求數據並返回結果的xmlhttpRequest對象;

  生成一個XMLHTTPRequest對象

 var xmlhttp=CreatXMLHttp();
 xmlhttp.open("get","",true);
 xmlhttp.onReadyStateChange=getresult;
//怎麼告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢用到二種方法:一種是匿名方法xmlhttp.onReadyStateChange=function(){處理變化的代碼}
另一種方法:指定方法:xmlhttp.onReadyStateChange=getresult;
    function getresult(){處理變化的代碼}
 xmlhttp.send();
 function getresult(){
 if(xmlhttp.readyState==4){ //當readyState的狀態等於4時表示接收到數據
 if(xmlhttp.status==200){ //這個時候就需要用到status屬性,即由服務器返回的 HTTP 狀態代碼。 xmlhttp.status 等於200時表示傳輸過程完整沒有錯誤
 alert(xmlhttp.responseText);
}
}
 }

  注意:所以我們應該按照上面的流程來記憶:創建XMLHttpRequest 對象 -> 指定發送地址及發送方法 -> 指定狀態變化處理方法 -> 發送請求請求發送後狀態變化了就會自動調用指定的處理方法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章