ajax XMLHttpRequest詳解

最早應用XMLHTTP的是微軟,IE（IE5以上）通過允許開發人員在Web頁面內部使用XMLHTTP ActiveX組件擴充自身的功能,開發人員可以不用從當前的Web頁面導航而直接傳輸資料到伺服器上或者從伺服器取資料。這個功能是很重要的,因為它協助減少了無狀態串連的痛苦,它還可以排除下載冗餘HTML的需要,從而提高進程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回應是建立它自己的繼承XML代理類：XMLHttpRequest類。Konqueror (和Safari v1.2,同樣也是基於KHTML的瀏覽器)也支援XMLHttpRequest對象,而Opera也將在其v7.6x+以後的版本中支援XMLHttpRequest對象。對於大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬性不支援。

XMLHttpRequest的應用：
XMLHttpRequest對象在JS中的應用
var xmlhttp = new XMLHttpRequest();
微軟的XMLHTTP組件在JS中的應用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 對象方法
/**
* Cross-browser XMLHttpRequest instantiation.
*/

if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
// Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};

XMLHttpRequest 對象方法 方法 描述
abort() 停止當前請求
getAllResponseHeaders() 作為字串返問完整的headers
getResponseHeader("headerLabel") 作為字串返問單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設定未決的請求的目標 URL, 方法, 和其他參數
send(content) 發送請求
setRequestHeader("label", "value") 設定header並和請求一起發送

XMLHttpRequest 對象屬性 屬性 描述
onreadystatechange 狀態改變的事件觸發程序
readyState 對象狀態(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 互動中
4 = 完成
responseText 伺服器處理序返回資料的文本版本
responseXML 伺服器處理序返回資料的相容DOM的XML文檔對象
status 伺服器返回的狀態代碼, 如：404 = "檔案末找到" 、200 ="成功"
statusText 伺服器返回的狀態文本資訊

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