XMLHttpRequest对象

XMLHttpRequest 对象基础使用

XMLHttpRequest 用于在后台与服务器交换数据。

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest ();

建立连接

使用xhr对象的open()方法建立http请求

xhr.open(method, url, async, username, password);

其中 xhr 表示 XMLHttpRequest 对象`

open() 方法包含 5 个参数，说明如下：

1. method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
2. url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
3. async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。
4. username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
5. password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

发送请求

使用xhr对象的sned()方法发送请求

xhr.send(data);

参数 data 表示将通过该请求发送的数据，如果不传递数据，可以留空或者为 null。

发送请求后，可以使用 xhr 对象的 responseBody、responseStream、responseText 或 responseXML 属等待接收响应数据。

监听响应状态

在发送请求后，readyState 属性实时反映异步响应状态，当该属性值发生变化时，会触发 readystatechange 事件，可以绑定回调函数对不同状态做相应操作。

readyState 属性值说明

如果 readyState 属性值为 4，则说明响应完毕，那么就可以安全的读取响应的数据。

考虑到各种特殊情况，更安全的方法是同时监测 HTTP 状态码，只有当 HTTP 状态码为 200 时，才说明 HTTP 响应顺利完成。

以下为示例

function ajax (url) {
      let xml = new XMLHttpRequest()
      xml.open('get', url)
      xml.send()
      xml.onreadystatechange = () => {
        if (xml.readyState === 4) {
          if (xml.status === 200) {
            console.log(xml.responseText)
          }
        }
      }
    }

中止请求

使用 abort() 方法可以中止正在进行的请求。用法如下：

xhr.onreadystatechange = function () {};  //清理事件响应函数
xhr.abort();  //中止请求

在调用 abort() 方法前，应先清除 onreadystatechange 事件处理函数，因为 IE 和 Mozilla 在请求中止后也会激活这个事件处理函数。如果给 onreadystatechange 属性设置为 null，则 IE 会发生异常，所以为它设置一个空函数。

获取 xhr 数据

XMLHttpRequest 对象通过 responseText、responseBody、responseStream 或 responseXML 属性获取响应信息，说明如下表所示，它们都是只读属性。

获取和设置头部消息

HTTP 请求和响应都包含一组头部消息，获取和设置头部消息可以使用下面两个方法。 getAllResponseHeaders()：获取响应的 HTTP头部消息。 getResponseHeader("Header-name")：获取指定的 HTTP 头部消息。

除了可以获取这些头部消息外，还可以使用 setResponseHeader() 方法在发送请求中设置各种头部消息。 例如：

xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");