XMLHttpRequest Level2使用指南

saltire
364 阅读7分钟

概要

XMLHttpRequest Level2在日常工作中属于必备使用技术，但是很多关于它的细节问题却是模糊，这篇专题详细阐述XMLHttpRequest Level2的一些细节问题

  1. 老版本的XMLHttpRequest对象
  2. 老版本的缺点
  3. 新版本的功能
  4. HTTP请求的时限
  5. FormData对象
  6. 上传文件
  7. 跨域资源共享（CORS）
  8. 接收二进制数据（方法A：改写MIMeTYpe)
  9. 接收二进制数据（方法B：responseType属性）
  10. 进度信息
  11. XMLHttpRequest对象的一系列事件总结

老版本的XMLHttpRequest对象

在介绍新版本之前，我们先回顾一下老版本的用法。

首先，新建一个XMLHttpRequest的实例。

var xhr = new XMLHttpRequest();

然后，向远程主机发起一个HTTP请求

xhr.open("GET", 'exmaple.php');

xhr.send();

接着就等待远程主机做出响应，这时需要监控XMLHttpRequest对象的状态变化，指定回调函数。

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    } else {
        alert(xhr.statusText);
    }
}

上面的代码中包含了老版本XMLHttpRequest对象的主要属性：

xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。

xhr.status：服务器返回的状态码，等于200表示一切正常

xhr.responseText：服务器返回的文本数据

xhr.responseXML：服务器返回的XML格式的数据

xhr.statusText：服务器返回的状态文本

老版本的缺点

老版本的XMLHttpRequest对象有以下几个缺点：

只支持文本数据的传送，无法用来读取和上传二进制文件

传送和接受数据时，没有进度信息，只能提示有没有完成

受到同源限制的影响，只能向同一域名的服务器请求数据，针对同源限制，没有解决方案

新版本的功能

新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进。

可以设置HTTP请求的时限

可以使用FormData对象管理表单数据

可以上传文件

可以请求不同域名下的数据（跨域请求）

可以获取服务器端的二进制数据

可以获得数据传输的进度信息

下面，逐一介绍这些功能

HTTP请求的时限

有时，ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久，关键是还没结果。

新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限。

xhr.timeout = 3000;

上面的语句，将最长等待时间设为3000毫秒。过了这个期限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。

xhr.ontimeout = function(event){
    alert('请求超时！');
}

FormData对象

ajax操作往往用来传递表单数据，为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单，首先，新建一个FormData对象。

var formData = new FormData();

然后，为它添加表单项。

formData.append("username", "张三");

formData.append("id", 123456);

// 这里的fileObj是一个File对象或者是Blob对象
formData.append("file", fileObj);

最后，直接发送这个FormData对象。与提交网页表单的效果，完全一样，但是使用上比真实的表单方便太多。

xhr.send(formData);

FormData对象也可以用来获取网页表单的值,在初始化FormData对象时，支持传入from节点元素。

var form = document.getElementById("myform");

var formData = new FormData(form);

formData.append('secret', '123456');

xhr.open("POST", form.action);

xhr.send(formData);

上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

假定files是一个选择文件的表单元素（input[type="file"]），我们将它append进FormData对象

var formData = new FormData();

for(var i = 0; i < files.length; i++){
    formData.append('files' + i, files[i]);
}

然后，发送这个FormData对象。

xhr.send(formData);

跨域资源共享（CORS）

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求，这叫做跨域资源共享（Cross-origin resource sharing，简称CORS）。

使用跨域资源共享的前提，是浏览器必须支持这个功能，而且服务器必须同意这种跨域。如果能满足上面的条件，则代码的写法与不跨域的请求完全一样。

xhr.open('GET', 'http://others.server/and/path/to/script');

截止目前，主流浏览器都支持CORS。服务器端的设置，请参考服务器端设置

接收二进制数据（方法A：改写MIMeTYpe）

老版本的XMLHttpRequest对象，只能从服务器取回文本数据（否则它的名字就不用以XML开头了），新版本则可以取回二进制数据。

