第9章XMLHttpRequest對(duì)象詳解本章導(dǎo)讀◆XMLHttpRequest對(duì)象的創(chuàng)建?！鬤MLHttpRequest對(duì)象的屬性、方法和事件。

◆發(fā)送Ajax請(qǐng)求的例程（或流程）。XMLHttpRequest對(duì)象是Ajax的核心對(duì)象，由它負(fù)責(zé)與服務(wù)器的交互，在不需要重新加載整個(gè)網(wǎng)頁(yè)的前提下，向服務(wù)器發(fā)送請(qǐng)求，獲取數(shù)據(jù)，部分地更新頁(yè)面，增強(qiáng)了用戶體驗(yàn)，是現(xiàn)代Web應(yīng)用開(kāi)發(fā)的基礎(chǔ)。Ajax介紹Ajax的全稱(chēng)是AsynchronousJavaScriptandXML，即異步的JavaScript的和XML技術(shù)，雖然現(xiàn)在的Ajax傳輸數(shù)據(jù)的類(lèi)型不再僅僅局限于XML，有了更豐富的數(shù)據(jù)類(lèi)型，比如JSON數(shù)據(jù)類(lèi)型和二進(jìn)制數(shù)據(jù)類(lèi)型，但這個(gè)名字一直沿用。Ajax不是一種編程語(yǔ)言，而是一種編程技術(shù)。它所采用的語(yǔ)言是JavaScript（現(xiàn)在標(biāo)準(zhǔn)的稱(chēng)為ECMAScript），使用XMLHttpRequest對(duì)象與服務(wù)器進(jìn)行交互。XMLHttpRequest是Ajax技術(shù)的核心。本章詳細(xì)探討該對(duì)象的屬性、方法和應(yīng)用。9.1XMLHttpRequest對(duì)象的創(chuàng)建現(xiàn)代瀏覽器都支持XMLHttpRequest對(duì)象，但支持方式不同。標(biāo)準(zhǔn)模型的瀏覽器（如Chrome，F(xiàn)irefox等）以XMLHttpRequest對(duì)象的形式提供；IE瀏覽器以ActiveX控件的形式提供。兩種方式聲明XMLHttpRequest對(duì)象的方式不同：

對(duì)象的創(chuàng)建需要區(qū)分到底是哪種瀏覽器，然后采用不同的方式創(chuàng)建該對(duì)象?！魳?biāo)準(zhǔn)模型的瀏覽器：varreq=newXMLHttpRequest();◆IE模型的瀏覽器：varreq=newActiveXObject(“Microsoft.XMLHTTP”);為了能夠兼容這兩種方式，有兩種方法：一種是判斷瀏覽器是否支持XMLHttpRequest對(duì)象，如果支持則以標(biāo)準(zhǔn)模型瀏覽器的方式創(chuàng)建；另一種直接以標(biāo)準(zhǔn)模型的方式加以創(chuàng)建，如果創(chuàng)建不成功，則再使用IE模式創(chuàng)建。兩種方式代碼如下：

◆判斷瀏覽器是否支持XMLHttpRequest對(duì)象：varreq;if(window.XMLHttpRequest){req=newXMLHttpRequest();}else{req=newActiveXObject("Microsoft.XMLHTTP");}其中，window.XMLHttpRequest用于判斷瀏覽器是否支持XMLHttpRequest對(duì)象，如果返回TRUE或者類(lèi)型轉(zhuǎn)換后為T(mén)RUE，則表示支持XMLHttpRequest對(duì)象。

◆直接用標(biāo)準(zhǔn)模型瀏覽器方式創(chuàng)建XMLHttpRequest對(duì)象：varreq;try{ req=newXMLHttpRequest();}catch(e){ req=newActiveXObject("Microsoft.XMLHTTP");}returnreq;許多程序員偏向于第二種方式創(chuàng)建XMLHttpRequest對(duì)象，因?yàn)檫@樣無(wú)需進(jìn)行判斷，直接創(chuàng)建對(duì)象，如果不成功則以另一種方式創(chuàng)建，效率比較高。本書(shū)采用第二種方式創(chuàng)建該對(duì)象。9.2XMLHttpRequest的屬性、方法和事件

