轉一篇—-XMLHTTPRequest簡介

前幾天看到的
地址：http://blog.chinaunix.net/u/8780/showart_282680.html

Ajax的一個最大的特點是無需重新整理頁面便可向伺服器傳輸或讀寫資料(又稱無重新整理更新頁面),這一特點主要得益於XMLHTTP組件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。