详解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() 方法是一个解决方案,虽然它并不是一个标准方法。

 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 规范中新加入了 responseType 属性 ,使得发送和接收二进制数据变得更加容易。

 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类型数组接受二进制数据

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

 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++) {
   // 对数组中的每个字节进行操作
  }
 }
};
oReq.send(null);

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

 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.append(oReq.response);
 var blob = blobBuilder.getBlob("image/png");
 // ...
};
oReq.send();

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

 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;
}

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

 var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节(f7)

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

发送二进制数据

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

 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\'));

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

 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);

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

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

 var req = new XMLHttpRequest();
//上传监听
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 对象上被触发,像下面这样:

 var req = new XMLHttpRequest();
//下载监听
req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
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事件。

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

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

(0)

相关推荐

  • 如何用ajax来创建一个XMLHttpRequest对象

    我每次创建一个对象,都要这样复杂吗?如下代码: JScript code: "testAjax.htm" 文件: 复制代码 代码如下: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest();

  • js判断IE6/IE7/FF的代码[XMLHttpRequest]

    大家有的时候想在页面中加一些东东,又限于浏览器的不同,效果不尽都能表现出来,这下我们可以想到浏览器的判断,根据不同的浏览器给出不同的展示效果,是不是很炫呢?那当然,你能想到的很多人都能想的到,就好像大楚网的广告添加方法,真是让我见识到了真正的JS高手是如何练就的了,废话不说了,看代码: 复制代码 代码如下: if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert('Mozilla, Safari,IE7 '); if(!window.Ac

  • jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

    摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle

  • Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

    复制代码 代码如下: /**//// <summary> /// 生成带CDATA的节点 /// </summary> /// <param name="xDocument">XmlDocument</param> /// <param name="elementName">元素名称</param> /// <param name="cdataValue">CDA

  • XMLHTTPRequest的属性和方法简介

    而设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了.这里海啸把我学习XMLHTTPRequest对象的一点资料拿出来跟大家一起分享.文中的资料都是海啸在学习时在网上收集的,如果您开过,那就再加深下印象吧!(如果您觉得侵犯了您的版权,请联系海啸.(haixiao_yao[at]yahoo.com.cn)) 1.XMLHTTPRequest对象什么是? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过ht

  • AJAX(XMLHttpRequest.status)状态码

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async

  • Ajax xmlHttpRequest的status的值的含义

    xmlHttpRequest对象的status代表当前http请求的状态,是一个长整型数据,现在介绍一下它的含义. http请求状态及其含义表 1xx - 信息提示 100 - 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 - 服务器将遵从客户的请求转换到另外一种协议.(HTTP 1.1新) 2xx - 成功 200 - OK 一切正常,对GET和POST请求的应答文档跟在后面. 201 - Created 服务器已经创建了文档,Location头给出了它的

  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author    legend <legendsky@hotmai

  • javascript XMLHttpRequest对象全面剖析

    一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G

  • 一份老外写的XMLHttpRequest代码多浏览器支持兼容性

    这几天要构思用Javascript调用Asp.Net的WebService,需要到XMLHTTP来支持,但发现Opera的XMLHttpRequest很烂,实在支持不下去,后来到处找,终于发现这份代码,在Opera中是利用java.net.URL等类来实现的,不敢独享,特发上来与大家同乐. 复制代码 代码如下: /* Cross-Browser XMLHttpRequest v1.2 ================================= Emulate Gecko 'XMLHttp

随机推荐