XMLHttpRequest对象

（一）什么是XMLHttpRequest对象

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

（二）XMLHttpRequest对象的作用

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

XMLHttpRequest()对象的优点：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

（三）XMLHttpRequest对象的使用

1、创建XMLHttpRequest对象实例

var xhr = new XMLHttpRequest();

2、open()方法初始化 HTTP 请求参数

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

method: 是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。（大小写不敏感）

POST：用"POST"方式发送数据,数据量最大为4MB；
GET：用"GET"方式发送数据,数据量最大为256KB；

url： 请求的主体，大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

async： 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。
如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
**username, password：**username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
举例：

xhr.open('GET', '/url', true);

3、send()方法

参数为请求主体发送的数据，为必填项，当不需要发送数据时，使用null。

// 可发送的数据
xhr.send();
xhr.send(ArrayBuffer data);
xhr.send(ArrayBufferView data);
xhr.send(Blob data);
xhr.send(Document data);
xhr.send(DOMString? data);
xhr.send(FormData data);

4、设置自定义请求头setRequestHeader()方法

向一个打开但未发送的请求设置或添加一个 HTTP 请求。
setRequestHeader(name, value)
name 参数是要设置的头部的名称。（这个参数不应该包括空格、冒号或换行）
value 参数是头部的值。（这个参数不应该包括换行）

方法要写在open()方法后，send()方法之前才可以。

5、请求为异步的，可检测XMLHttpRequest对象的readystate属性来判断当前阶段

• 0 表示未初始化，尚未调用open()方法
• 1 启动，已经调用open()方法，还未调用send()
• 2 发送，已经调用send()方法，但未收到响应
• 3 接收，收到部分响应
• 4 完成，已经收到全部的响应数据，且可以在客户端使用了

可使用onreadyStateChange事件监听状态变化，注意为保证兼容性，要在open方法之前使用。

6、abort()方法：接收到响应之前，取消异步请求

调用这个方法后，XMLHttpRequest对象会停止触发事件，且不再允许访问任何与响应有关的对象属性。

7、getResponseHeader() 方法与getAllResponseHeaders()

getResponseHeader() 参数为头部字段的名称，可获取指定头部字段的值。
getAllResponseHeaders() 获取一个包含所有头部信息的长字符串。

有了已上的知识，再去了解ajax，就比较好理解。