詳解XMLhttpRequest（二）響應(yīng)屬性、二進(jìn)制數(shù)據(jù)、監(jiān)測(cè)上傳下載進(jìn)度

分析并操作 responseXML屬性

如果你使用 XMLHttpRequest 來獲得一個(gè)遠(yuǎn)程的 XML 文檔的內(nèi)容，responseXML 屬性將會(huì)是一個(gè)由 XML 文檔解析而來的 DOM 對(duì)象，這很難被操作和分析。這里有五種主要的分析 XML 文檔的方式：

?1.使用 XPath 定位到文檔的制定部分。

?2.使用 JXON 將其轉(zhuǎn)換成 javascript 對(duì)象樹。

?3.手工的 解析和序列化 XML 為字符串或?qū)ο蟆?/p>

?4.使用 XMLSerializer 把 DOM 樹序列化成字符串或文件。

&nbspWPzLKwHI;5.如果你預(yù)先知道 XML 文檔的內(nèi)容，你可以使用 RegExp。如果你用 RegExp 掃描時(shí)受到換行符的影響，你也許想要?jiǎng)h除所有的換行符。然而，這種方法是"最后手段"，因?yàn)槿绻?XML 代碼發(fā)生輕微變化，該方法將可能失敗。

解析和操作包含 HTML 文檔的 responseText 屬性

注意: 在 W3C XMLHttpRequest 規(guī)范中允許 HTML 通過 XMLHttpRequest.responseXML 屬性進(jìn)行解析。更多詳細(xì)內(nèi)容請(qǐng)閱讀 HTML in XMLHttpRequest 。

?如果使用 XMLHttpRequest 從遠(yuǎn)端獲取一個(gè) HTML 頁面，則所有 HTML 標(biāo)記會(huì)以字符串的形式存放在responseText 屬性里，這樣就使得操作和解析這些標(biāo)記變得困難。解析這些HTML標(biāo)記主要有三種方式：

?1.使用 XMLHttpRequest.responseXML 屬性。

?2.將內(nèi)容通過 fragment.body.innerHTML 注入到一個(gè) 文檔片段 中，并遍歷 DOM 中的片段。

?3.如果你預(yù)先知道 HTML 文檔的內(nèi)容，你可以使用 RegExp 。如果你用 RegExp 掃描時(shí)受到換行符的影響，你也許想要?jiǎng)h除所有的換行符。 然而，這種方法是"最后手段"，因?yàn)槿绻?HTML 代碼發(fā)生輕微變化，該方法將可能失敗。

Handling binary data

盡管 XMLHttpRequest 一般用來發(fā)送和接收文本數(shù)據(jù)，但其實(shí)也可以發(fā)送和接受二進(jìn)制內(nèi)容。有許多經(jīng)過良好測(cè)試的方法來強(qiáng)制使用 XMLHttpRequest 發(fā)送二進(jìn)制數(shù)據(jù)。利用 XMLHttpRequest 的 .overrideMimeType() 方法是一個(gè)解決方案，雖然它并不是一個(gè)標(biāo)準(zhǔn)方法。

var oReq = new XMLHttpRequest();

oReq.open("GET", url, true);

// retrieve data unprocessed as a binary string

oReq.overrideMimeType("text/plain; charset=x-user-defined");

/* ... */

在 XMLHttpRequest Level 2 規(guī)范中新加入了 responseType 屬性 ，使得發(fā)送和接收二進(jìn)制數(shù)據(jù)變得更加容易。

var oReq = new XMLHttpRequest();

oReq.onload = function(e) {

var arraybuffer = xhr.response; // not responseText

/* ... */

}

oReq.open("GET", url, true);

oReq.responseType = "arraybuffer";

oReq.send();

使用javaScript類型數(shù)組接受二進(jìn)制數(shù)據(jù)

可以通過設(shè)置一個(gè)XMLHttpRequest對(duì)象的responseType屬性來改變一個(gè)從服務(wù)器上返回的響應(yīng)的數(shù)據(jù)類型.可用的屬性值為空字符串 (默認(rèn)), "arraybuffer", "blob", "document", 和 "text". response屬性的值會(huì)根據(jù)responseType屬性的值的不同而不同, 可能會(huì)是一個(gè) ArrayBuffer, Blob, Document, string,或者為NULL(如果請(qǐng)求未完成或失敗)

