XMLHttpRequest

AJAX 步骤

1. 创建 XMLHttpRequest 实例
2. 发出 Http 请求
3. 接收服务器传回的数据
4. 更新网页数据

XMLHttpRequest 实例属性

• readyState：返回一个整数，表示实例对象的当前状态
  0，表示 XMLHttpRequest 实例已经生成，但实例的 open() 方法还没有被调用
  1，表示 open() 方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的 setRequestHeader() 方法，设定 HTTP 请求的头信息
  2，表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到
  3，表示正在接收服务器传来的数据体（body部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串，responseText 就会包含已经接收到的部分
  4，表示服务器返回的信息已经完全接收，或者本次请求已经失败

• onreadystatechange：指向一个监听函数，readystatechange 事件发生时，就会执行这个属性。如果使用abort 方法，终止 XMLHttpRequest 请求，也会造成 readyState 属性变化，下面是一个例子：

  const  xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://example.com', true);
  xhr.onreadystatechange = function () {
    if (xhr.readystate !== 4 || xhr.status !== 200) {
        return;
    }
    console.log(xhr.responseText)
  }
  xhr.send()

• response 服务器返回的数据体

• responseType 服务器返回数据的类型

• responseText 从服务器接收的字符串

• responseXML 从服务器接收的 XML 或 HTML 文档

• responseURL 发送数据的服务器网址

• status HTTP 响应状态码

• statusText HTTP 响应状态码文字描述

• timeout 请求时间限制

• ontimeout timeout 的监听事件

事件监听属性

• onloadstart （HTTP 请求发出）的监听函数
• onprogress （正在发送和加载数据）的监听函数
• onabort 请求中止，比如用户调用了abort()方法）的监听函数
• onerror （请求失败）的监听函数
• onload （请求成功完成）的监听函数
• ontimeout （用户指定的时限超过了，请求还未完成）的监听函数
• onloadend（请求完成，不管成功或失败）的监听函数

withCredentials

这是一个布尔值，表示跨域请求时，用户信息（如Cookie和认证的HTTP头信息）是否会包含在请求之中，默认为 false
如果需要跨域 AJAX 请求发送 Cookie， 需要设置 withCredentials 为 true，同源请求不需要。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.withCredentials = true;
xhr.send(null);

为了让这个属性生效，服务器必须显式返回 Access-Control-Allow-Credentials 这个头信息

upload

可以获得一个监听上传文件的对象，主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout

实例方法

open

用于指定 HTTP 请求的参数

• method HTTP 动词方法，如 GET，POST，PUT，DELETE，HEAD
• url：表示请求发送目标 URL
• async：布尔值，表示请求是否异步

send

用于实际发出 HTTP 请求

setRequestHeader

用于设置浏览器发送的 HTTP 请求的头信息

overrideMImeType

指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器有不一样的处理。

getResponseHeader

返回 HTTP 头信息指定字段的值

getAllResponseHeaders

表示服务器发来的所有 HTTP 头信息

abort

终止已经发出的 HTTP 请求

本作品采用《CC 协议》，转载必须注明作者和本文链接