轉:AJAX中xhr對象詳解

XJAX ,並非一種新技術的誕生.它實際上表明的是幾項技術按必定的方式組合在一在同共的協做中發揮各自的做用.
它包括：
使用XHTML和CSS標準化呈現；
使用DOM實現動態顯示和交互；
使用XML和XSLT進行數據交換與處理；
使用XMLHttpR
XJAX ,並非一種新技術的誕生.它實際上表明的是幾項技術按必定的方式組合在一在同共的協做中發揮各自的做用.
它包括：
使用XHTML和CSS標準化呈現；
使用DOM實現動態顯示和交互；
使用XML和XSLT進行數據交換與處理；
使用XMLHttpRequest進行異步數據讀取；
最後用JavaScript綁定和處理全部數據。

在這裏我只向談點XMLHttpRequest對象:

在上面看到,使用XMLHttpRequest進行異步數據讀取；

首先,咱們要建立該對象,針對不一樣的瀏覽器,該對象的建立方法是有區別.
Internet 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類，上面代碼就是根據不一樣的Internet Explorer瀏覽器建立XMLHttpRequest類的方法。


對於Mozilla?Netscape?Safari等瀏覽器，建立XMLHttpRequest 方法以下：

xmlhttp_request = new XMLHttpRequest();
　　若是服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能沒法正常工做。 爲了解決這個問題，若是服務器響應的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函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"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/19XMLHttpRequest詳解


/*
*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。