简介
XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定的URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XHR在AJAX编程中大量使用。
XMLHttpRequest可以用于获取任何类型的数据，不仅仅是XML。甚至还支持除了HTTP以外的协议，如FTP
XHR对象的发展
- IE5、IE6使用的ActiveX对象
- 现代浏览器（IE7+、Firfox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。
XHR对象详解
XHR对象的构造函数XMLHttpRequest()
作用：初始化一个XMLHttpRequest实例对象。
语法：const request = new XMLHttpRequest()
XHR对象中的常用属性
| 方法 | 作用 | 注意 |
|---|---|---|
| xhr.onreadystatechange | handle函数，在send之前设置 只要readyState属性发生变化，就会触发相应的处理函数 |
当调用abort()方法时，对应的readystatechange事件不会触发 |
| xhr.readyState | 只读属性，返回XMLHttpRequest代理当前所处的状态 | |
| xhr.status | 只读属性，返回XMLHttpRequest响应中的数字状态码 | status是标准的HTTP状态码 请求完成前或XMLHttpRequest出错，status为0 |
| xhr.statusText | 只读属性，返回一个DOMString类型的文本 | 与status一一对应 |
| xhr.response | 只读属性，返回响应的正文 | 返回的类型有多种，ArrayBuffer、Blob等 取决于responseType的值 |
| xhr.responseText | 只读属性，与response类似，只不过是文本形式 | responseType为""或“text"时，此值有效 |
| xhr.responseType | 只读属性，返回响应数据的类型 | 默认值为text，取值有：blob、arraybuffer、json 在请求send之前设置 |
| xhr.responseUrl | 请求的url信息 | |
| xhr.responseXML | 只读属性，包含请求的响应 | responseType为""或“document"时，此值有效 |
| xhr.timeout | 设置超时时间 | 默认值为0，没有超时 |
readyState的状态
图片.png
XHR对象中的常用方法
| 方法 | 作用 | 语法 |
|---|---|---|
| xhr.open() | 初始化一个请求 | open(method, url [,async, user, password]) method：HTTP方法 url：请求的URL async：是否异步执行【默认为true】 user：用户名【默认null】 密码【默认null】 |
| xhr.setRequestHeader() | 设置HTTP请求头 | setRequestHeader(header, value) header：属性的名称 value：属性的值 Accept的默认值为： */*
|
| xhr.send() | 发送HTTP请求 | send([body]) body：发送的数据体 |
| xhr.abort() | 将终止该请求，当请求被终止后， readyState设置为XMLHttpRequest.UNSENT status设置为0 |
abort() |
| xhr.getResponseHeader() | 返回指定响应头文本的字符串 | getResponseHeader(name) name：报文项名称 |
| xhr.getAllResponseHeaders() | 返回当前请求的所有响应头 | getAllResponseHeaders() |
XHR对象中的事件
所有的浏览器都支持onreadystatechange事件。
| 事件 | 对应属性 | 作用 |
|---|---|---|
| abort | onabort | XMLHttpRequest被停止时触发 |
| loadstart | onloadstart | 接收到响应数据时触发 |
| load | onload | XMLHttpRequest请求成功完成时触发 |
| error | onerror | XMLHttpRequest遭遇错误时触发 |
| loadend | onloadend | XMLHttpRequest请求结束时触发【无论load、abort、error】 |
| progress | onprogress | 当请求接收到更多数据时，周期性的触发 |
| timeout | ontimeout | 在预设时间内没有接收响应时触发 |
事件的实现可以通过对象（EventTarget）中的addEventListener()和removeEventListener()实现事件的注册和删除。也可以直接操作on属性直接定义回调函数。
XHR的使用流程
XMLHttpRequest发起HTTP请求如下图所示：
图片.png
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8848/api/index/adminlogin?username=admin&password=admin&code=z3hr&remember=on", true);
xhr.onloadstart = function() {
console.log("loadstart", xhr.readyState)
}
xhr.onload = function() {
console.log("load", xhr.readyState)
}
xhr.onloadend = function() {
console.log("loadend", xhr.readyState)
}
xhr.onprogress = function() {
console.log("loading", xhr.readyState)
}
xhr.onreadystatechange = function() {
console.log("onreadystatechange" + xhr.status)
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.dir("onreadystatechange" + xhr)
}
}
xhr.send();
