javascript网络请求

1.所有现代浏览器都通过 XMLHttpRequest 构造函数原生支持 XHR 对象：

let xhr = new XMLHttpRequest();

2.使用 XHR 对象首先要调用 open()方法。调用 open()不会实际发送请求，只是为发送请求做好准备

// 1.请求方式
// 2.url
// 3.是否异步
xhr.open("get", "example.php", false);

3.要发送定义好的请求，必须像下面这样调用 send()方法：send()方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传 null，因为这个参数在某些浏览器中是必需的。调用 send()之后，请求就会发送到服务器

xhr.send(null);

4.响应数据

• responseText：作为响应体返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应 数据的 XML
  DOM 文档。
• status：响应的 HTTP 状态。
• statusText：响应的 HTTP 状态描述。

XHR 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段。每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。这个属性有如下可能的值。

• 0：未初始化（ Uninitialized）。尚未调用 open()方法。
• 1：已打开（ Open）。已调用 open()方法，尚未调用 send()方法。
• 2：已发送（ Sent）。已调用 send()方法，尚未收到响应。
• 3：接收中（ Receiving）。已经收到部分响应。
• 4：完成（ Complete）。已经收到所有响应，可以使用了。

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    xhr.open("get", "https://www.dmagic.cn/json/?jsonid=1460", true);
    xhr.send(null);

超时
给 timeout 设置 1000 毫秒意味着，如果请求没有在 1秒钟内返回则会中断。此时则会触发 ontimeout 事件处理程序， readyState 仍然会变成 4，因此也会调用 onreadystatechange 事件处理程序。不过，如果在超时之后访问 status 属性则会发生错误。为做好防护，可以把检查 status 属性的代码封装在 try/catch 语句中

xhr.timeout = 1000; // 设置 1 秒超时
xhr.ontimeout = function() {
    alert("Request did not return in a second.");
};