?下例讀取了一個(gè)二進(jìn)制圖像文件,并且由該文件的二進(jìn)制原生字節(jié)創(chuàng)建了一個(gè)8位無符號(hào)整數(shù)的數(shù)組.

var oReq = new XMLHttpRequest();

oReq.open("GET", "/myfile.png", true);

oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {

var arrayBuffer = oReq.response; // 注意:不是oReq.responseText

if (arrayBuffer) {

var byteArray = new Uint8Array(arrayBuffer);

for (var i = 0; i < byteArray.byteLength; i++) {

// 對(duì)數(shù)組中的每個(gè)字節(jié)進(jìn)行操作

}

}

};

oReq.send(null);

除了上面的方法,還可以使用 BlobBuilder API 直接將arraybuffer數(shù)據(jù)添加進(jìn)一個(gè)Blob對(duì)象中, 由于該API還在試驗(yàn)階段,所以需要加上特定的前綴:

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;

var oReq = new XMLHttpRequest();

oReq.open("GET", "/myfile.png", true);

oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {

var blobBuilder = new BlobBuilder();

blobBuilder.appeWPzLKwHInd(oReq.response);

var blob = blobBuilder.getBlob("image/png");

// ...

};

oReq.send();

在老的瀏覽器中接受二進(jìn)制數(shù)據(jù)

?下面的load_binary_resource()方法可以從指定的URL那里加載二進(jìn)制數(shù)據(jù),并將數(shù)據(jù)返回給調(diào)用者.

function load_binary_resource(url) {

var req = new XMLHttpRequest();

req.open(\'GET\', url, false);

//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]

req.overrideMimeType(\'text/plain; charset=x-user-defined\');

req.send(null);

if (req.status != 200) return \'\';

return req.responseText;

}

最為奇妙的操作在第五行,該行重寫了默認(rèn)的MIME類型,強(qiáng)制瀏覽器將該響應(yīng)當(dāng)成純文本文件來對(duì)待, 使用一個(gè)用戶自定義的字符集.這樣就是告訴了瀏覽器,不要去解析數(shù)據(jù),直接返回未處理過的字節(jié)碼.

var filestream = load_binary_resource(url);

var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字節(jié)(f7)

上例從請(qǐng)求回來的二進(jìn)制數(shù)據(jù)中得到偏移量為x處的字節(jié).有效的偏移量范圍是0到filestream.length-1.

?查看 使用XMLHttpRequest下載文件 了解詳情,查看下載文件.

發(fā)送二進(jìn)制數(shù)據(jù)

XMLHttpRequest對(duì)象的send方法已被增強(qiáng),可以通過簡(jiǎn)單的傳入一個(gè)ArrayBuffer, Blob, 或者 File對(duì)象來發(fā)送二進(jìn)制數(shù)據(jù).

?下例創(chuàng)建了一個(gè)文本文件,并使用POST方法將該文件發(fā)送到了服務(wù)器上.你也可以使用文本文件之外的其他二進(jìn)制數(shù)據(jù)類型.

var oReq = new XMLHttpRequest();

oReq.open("POST", url, true);

oReq.onload = function (oEvent) {

// 上傳完成后.

};

var bb = new BlobBuilder(); // 需要合適的前綴: window.MozBlobBuilder 或者 window.WebKitBlobBuilder

bb.append(\'abc123\');

oReq.send(bb.getBlob(\'text/plain\'));

將類型數(shù)組作為二進(jìn)制數(shù)據(jù)發(fā)送

?你可以將JavaScript類型數(shù)組作為二進(jìn)制數(shù)據(jù)發(fā)送出去.

var myArray = new ArrayBuffer(512);

var longInt8View = new Uint8Array(myArray);

for (var i=0; i< longInt8View.length; i++) {

longInt8View[i] = i % 255;

}

var xhr = new XMLHttpRequest;

xhr.open("POST", url, false);

xhr.send(myArray);

上例新建了一個(gè)512字節(jié)的8位整數(shù)數(shù)組并發(fā)送它,當(dāng)然,你也可以發(fā)送任意的二進(jìn)制數(shù)據(jù)

監(jiān)測(cè)進(jìn)度

?支持 DOM 的 progress 事件監(jiān)測(cè)之于 XMLHttpRequest 傳輸，遵循 Web API 進(jìn)度事件規(guī)范 : 這些事件實(shí)現(xiàn)了 ProgressEvent 接口。

var req = new XMLHttpRequest();

//上傳監(jiān)聽

req.addEventListener("progress", updateProgress, false);

req.addEventListener("load", transferComplete, false);

req.addEventListener("error", transferFailed, false);

req.addEventListener("abort", transferCanceled, false);

req.open(...);

...

// progress on transfers from the server to the client (downloads)

function updateProgress(evt) {

if (evt.lengthComputable) {

var percentComplete = evt.loaded / evt.total;

...

} else {

// Unable to compute progress information since the total size is unknown

}

}

注意： 你需要在請(qǐng)求調(diào)用 open() 之前添加事件監(jiān)聽。否則 progress 事件將不會(huì)被觸發(fā)。

?在上個(gè)例子中，progress 事件被指定由 updateProgress() 函數(shù)處理，并接收到傳輸?shù)目傋止?jié)數(shù) total 和已經(jīng)傳輸?shù)淖止?jié)數(shù)loaded ，total是自“Content-Length”頭傳輸?shù)臄?shù)據(jù)的整體長(zhǎng)度(字節(jié))。但是如果 lengthComputable 屬性的值是 false，那么總字節(jié)數(shù)是未知并且 total 的值為0，若知道長(zhǎng)度則lengthComputable屬性為true

