ajax中XMLHttpRequest參數詳解

 XJAX ,並不是一種新[url=javascript:;]技術[/url]的誕生.它實際上代表的是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用.
它包括:
使用XHTML和[url=javascript:;]CSS[/url]標準化呈現;
使用DOM實現動態顯示和交互;
使用[url=javascript:;]XML[/url]和XSLT進行數據交換與處理;
使用XMLHttpRequest進行異步數據讀取;
最後用JavaScript綁定和處理所有數據。
在這裏我只向談點XMLHttpRequest對象:
在上面看到,使用XMLHttpRequest進行異步數據讀取;
首先,我們要創建該[url=javascript:;]對象[/url],針對不同的瀏覽器,該對象的創建[url=javascript:;]方法[/url]是有區別.
[url=javascript:;]Internet[/url] Explorer以ActiveX對象引入,被稱爲XMLHTTP.
對於Internet Explorer瀏覽器,創建XMLHttpRequest 方法如下:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致,爲了更好的兼容不同版本的Internet Explorer瀏覽器,因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類,上面[url=javascript:;]代碼[/url]就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。
對於Mozilla?Netscape?Safari等瀏覽器,創建XMLHttpRequest 方法如下:
xmlhttp_request = new XMLHttpRequest();
  如果服務器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常[url=javascript:;]工作[/url]。 爲了解決這個問題,如果服務器響應的header不是text/xml,可以調用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在實際應用中,爲了兼容多種不同版本的瀏覽器,一般將創建XMLHttpRequest類的方法寫成如下形式:

try{
 if( window.ActiveXObject ){
  for( var i = 5; i; i-- ){
   try{
    if( i == 2 ){
     xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
    }else{
     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
    }
   xmlhttp_request.setRequestHeader("Content-Type","text/xml");
   xmlhttp_request.setRequestHeader("Content-Type","gb2312");
   break;
  }
  catch(e){
   xmlhttp_request = false;
  }
 }
}else if( window.XMLHttpRequest ){
 xmlhttp_request = new XMLHttpRequest();
 if (xmlhttp_request.overrideMimeType) {
  xmlhttp_request.overrideMimeType('text/xml');
 }
}
}catch(e){ xmlhttp_request = false; }

在定義瞭如何處理響應後,就要發送請求了。可以調用HTTP請求類的open()和send()方法,如下所示:
xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
open()的第一個參數是HTTP請求方式?GET,POST或任何服務器所支持的您想調用的方式。 按照HTTP規範,該參數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數是請求頁面的URL。
  第三個參數設置請求是否爲異步模式。如果是TRUE,JavaScript函數將繼續執行,而不等待服務器響應。這就是"[url=javascript:;]AJAX[/url]/"中的"A"。
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求後,接下來要決定當收到服務器的響應後,需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置爲要使用的JavaScript的函數名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創建的函數名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript代碼創建在onreadystatechange之後,例如:
xmlhttp_request.onreadystatechange = function(){
 // JavaScript代碼段
};
在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了,函數纔可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
  readyState的取值如下:
   0 (未初始化)
   1 (正在裝載)
   2 (裝載完畢)
   3 (交互中)
   4 (完成)

  所以只有當readyState=4時,一個完整的服務器響應已經收到了,函數纔可以處理該響應。具體代碼如下:
if (http_request.readyState == 4) {
 // 收到完整的服務器響應
} else {
 // 沒有收到完整的服務器響應
}
 當readyState=4時,一個完整的服務器響應已經收到了,接着,函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值爲200時,表示狀態正常。
  在檢查完請求的狀態值和響應的HTTP狀態值後,就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據:(1) 以文本字符串的方式返回服務器的響應.
