ajax中XMLHttpRequest參數詳解

來源:互聯網
上載者:User
 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
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.