?progress 事件同時(shí)存在于下載和上傳的傳輸。下載相關(guān)事件在 XMLHttpRequest 對(duì)象上被觸發(fā)，就像上面的例子一樣。上傳相關(guān)事件在 XMLHttpRequest.upload 對(duì)象上被觸發(fā)，像下面這樣：

var req = new XMLHttpRequest();

//下載監(jiān)聽

req.upload.addEventListener("progress", updateProgress);

req.upload.addEventListener("load", transferComplete);

req.upload.addEventListener("error", transferFailed);

req.upload.addEventListener("abort", transferCanceled);

req.open();

注意：progress 事件在使用 file: 協(xié)議的情況下是無效的。

?使用 loadend 事件可以偵測(cè)到所有的三種加載結(jié)束條件（abort、load、error）：

?req.addEventListener("loadend", loadEnd, false);

?需要注意的是，沒有方法可以確切的知道 loadend 事件接收到的信息是來自何種條件引起的操作終止；但是你可以在所有傳輸結(jié)束的時(shí)候使用這個(gè)事件處理。

XMLHttpRequest對(duì)象在請(qǐng)求的不同階段觸發(fā)不同類型的事件，所以http://它不需要檢查readyState屬性。

?當(dāng)調(diào)用send（）時(shí)，觸發(fā)單個(gè)loadstart事件。當(dāng)正在加載服務(wù)器的響應(yīng)時(shí)，XMLHttpRequest對(duì)象會(huì)發(fā)生progress事件，通常每隔50毫秒左右，所以可以使用這些事件給用戶反饋請(qǐng)求的進(jìn)度。

?如果請(qǐng)求快速完成，它可能從不會(huì)觸發(fā)progress事件。當(dāng)事件完成，會(huì)觸發(fā)load事件。

?HTTP請(qǐng)求無法完成有3種情況，對(duì)應(yīng)3種事件。如果請(qǐng)求超時(shí)，會(huì)觸發(fā)timeout事件。如果請(qǐng)求中止，會(huì)觸發(fā)abort事件。像太多重定向這樣的網(wǎng)絡(luò)錯(cuò)誤會(huì)阻止請(qǐng)求完成，但這些情況發(fā)生時(shí)會(huì)觸發(fā)error事件。

?對(duì)于任何具體請(qǐng)求，瀏覽器將只會(huì)觸發(fā)load、abort、timeout和error事件中的一個(gè)，還有progress事件。

if(\'onprogress\' in (new XMLHttpRequest())){ //檢測(cè)是否支持progress事件

var request = new XMLHttpRequest();

request.onprogress = function (e) {

if(e.lengthComputable){

progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\';}}