谈谈对XMLHTTPRequest Level 2的理解

2024年3月7日 235次阅读 来源: 猪九咩

要想了解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);
    原文作者：猪九咩
    原文地址: https://segmentfault.com/a/1190000018467506
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