谈谈对XMLHTTPRequest Level 2的理解

少年不酷不帅 2019-07-01

要想了解XMLHTTPRequest Level 2,首先得回顾一下XMLHTTPRequest对象。

什么是XMLHTTPRequest

XMLHTTPRequest是一个由浏览器提供的接口,用于客户端和服务器之间传输数据,它是ajax的核心,使ajax能够实现异步请求。

XMLHTTPRequest Level 1的属性、方法及使用

首先,创建一个XMLHTTPRequest

var xhr = new XMLHTTPRequest();

然后,初始化一个http请求并发送,指明请求方法、地址和是否异步,true为异步,第三个参数可以不填,默认是true。

xhr.open('GET', URL, true);
xhr.send();

最后,用onreadystatechange函数监控readyState状态变化,编写回调函数。

readyState是xhr的属性,表示当前的请求状态,一共有5个值:
0 - xhr对象已经创建,open( )方法还未调用;
1 - open( )方法已调用,send( )还未调用;
2 - send( )方法被调用,响应头和响应状态已经返回;
3 - 响应数据正在下载中;
4 - 请求完成,不管是否请求成功;
每当readyState变化的时候,都会触发onreadystatechange,并获得当前状态。

其他属性:

  1. responseXML表示服务器返回的XML格式的数据
  2. responseText表示服务器返回的文本
  3. statusText表示服务器返回的响应状态说明
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var responseText = xhr.responseText;
    } else {
        var statusText = xhr.statusText;
    }
};

XMLHTTPRequest Level 1的缺点

  • 只支持文本格式传送,不能传输或者读取二进制文件;
  • 不能跨域请求数据;
  • 只能获取到状态值,不能获取具体的进度;

XMLHTTPRequest Level 2

IE5首先引进了XMLHTTPRequest接口,由于它的异步请求,获取数据不用刷新整个页面,使得它都到了广泛应用,其他浏览器也都支持了它。但XMLHTTPRequest一直没有得到标准化,直到HTML5概念形成后,W3C提出了XMLHttpRequest Level 2草案。它针对老版的缺点进行了改进,支持了更多的功能。

XMLHTTPRequest Level 2的改进和具体使用方法

  1. 支持文件格式的传输:
    HTML5新增了一个FormData对象,通过访问FormData可以编辑表单数据:

    var formData = new FormData(); // 创建一个FormData对象
    formData.append(Key, Value); // 通过append()方法插入一个表单数据

    通过这个对象,就可以实现文件格式的传输:

    var formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);
  2. 支持读取服务器端的二进制数据:

    var xhr = new XMLHttpRequest();
    xhr.open(Method, URL);
    xhr.responseType = 'blob'; // 通过responseType属性表示接瘦的是一个二进制对象
  3. 支持设置HTTP请求超时时间:
    通过timeout属性设置超时时间,超过该时间,没有完成请求,触发ontimeout方法。Opera、Firefox和IE10支持该属性,IE8、IE9是由XDomainRequest对象支持该属性。

    xhr.timeout = 5000;
    xhr.ontimeout = function(e) {
        alert('请求超时!');
    }
  4. 支持获取当前的传输进度:
    传输数据时,由progress事件返回进度信息,分为上传和下载,下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。

    xhr.onprogress // 下载的progress事件
    xhr.upload.onprogress // 上传的progress事件

    定义回调函数:total是需要传输的总字节,loaded是已经传输的字节,如果lengthComputable值为false,total为0

    function updateProgress(event) {
        if (event.lengthComputable) {
            var progress = event.loaded / event.total;
        }
    }
    xhr.onprogress = updateProgress;
    xhr.upload.onprogress = updateProgress;
  5. 支持跨域请求:
    跨域请求的前提是浏览器必须支持这个功能,而且服务器端必须同意跨域,如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。除了IE8、IE9不支持,其他主流浏览器都支持。

    xhr.open(Method, URL);

相关推荐

80477204 / 0评论 2016-01-28