初识XMLHTTPRequest

提到Ajax，就不得不提XMLHttpRequest对象。它可以让我们从指定的URL中获取数据，而不必让整个页面刷新，也就是说可以只更新网页的局部。

对象的构造

构造函数：

• XMLHttpRequest()：构造函数初始化一个 XMLHttpRequest 对象。必须在所有其他方法被调用前调用构造函数。

例如：

let xhr = new XMLHttpRequest();

常用属性

onreadystatechange

这是一个回调函数，会在XMLHttpRequest的readyState属性发生改变时触发readystatechange事件的时候被调用。

readyState

readyState属性代表了XMLHttpRequest对象当前所处的状态。不同的属性值代表了不同状态，如下

值	状态	描述
0	UNSENT	代理被创建，但尚未调用open方法
1	OPENED	open方法已被调用
2	HEADERS_RECEVIED	send方法已被调用，并且头部和状态已经可得
3	LOADING	下载中，respoenseText属性已经包含部分数据
4	DONE	下载操作已完成

respoenseText

返回一个DOMString，该DOMString包含对请求的响应，如果请求未成功或尚未发送，则返回null。

responseType

是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

responseXML

返回一个包含请求检索的HTML或XML的Document，如果请求未成功、尚未发送，或者检索的数据无法正确解析为XML或 HTML，则为null。

status

返回了XMLHttpRequest响应中的数字状态码。status的值是一个无符号短整型。在请求完成前，status的值为0。值得注意的是，如果XMLHttpRequest出错，浏览器返回的status也为0。

常用方法

open()方法

初始化一个请求。

let xhr = new XMLHttpRequest();
xhr.open(method, url, async, user, password);

参数

• method：要使用的HTTP方法，如GET、POST、PUT等
• url：表示将要请求的URL
• async：可选值，默认为true。表示要不要进行异步操作。如果值为false，则为同步，反之则为异步。
• user：可选值。用于认证用途；默认为null
• password：可选值。用于认证用途，默认为null。

send()方法

该方法用于发送HTTP请求。如果为异步请求，则此方法在发送完之后会立即返回，而若为同步，则会阻塞至响应到达后才会返回。

XMLHttpRequest.send()方法接受一个可选的参数，其作为请求主体；如果请求方法是GET或者HEAD，则应将请求主体设置为null。

例子

let xhr = new XMLHttpRequest(); //构造XMLHttpRequest实例对象
xhr.open('GET', '/', true); //初始化一个请求
xhr.onreadystatechange = function(){
    if(XMLHttpRequest.DONE === xhr.readyState && xhr.status === 200){
        console.log(xhr.respoenseText);
    }
}
xhr.send(null); //发送Http请求