2006/01/19 XMLHttpRequest詳解
/*
*author Jouy.lu
*/
var xmlHttp; //首先定義一個全局域變量來保存對象的引用;
function createXMLHttpRequest(){ //該方法用來創建XMLHttpRequest對象的實例.
if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
}
}
考慮到兼容瀏覽器的問題:建議的寫法如下:
var xmlhttp;
function createXmlhttp(){
if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
  if (xmlhttp.overrideMimeType){
  xmlhttp.overrideMimeType("text/xml");
  }
 
}
else if(window.ActiveXObject){
  try{
  xmlhttp = new  ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
}
if(!xmlhttp){
  window.alert("Your broswer not support XMLHttpRequest!");
}
return xmlhttp;
}
/************************************XMLHttpRequest的標準操作*********************
abort():終止當前請求;
getAllResponseHeaders():把HTTP所以響應首部作爲鍵/值對返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立對服務器的調用,url參數可以是相對URL或絕對URL,該方法還包含了另三個可選參數;
send(content);向服務器發送請求;
setRequestHeader("header","value");把指定首部設置爲所提供的值。在設置任何首部之前必須先調用open()。
注:
  void open(string method, string url, boolean asynch, string username, string password):這個方法會建立對服務器的調用。
要提供調用的特定方法(GET、POST或PUT),還要提供所調用資源的URL。另外還可以傳遞一個Boolean值,指示這個調用是異步還是同步的, 默認值爲true,這表示請求本質上是異步的。如果這個參數爲false,處理就會等待,直到從服務器返回響應爲止。由於異步調用是使用Ajax 的主要優點之一,所以倘若將這個參數設置爲false,從某種程度上講與使用XMLHttpRequest對象的初衷不太相符。在某些情況下這,個參數 設置爲false也是有用的,比如在持久存儲頁面之前你可能想先驗證用戶的輸入。最後兩個參數不說自明,允許你指定一個特定的用戶名和口令。
  void send(content):這個方法具體向服務器發出請求。如果請求聲明爲異步的,這個方法就會立即返回,否則它會等待,直到接收到響應 爲止。參數是可選的,可以是一個DOM對象的實例、一個輸入流,或者是一個串。傳入這個對象的內容會作爲請求體的一部分發送。
  void setRequestHeader(string header, string value):這個方法爲HTTP請求中一個給定的首部設置值。它有兩個參數,第一個串表 示要設置的首部,第二個串表示要在首部中放置的值。需要說明,這個方法必須在open()之後才能調用。在所有這些方法中,最有可能用到 的就是open()和send()。XMLHttpRequest對象還有許多屬性,在設計Ajax交互時這些屬性非常有用。
  void abort(): 顧名思義,這個方法就是要停止請求。
  string getAllResponseHeaders(): 這個方法的核心功能對Web應用開發人員應該很熟悉了,它會返回一個串,其中包含HTTP請求的所有響 應首部。首部包括Content-Length、Date和URI。
  string getResponseHeader(string header):這個方法與getAllResponseHeaders()是對應的,不過它有一個參數來表示你希望得到哪一個  首部值,並且會把這個值作爲一個串返回。
******************************/
/***************標準XMLHttpRequest屬性******************
onreadystatechange:每個狀態改變時都會觸發這個事件處理器,通常會調用一個JavaScript函數。
readyState:請求的狀態。有5個可取值:0 = 未初始化,1 = 正在加載, 2 = 已加載, 3 = 交互中, 4 = 完成。
responseText:服務器的響應,表示爲一個串。
responseXML:服務器的響應,表示爲XML。這個對象可以解析爲一個DOM對象。
status:服務器的HTTP狀態碼(200對應OK,404對應Not Found(未找到),等等).
statusText:HTTP狀態碼的相應文本(OK或Not Found(未找到)等等)。
*************************************************************/
/*********************來看看到底要怎麼才能發送請求*******
使用XMLHttpRequest對象發送請求的基本步驟如下:
1.得到XMLHttpRequest對象實例的一個引用,爲此,可以創建一個新的實例,也可以訪問包含有
XMLHttpRequest實例的一個變量。
2.告訴XMLHttpRequest對象,哪個函數會處理XMLHttpRequest對象狀態的改變。爲此要把對象的onreadystatechange屬性設置爲指向一個JavaScript函數的指針。
3. 指定請求的屬性。XMLHttpRequest對象的open()方法會指定將發出的請求。open()方法取3個
參數:一個是指示所用方法(通常是GET或POST)的串,另一個是表示目標資源URL的串,還有一
個Boolean值,指示請求是否是異步的。
4. 將請求發送給服務器。XMLHttpRequest對象的send()方法會把請求傳送到指定的目標資源。
send()方法接受一個參數,這通常是一個串或一個DOM對象。這個參數會作爲請求體的一部分傳送到
目標URL.向send()方法提供參數時,要確保open()中指定的方法是POST。如果沒有數據要作爲請求體的一部分發送,則使用null。
異步方式給用戶帶來的體驗:(我想程序員看到這段解釋,心裏真的很爽!)
對服務器的請求是異步發送的,因此瀏覽器可以繼續響應用戶輸入,並在後臺等待服務器的響應。
如果選擇同步操作,而且倘若服務器的響應要花好幾秒才能到達,瀏覽器就會表現得很遲鈍,在
等待期間不能響應用戶的輸入。這樣一來,瀏覽器好像被凍住一樣,無法響應用戶輸入,而異步
做法可以避免這種情況,從而讓最終用戶有更好的體驗,儘管這種改善很細微,但確實很有意義。
這樣用戶就能繼續工作,而且服務器會在後臺處理先前的請求。能與服務器通信而不打斷用戶的
工作流,這樣就可以採用很多技術來改善用戶體驗。例如,假設有一個驗證用戶輸入的應用。用
戶在輸入表單上填寫各個域時,瀏覽器可以定期地向服務器發送表單值來進行驗證,此時並不打
斷用戶,他還可以繼續填寫餘下的表單域。如果某個驗證規則失敗,用戶會立即得到通知,而不
必等表單真正發送到服務器進行處理時才知道有錯誤,這就能大大節省用戶的時間,也能減輕服
務器上的負載壓力,因爲不必在表單提交不成功時完全重建表單的內容。
下面是說明安全問題的:
XMLHttpRequest對象要受制於瀏覽器的安全“沙箱”。XMLHttpRequest對象請求的所有資源
都必須與調用腳本在同一個域(domain)內。這個安全限制使得XMLHttpRequest對象不能請
求腳本所在域之外的資源。這個安全限制的強度如何因瀏覽器而異(見圖2-5)。Internet Explorer
會顯示一個警告,指出可能存在一個安全風險,但是用戶可以選擇是否繼續發出請求。Firefox則
會斷然停止請求,並在JavaScript控制檯顯示一個錯誤消息。Firefox確實提供了一些JavaScript技巧,使得XMLHttpRequest也可以請求外部URL的資源。不過,由於這些技術針對特定的瀏覽器,最好不要用,而且要避免使用XMLHttpRequest訪問外部URL
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章