详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度

前端之家收集整理的这篇文章主要介绍了详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

分析并操作 responseXML属性

如果你使用 XMLHttpRequest 来获得一个远程的 XML 文档的内容,responseXML 属性将会是一个由 XML 文档解析而来的 DOM 对象,这很难被操作和分析。这里有五种主要的分析 XML 文档的方式: 1.使用 XPath 定位到文档的制定部分。 2.使用 JXON 将其转换成 JavaScript 对象树。 3.手工的 解析和序列化 XML 为字符串或对象。 4.使用 XMLSerializer 把 DOM 树序列化成字符串或文件。 5.如果你预先知道 XML 文档的内容,你可以使用 RegExp。如果你用 RegExp 扫描时受到换行符的影响,你也许想要删除所有的换行符。然而,这种方法是"最后手段",因为如果 XML 代码发生轻微变化,该方法将可能失败。

解析和操作包含 HTML 文档的 responseText 属性

注意: 在 W3C XMLHttpRequest 规范中允许 HTML 通过 XMLHttpRequest.responseXML 属性进行解析。更多详细内容请阅读 HTML in XMLHttpRequest 。 如果使用 XMLHttpRequest 从远端获取一个 HTML 页面,则所有 HTML 标记会以字符串的形式存放在responseText 属性里,这样就使得操作和解析这些标记变得困难。解析这些HTML标记主要有三种方式: 1.使用 XMLHttpRequest.responseXML 属性。 2.将内容通过 fragment.body.innerHTML 注入到一个 文档片段 中,并遍历 DOM 中的片段。 3.如果你预先知道 HTML 文档的内容,你可以使用 RegExp 。如果你用 RegExp 扫描时受到换行符的影响,你也许想要删除所有的换行符。 然而,这种方法是"最后手段",因为如果 HTML 代码发生轻微变化,该方法将可能失败。

Handling binary data

尽管 XMLHttpRequest 一般用来发送和接收文本数据,但其实也可以发送和接受二进制内容。有许多经过良好测试的方法来强制使用 XMLHttpRequest 发送二进制数据。利用 XMLHttpRequest 的 .overrideMimeType() 方法是一个解决方案,虽然它并不是一个标准方法

在 XMLHttpRequest Level 2 规范中新加入了 responseType 属性 ,使得发送和接收二进制数据变得更加容易。

使用JavaScript类型数组接受二进制数据

可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认),"arraybuffer","blob","document",和 "text". response属性的值会根据responseType属性的值的不同而不同,可能会是一个 ArrayBuffer,Blob,Document,string,或者为NULL(如果请求未完成或失败) 下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个8位无符号整数的数组.

除了上面的方法,还可以使用 BlobBuilder API 直接将arraybuffer数据添加进一个Blob对象中,由于该API还在试验阶段,所以需要加上特定的前缀:

在老的浏览器中接受二进制数据

下面的load_binary_resource()方法可以从指定的URL那里加载二进制数据,并将数据返回给调用者.

最为奇妙的操作在第五行,该行重写了默认的MIME类型,强制浏览器将该响应当成纯文本文件来对待,使用一个用户自定义的字符集.这样就是告诉了浏览器,不要去解析数据,直接返回未处理过的字节码.

上例从请求回来的二进制数据中得到偏移量为x处的字节.有效的偏移量范围是0到filestream.length-1. 查看 使用XMLHttpRequest下载文件 了解详情,查看下载文件.

发送二进制数据

XMLHttpRequest对象的send方法已被增强,可以通过简单的传入一个ArrayBuffer,或者 File对象来发送二进制数据. 下例创建了一个文本文件,并使用POST方法将该文件发送到了服务器上.你也可以使用文本文件之外的其他二进制数据类型.

上传完成后. }; var bb = new BlobBuilder(); // 需要合适的前缀: window.MozBlobBuilder 或者 window.WebKitBlobBuilder bb.append(\'abc123\'); oReq.send(bb.getBlob(\'text/plain\'));

将类型数组作为二进制数据发送 你可以将JavaScript类型数组作为二进制数据发送出去.

上例新建了一个512字节的8位整数数组并发送它,当然,你也可以发送任意的二进制数据

监测进度 支持 DOM 的 progress 事件监测之于 XMLHttpRequest 传输,遵循 Web API 进度事件规范 : 这些事件实现了 ProgressEvent 接口。

上传监听 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
}
}

注意: 你需要在请求调用 open() 之前添加事件监听。否则 progress 事件将不会被触发。 在上个例子中,progress 事件被指定由 updateProgress() 函数处理,并接收到传输的总字节数 total 和已经传输的字节数loaded ,total是自“Content-Length”头传输的数据的整体长度(字节)。但是如果 lengthComputable 属性的值是 false,那么总字节数是未知并且 total 的值为0,若知道长度则lengthComputable属性为true progress 事件同时存在于下载和上传的传输。下载相关事件在 XMLHttpRequest 对象上被触发,就像上面的例子一样。上传相关事件在 XMLHttpRequest.upload 对象上被触发,像下面这样:

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

注意:progress 事件在使用 file: 协议的情况下是无效的。 使用 loadend 事件可以侦测到所有的三种加载结束条件(abort、load、error): req.addEventListener("loadend",loadEnd,false); 需要注意的是,没有方法可以确切的知道 loadend 事件接收到的信息是来自何种条件引起的操作终止;但是你可以在所有传输结束的时候使用这个事件处理。

XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不需要检查readyState属性。 当调用send()时,触发单个loadstart事件。当正在加载服务器的响应时,XMLHttpRequest对象会发生progress事件,通常每隔50毫秒左右,所以可以使用这些事件给用户反馈请求的进度。 如果请求快速完成,它可能从不会触发progress事件。当事件完成,会触发load事件。 HTTP请求无法完成有3种情况,对应3种事件。如果请求超时,会触发timeout事件。如果请求中止,会触发abort事件。像太多重定向这样的网络错误会阻止请求完成,但这些情况发生时会触发error事件。 对于任何具体请求,浏览器将只会触发load、abort、timeout和error事件中的一个,还有progress事件。

支持progress事件 var request = new XMLHttpRequest(); request.onprogress = function (e) { if(e.lengthComputable){ progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; } } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/45855.html

猜你在找的JavaScript相关文章