XMLHttp簡(jiǎn)介(Ajax應(yīng)用的主要技術(shù))

Ajax的一個(gè)最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無(wú)刷新更新頁(yè)面), 這一特點(diǎn)主要得益于XMLHTTP組件XMLHTTPRequest對(duì)象。這樣就可以向再發(fā)桌面應(yīng)用程序只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換,而不用每次都刷新 界面也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來(lái)做,這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度,、縮短了用戶等候時(shí)間,。
最早應(yīng)用XMLHTTP的是微軟,IE（IE5以上）通過允許開發(fā)人員在Web頁(yè)面內(nèi)部使用XMLHTTP ActiveX組件擴(kuò)展自身的功能,開發(fā)人員可以不用從當(dāng)前的Web頁(yè)面導(dǎo)航而直接傳輸數(shù)據(jù)到服務(wù)器上或者從服務(wù)器取數(shù)據(jù)。這個(gè)功能是很重要的,因?yàn)樗鼛? 助減少了無(wú)狀態(tài)連接的痛苦,它還可以排除下載冗余HTML的需要,從而提高進(jìn)程的速度,。Mozilla（Mozilla1.0以上及NetScape7以 上）做出的回應(yīng)是創(chuàng)建它自己的繼承XML代理類：XMLHttpRequest類,。Konqueror (和Safari v1.2,同樣也是基于KHTML的瀏覽器)也支持XMLHttpRequest對(duì)象,而Opera也將在其v7.6x+以后的版本中支持 XMLHttpRequest對(duì)象。對(duì)于大多數(shù)情況,，XMLHttpRequest對(duì)象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬 性不支持,。