許多網(wǎng)上資料[29]和書(shū)籍都詳細(xì)介紹了XMLHttpRequest對(duì)象的屬性和方法，通過(guò)這些屬性和方法，可以了解它的工作狀態(tài)、注冊(cè)事件處理程序、獲取服務(wù)器端的響應(yīng)數(shù)據(jù)，并可以對(duì)它進(jìn)行某些設(shè)置，可以說(shuō)這些屬性和方法是使用XMLHttpRequest對(duì)象的窗口。下面對(duì)它的屬性、方法和事件進(jìn)行詳細(xì)討論。9.2.1XMLHttpRequest對(duì)象的屬性表9-1列出了XMLHttpRequest對(duì)象的屬性和方法，這是使用XMLHttpRequest對(duì)象的基礎(chǔ)。其中，upload屬性是XMLHttpRequestUpload類(lèi)型的對(duì)象，它繼承自XMLHttpRequestEventTarget，而我們的XMLHttpRequest對(duì)象也繼承自XMLHttpRequestEventTarget。所以u(píng)pload屬性和XMLHttpRequest對(duì)象就有著相同的屬性和方法，這一點(diǎn)請(qǐng)大家注意。特別是在一些程序中，一會(huì)使用XMLHttpRequest對(duì)象的屬性或方法，一會(huì)又使用upload屬性的這一屬性或方法，其實(shí)二者是一樣的，只不過(guò)觸發(fā)時(shí)機(jī)不一樣，熟悉這樣的寫(xiě)法就好了。屬性的用法：upload——該屬性主要用于注冊(cè)事件處理函數(shù)，對(duì)Ajax請(qǐng)求的數(shù)據(jù)傳輸進(jìn)行監(jiān)控和處理。readyState和status（或statusText）結(jié)合判斷XMLHttpRequest請(qǐng)求是否已成功響應(yīng)，在成功響應(yīng)時(shí)，處理服務(wù)器返回的數(shù)據(jù)?！魊esponseType主要用于設(shè)置需要返回的數(shù)據(jù)類(lèi)型，對(duì)服務(wù)器返回結(jié)果的處理就依賴(lài)于些類(lèi)型?！魊esponseText、responseXML和response分別表示服務(wù)器返回的數(shù)據(jù)，依次是文本、XML文本對(duì)象和二進(jìn)制數(shù)據(jù)。通過(guò)對(duì)這些數(shù)據(jù)的處理，呈現(xiàn)用戶的請(qǐng)求處理結(jié)果。9.2.2XMLHttpRequest對(duì)象的方法表9-2列出了XMLHttpRequest對(duì)象的方法，通過(guò)這些方法可以建立與服務(wù)器的連接，設(shè)置請(qǐng)求頭、發(fā)送請(qǐng)求、獲取服務(wù)器的響應(yīng)頭等等這些功能。通過(guò)這些方法可以完成客戶端與服務(wù)器交互的過(guò)程。表9-2XMLHttpRequest的方法注意：1.setRequestHeader方法必須在open方法調(diào)用之后、send方法之前調(diào)用，否則會(huì)出現(xiàn)異常。2.setRequestHeader方法可以連續(xù)調(diào)用多次，如果已經(jīng)存在同名的HTTP頭時(shí)，最終結(jié)果是追加而不是覆蓋。由于send()方法的body參數(shù)類(lèi)型較為復(fù)雜，而且比較生疏，所以做一下比較詳細(xì)的說(shuō)明。文獻(xiàn)[30]對(duì)此做了比較細(xì)致的描述，這些類(lèi)型在實(shí)際應(yīng)用中應(yīng)用的比較多，需要好好掌握。DOMString對(duì)象即普通的JavaScript的String，UTF-16編碼。不要因?yàn)樗臉幼覦OMString而產(chǎn)生錯(cuò)覺(jué)或疑惑，也不要害怕，它只不過(guò)是普通的JavaScript的字符串而已。Document對(duì)象可以近似的理解為XML文檔，也就是相當(dāng)于responseXML返回的數(shù)據(jù)結(jié)構(gòu)。當(dāng)然，也可以指document對(duì)象。FormData對(duì)象可以由程序員創(chuàng)建的“表單”，與HTML表單功能是一樣的，但可以上傳二進(jìn)制數(shù)據(jù)?？梢允褂胊ppend()方法添加“鍵-值”對(duì)。append方法原型如下：voidappend(DOMStringkey,Blobblob,DOMStringfileName);voidappend(DOMStringkey,DOMStringvalue);Blob對(duì)象也就是二進(jìn)制大對(duì)象，可以上傳/下載二進(jìn)制數(shù)據(jù)。有兩個(gè)重要的屬性size和type，說(shuō)明如下：◆size——只讀屬性，表示Blob對(duì)象中包含數(shù)據(jù)的大小，以字節(jié)為單位，unsignedlong類(lèi)型?！魌ype——表示Blob中數(shù)據(jù)的MIME類(lèi)型，若未設(shè)置則為空。MIME(MultipurposeInternetMailExtensions)是描述消息內(nèi)容類(lèi)型的因特網(wǎng)標(biāo)準(zhǔn)，MIME消息能包含文本、圖像、音頻、視頻以及其他應(yīng)用程序?qū)Ｓ玫臄?shù)據(jù)。如jpeg圖像的MIME類(lèi)型為“image/jpeg”。MIME類(lèi)型很多，每種文件的MIME類(lèi)型可以在使用是查閱相關(guān)網(wǎng)站或手冊(cè)即可?？梢酝ㄟ^(guò)Blob構(gòu)造函數(shù)創(chuàng)建Blob對(duì)象，Blob構(gòu)造函數(shù)原型如下：BlobBlob(Arrayparts,BlobPropertyBagproperties);參數(shù)說(shuō)明：◆parts——可選參數(shù)，是一個(gè)數(shù)組，包含了將要添加到Blob對(duì)象中的數(shù)據(jù)。數(shù)組元素可以是任意多個(gè)的ArrayBuffer,ArrayBufferView(typedarray),Blob,或者DOMString對(duì)象。◆properties——可選參數(shù)，是一個(gè)對(duì)象，設(shè)置Blob對(duì)象的一些屬性。目前僅支持一個(gè)type屬性，表示Blob的類(lèi)型。Blob提供了slice()方法，用于對(duì)Blob中的數(shù)據(jù)進(jìn)行分割，類(lèi)似于數(shù)組的slice方法，原型如下：Blobslice(longstart,longend,DOMStringcontentType)參數(shù)說(shuō)明：◆start——可選參數(shù)，開(kāi)始截取的位置（索引），可以為負(fù)數(shù)，語(yǔ)法類(lèi)似于數(shù)組的slice方法。默認(rèn)值為0。如果start的值大于Blob的size屬性值，則返回空對(duì)象。◆end——可選參數(shù)，結(jié)束截取的位置（索引），可以為負(fù)數(shù)，語(yǔ)法類(lèi)似于數(shù)組的slice方法。默認(rèn)值為Blob的長(zhǎng)度，即直到Blob中的末尾。◆contentType——可選參數(shù)，用于設(shè)置截取到的新Blob對(duì)象的MIME類(lèi)型，這個(gè)值將會(huì)成為新的Blob對(duì)象的type屬性的值，默認(rèn)為一個(gè)空字符串。ArrayBuffer對(duì)象二進(jìn)制緩沖區(qū)，類(lèi)似于Blob，但本身無(wú)法進(jìn)行操作，只能作為數(shù)據(jù)源?？赏ㄟ^(guò)類(lèi)型化數(shù)組和DataView實(shí)現(xiàn)對(duì)ArrayBuffer對(duì)象的操作。關(guān)于類(lèi)型數(shù)組和DataView的細(xì)節(jié)這里不再討論，如果實(shí)際中用到可以查閱網(wǎng)絡(luò)或相關(guān)書(shū)籍。9.2.3XMLHttpRequest對(duì)象的事件異步請(qǐng)求對(duì)象XMLHttpRequest在與服務(wù)器交互的過(guò)程中，會(huì)觸發(fā)各處事件，但事件的觸發(fā)時(shí)機(jī)不同，通過(guò)處理這些事件，可以對(duì)交互過(guò)程予以干預(yù)或處理?？梢赃@么說(shuō)，除了基本的請(qǐng)求過(guò)程之外，Ajax程序設(shè)計(jì)就是編制程序響應(yīng)這些事件，這在Ajax編程中占有十分重要的地位，務(wù)必好好掌握。表9-3列出了XMLHttpRequest對(duì)象可能觸發(fā)的事件.但有一點(diǎn)需要特別注意，那就是XMLHttpRequest對(duì)象與upload屬性（實(shí)質(zhì)上是XMLHttpRequestEventTarget接口類(lèi)型的對(duì)象）繼承了同一接口，所以表中列出的事件，除onreadystatechange事件之外，其他事件都是兩者共有的。還要特別注意的是，雖然二者包含相同的事件，但相同事件的觸發(fā)時(shí)機(jī)卻不同！這些不同已經(jīng)在表9-3中列出，請(qǐng)大家仔細(xì)閱讀并掌握。如果觸發(fā)onprogress事件，則會(huì)產(chǎn)生ProgressEvent對(duì)象，通過(guò)這個(gè)對(duì)象可以實(shí)時(shí)了解XMLHttpRequest上傳或下載情況.ProgressEvent對(duì)象包含以下三個(gè)屬性：◆lengthComputable——上傳/下載數(shù)據(jù)長(zhǎng)度是否是可計(jì)算的。若為可計(jì)算的，則返回true，否則返回false。默認(rèn)值為false?！鬺oaded——已經(jīng)上傳/下載的字節(jié)數(shù)。默認(rèn)值為0?！魌otal——需要上傳或下載的總字節(jié)數(shù)。默認(rèn)值為0。通過(guò)這個(gè)對(duì)象可以很容易的實(shí)現(xiàn)文件上傳或下載的進(jìn)度條功能，這個(gè)對(duì)象的引入大大簡(jiǎn)化了進(jìn)度條實(shí)現(xiàn)的復(fù)雜程度，使得進(jìn)度條的實(shí)現(xiàn)變得非常簡(jiǎn)單。學(xué)習(xí)了XMLHttpRequest對(duì)象的屬性、方法和事件之后，就可以