这里又分为两种做法。较老的做法是改写数据的MIMEType，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集。

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

然后，用responseText属性接收服务器返回的二进制数据。

var binStr = xhr.responseText;

由于这时，浏览器把它当做文本数据，所以还必须再一个一个字节的换成成二进制数据。

for ( var i = 0;  i < binStr.length; i++ ){
    var c = binStr.charCodeAt(i);
    var byte = c & 0xff;
}

最后一行的位运算c & 0xff，表示在每个字符的两个字节之中，只保留后一个字节，将前一个字节扔掉，原因是浏览器解读字符的时候，会把字符自动二季度成Unicode的0xF700-0xF7ff区段。

接收二进制数据（方法B：responseType属性）

从服务器取回二进制数据，较新的方法是使用新增的responseType属性，如果服务器返回文本数据，这个属性的值是TEXT，这是默认值。较新的浏览器还支持其他值，也就是说，可以接收其他格式的数据。

你可以将responseType改为blob，表示服务器传回的是二进制对象。

var xhr = new XMLHttprequest();

xhr.open("GET", "/path/to/image.png");

// 设置responseType必须在open方法调用之后
xhr.responseType = 'blob';

注意，是读取xhr.response，而不是xhr.responseText。

你还可以将responseType设为arraybuffer，把二进制数据装在一个数组里

var xhr = new XMLHttpRequest();

xhr.open("GET", "/path/to/image.png");

xhr.responseType = 'arraybuffer';

接收数据的时候，需要遍历这个数组。

var arraybuffer = xhr.response;

if (arraybuffer) {
    var byteArray = new Unit8Array(arraybuffer);
    
    for (var i = 0;  i < byteArray.byteLength; i++) {
        // do something
    }
}

更详细的讨论，请看Sending and Receiving Binary Data

进度信息

新版本的XMLHttpRequest对象，传递数据的时候，有一个progress事件，用来返回进度信息。

它分为上传和下载两种情况，下载的preogress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

我们先定义preogress事件的回调函数。

xhr.onprogress = updateProgress;

xhr.upload.onprogress = updateProgress;

然后，在回调函数里面，使用这个事件的一些属性。

function updateProgress(event) {
    if (event.lengthComputable){
        var percentComplete = event.loaded / event.total;
    }
}

与progress事件相关的，还有其他五个事件，可以分别指定回调函数：

load事件：传输成功完成

abort事件：传输被用户取消

error事件：传输中出现错误

loadstart事件：传输开始

loadEnd事件：传输开始，但是不知道成功还是失败

XMLHttpRequest对象的一系列事件总结

XMLHttpRequest对象使用的事件都是来自XMLHttpRequest接口规范，它是W3C的一个草案，定义了客户端与服务器通信相关的事件，有如下七个进度事件

1、 abort：因为调用abort()方法而终止连接时触发

2、 error：在请求发生错误时触发

3、 load：在接收到完整的响应数据时触发

4、 loadend：在通信完成或者触发error、abort、或load事件后触发

5、 loadstart：在接收到响应数据的第一个字节时触发，是这七个中最先被触发的事件

6、 progress：在接受响应期间持续不断的触发，并且触发时机在loadstart之后

7、 timeout：在规定的时间内浏览器还没有接收到响应时触发

每个请求都是从触发loadstart时开始，接下来，通常每隔50毫秒左右触发一次progress事件，然后触发load、error、abort、或者tiimeout事件中的一个，最后以触发loadend事件结束。

对于任何具体请求，浏览器将只会触发load、abort、timeout、和error事件中的一个，XMLHttpRequest level2规范指出：一旦这些事件中的一个发生后，浏览器应该触发loadend事件

load事件在接收到完整的响应数据时触发，那么就没有必要监听readystatechange事件了，并且只有完整的接受到数据时才会触发，因此也没有必要再去检查readyState属性了。

avatar
文章
阅读
粉丝