XMLHttpRequest的應(yīng)用：
XMLHttpRequest對(duì)象在JS中的應(yīng)用
var xmlhttp = new XMLHttpRequest();
微軟的XMLHTTP組件在JS中的應(yīng)用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 對(duì)象方法
/**
* 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 對(duì)象方法 方法 描述
abort() 停止當(dāng)前請(qǐng)求
getAllResponseHeaders() 作為字符串返問完整的headers
getResponseHeader("headerLabel") 作為字符串返問單個(gè)的header標(biāo)簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請(qǐng)求的目標(biāo) URL, 方法, 和其他參數(shù)
send(content) 發(fā)送請(qǐng)求
setRequestHeader("label", "value") 設(shè)置header并和請(qǐng)求一起發(fā)送

XMLHttpRequest 對(duì)象屬性 屬性 描述
onreadystatechange 狀態(tài)改變的事件觸發(fā)器
readyState 對(duì)象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本
responseXML 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容DOM的XML文檔對(duì)象
status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"
statusText 服務(wù)器返回的狀態(tài)文本信息


XMLHttpRequest 使用經(jīng)驗(yàn)

*
*author Jouy.lu
*/
var xmlHttp; //首先定義一個(gè)全局域變量來(lái)保存對(duì)象的引用;
function createXMLHttpRequest(){ //該方法用來(lái)創(chuàng)建XMLHttpRequest對(duì)象的實(shí)例.
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的標(biāo)準(zhǔn)操作*********************
abort():終止當(dāng)前請(qǐng)求;
getAllResponseHeaders():把HTTP所以響應(yīng)首部作為鍵/值對(duì)返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立對(duì)服務(wù)器的調(diào)用,url參數(shù)可以是相對(duì)URL或絕對(duì)URL,該方法還包含了另三個(gè)可選參數(shù);
send(content);向服務(wù)器發(fā)送請(qǐng)求;
setRequestHeader("header","value");把指定首部設(shè)置為所提供的值,。在設(shè)置任何首部之前必須先調(diào)用open(),。
注:
void open(string method, string url, boolean asynch, string username, string password)：這個(gè)方法會(huì)建立對(duì)服務(wù)器的調(diào)用。
要提供調(diào)用的特定方法（GET,、POST或PUT）,，還要提供所調(diào)用資源的URL。另外還可以傳遞一個(gè)Boolean值,，指示這個(gè)調(diào)用是異步還是同步的,，
默認(rèn)值為true，這表示請(qǐng)求本質(zhì)上是異步的,。如果這個(gè)參數(shù)為false,，處理就會(huì)等待，直到從服務(wù)器返回響應(yīng)為止,。由于異步調(diào)用是使用Ajax
的主要優(yōu)點(diǎn)之一,，所以倘若將這個(gè)參數(shù)設(shè)置為false，從某種程度上講與使用XMLHttpRequest對(duì)象的初衷不太相符,。在某些情況下這,個(gè)參數(shù)
設(shè)置為false也是有用的,，比如在持久存儲(chǔ)頁(yè)面之前你可能想先驗(yàn)證用戶的輸入。最后兩個(gè)參數(shù)不說(shuō)自明,，允許你指定一個(gè)特定的用戶名和口令,。
void send(content)：這個(gè)方法具體向服務(wù)器發(fā)出請(qǐng)求。如果請(qǐng)求聲明為異步的,，這個(gè)方法就會(huì)立即返回,，否則它會(huì)等待，直到接收到響應(yīng)
為止。參數(shù)是可選的,，可以是一個(gè)DOM對(duì)象的實(shí)例,、一個(gè)輸入流，或者是一個(gè)串,。傳入這個(gè)對(duì)象的內(nèi)容會(huì)作為請(qǐng)求體的一部分發(fā)送,。
void setRequestHeader(string header, string value)：這個(gè)方法為HTTP請(qǐng)求中一個(gè)給定的首部設(shè)置值。它有兩個(gè)參數(shù),，第一個(gè)串表
示要設(shè)置的首部,，第二個(gè)串表示要在首部中放置的值。需要說(shuō)明,，這個(gè)方法必須在open()之后才能調(diào)用,。在所有這些方法中，最有可能用到
的就是open()和send(),。XMLHttpRequest對(duì)象還有許多屬性,，在設(shè)計(jì)Ajax交互時(shí)這些屬性非常有用。
void abort()： 顧名思義,，這個(gè)方法就是要停止請(qǐng)求。
string getAllResponseHeaders()： 這個(gè)方法的核心功能對(duì)Web應(yīng)用開發(fā)人員應(yīng)該很熟悉了,，它會(huì)返回一個(gè)串,，其中包含HTTP請(qǐng)求的所有響
應(yīng)首部。首部包括Content-Length,、Date和URI,。
string getResponseHeader(string header)：這個(gè)方法與getAllResponseHeaders()是對(duì)應(yīng)的，不過它有一個(gè)參數(shù)來(lái)表示你希望得到哪一個(gè)
首部值,，并且會(huì)把這個(gè)值作為一個(gè)串返回,。


******************************/
/*******************************標(biāo)準(zhǔn)XMLHttpRequest屬性**********************
onreadystatechange:每個(gè)狀態(tài)改變時(shí)都會(huì)觸發(fā)這個(gè)事件處理器，通常會(huì)調(diào)用一個(gè)JavaScript函數(shù),。
readyState:請(qǐng)求的狀態(tài),。有5個(gè)可取值：0 = 未初始化，1 = 正在加載,， 2 = 已加載,， 3 = 交互中， 4 = 完成,。
responseText:服務(wù)器的響應(yīng),，表示為一個(gè)串。
responseXML:服務(wù)器的響應(yīng),，表示為XML,。這個(gè)對(duì)象可以解析為一個(gè)DOM對(duì)象。
status:服務(wù)器的HTTP狀態(tài)碼（200對(duì)應(yīng)OK,，404對(duì)應(yīng)Not Found（未找到）,，等等）.
statusText:HTTP狀態(tài)碼的相應(yīng)文本（OK或Not Found（未找到）等等）,。
***************************************************************************
*/

/*********************來(lái)看看到底要怎么才能發(fā)送請(qǐng)求*******
使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求的基本步驟如下：
1.得到XMLHttpRequest對(duì)象實(shí)例的一個(gè)引用，為此,，可以創(chuàng)建一個(gè)新的實(shí)例,，也可以訪問包含有
XMLHttpRequest實(shí)例的一個(gè)變量。
2.告訴XMLHttpRequest對(duì)象,，哪個(gè)函數(shù)會(huì)處理XMLHttpRequest對(duì)象狀態(tài)的改變,。為此要把對(duì)象的
onreadystatechange屬性設(shè)置為指向一個(gè)JavaScript函數(shù)的指針。
3. 指定請(qǐng)求的屬性,。XMLHttpRequest對(duì)象的open()方法會(huì)指定將發(fā)出的請(qǐng)求,。open()方法取3個(gè)
參數(shù)：一個(gè)是指示所用方法（通常是GET或POST）的串，另一個(gè)是表示目標(biāo)資源URL的串,，還有一
個(gè)Boolean值,，指示請(qǐng)求是否是異步的。
4. 將請(qǐng)求發(fā)送給服務(wù)器,。XMLHttpRequest對(duì)象的send()方法會(huì)把請(qǐng)求傳送到指定的目標(biāo)資源,。
send()方法接受一個(gè)參數(shù)，這通常是一個(gè)串或一個(gè)DOM對(duì)象,。這個(gè)參數(shù)會(huì)作為請(qǐng)求體的一部分傳送到
目標(biāo)URL.向send()方法提供參數(shù)時(shí),，要確保open()中指定的方法是POST。如果沒有數(shù)據(jù)要作為請(qǐng)求體
的一部分發(fā)送,，則使用null,。

異步方式給用戶帶來(lái)的體驗(yàn):(我想程序員看到這段解釋,心里真的很爽!)
對(duì)服務(wù)器的請(qǐng)求是異步發(fā)送的，因此瀏覽器可以繼續(xù)響應(yīng)用戶輸入,，并在后臺(tái)等待服務(wù)器的響應(yīng),。
如果選擇同步操作，而且倘若服務(wù)器的響應(yīng)要花好幾秒才能到達(dá),，瀏覽器就會(huì)表現(xiàn)得很遲鈍,，在
等待期間不能響應(yīng)用戶的輸入。這樣一來(lái),，瀏覽器好像被凍住一樣,，無(wú)法響應(yīng)用戶輸入，而異步
做法可以避免這種情況,，從而讓最終用戶有更好的體驗(yàn),，盡管這種改善很細(xì)微，但確實(shí)很有意義,。
這樣用戶就能繼續(xù)工作,，而且服務(wù)器會(huì)在后臺(tái)處理先前的請(qǐng)求。能與服務(wù)器通信而不打斷用戶的
工作流，這樣就可以采用很多技術(shù)來(lái)改善用戶體驗(yàn),。例如,，假設(shè)有一個(gè)驗(yàn)證用戶輸入的應(yīng)用。用
戶在輸入表單上填寫各個(gè)域時(shí),，瀏覽器可以定期地向服務(wù)器發(fā)送表單值來(lái)進(jìn)行驗(yàn)證,，此時(shí)并不打
斷用戶，他還可以繼續(xù)填寫余下的表單域,。如果某個(gè)驗(yàn)證規(guī)則失敗,，用戶會(huì)立即得到通知，而不
必等表單真正發(fā)送到服務(wù)器進(jìn)行處理時(shí)才知道有錯(cuò)誤,，這就能大大節(jié)省用戶的時(shí)間,，也能減輕服
務(wù)器上的負(fù)載壓力，因?yàn)椴槐卦诒韱翁峤徊怀晒r(shí)完全重建表單的內(nèi)容,。

下面是說(shuō)明安全問題的:
XMLHttpRequest對(duì)象要受制于瀏覽器的安全“沙箱”,。XMLHttpRequest對(duì)象請(qǐng)求的所有資源
都必須與調(diào)用腳本在同一個(gè)域（domain）內(nèi)。這個(gè)安全限制使得XMLHttpRequest對(duì)象不能請(qǐng)
求腳本所在域之外的資源,。這個(gè)安全限制的強(qiáng)度如何因?yàn)g覽器而異（見圖2-5）,。Internet Explorer
會(huì)顯示一個(gè)警告，指出可能存在一個(gè)安全風(fēng)險(xiǎn),，但是用戶可以選擇是否繼續(xù)發(fā)出請(qǐng)求,。Firefox則
會(huì)斷然停止請(qǐng)求，并在JavaScript控制臺(tái)顯示一個(gè)錯(cuò)誤消息,。Firefox確實(shí)提供了一些JavaScript技巧，
使得XMLHttpRequest也可以請(qǐng)求外部URL的資源,。不過,，由于這些技術(shù)針對(duì)特定的瀏覽器，最好不要用,，
而且要避免使用XMLHttpRequest訪問外部URL,。