一、创建XMLHttpRequest对象

IE9及以上

var xhr = new XMLHttpRequest()

IE9以下

var xhr = new ActiveXObject('Mricosoft.XMLHTTP')

二、XHR请求

`.open()`

规定请求的类型、URL以及是否异步处理请求

xhr.open(method, url, async)

method：必需。请求的类型：GET(get)、POST(post)
url：必需。api请求地址
async：可选。true（异步）、false（同步）

xhr.open('get',/api/search,true)

`.send()`

将请求发送到服务器

xhr.send(string)

string：可选。仅用于POST请求

get发送参数

xhr.open('GET'，'/api/search?a=0&b=1&c=2', true)
xhr.send( )

post发送参数

xhr.open('POST', /api/search, true) 
xhr.send('a=0&b=1&c=2')                       // URLSearchParams 参数 
xhr.send(JSON.stringify( { a:0, b:1 } ))      // JSON 字符串参数

三、XHR响应

`response`

返回响应的正文，返回的类型为ArrayBuffer 、Blob 、Document、JavaScriptObject、DOMString中的一个，这取决于 responseType 属性。

语法

const body = xhr.response

示例

xhr.open('GET', /api/search, true)
xhr.send( )
const body = xhr.response

四、XHR状态

`readyState`

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化
每当 readyState 改变时，就会触发 onreadystatechange 事件

const state = xhr.readyState

readyState 的值

0  UNSENT		:请求未初始化（代理被创建，但尚未调用 open( ) 方法）
1  OPENED		:服务器连接已建立（open( )方法已经被调用）
2  HEADERS_RECEIVED	:请求已接收（send( )方法已经被调用，并且头部和状态已经可获得）
3  LOADING		:请求处理中（下载中；responseText 属性已经包含部分数据）
4  DONE			:请求已完成，且响应已就绪（下载操作已完成）

示例

xhr.onreadystatechange(function( ){
	if(xhr.readyState === 4){
		const data = xhr.responseText
	}
	if(this.readyState === 4){
		const data = this.responseText
	}
})

`status`

返回请求结果

const status = xhr.status

status 的值

200 : OK，请求成功
400 : 未找到页面
500 : 服务器错误

示例

xhr.onreadystatechange(function( ){
	if(xhr.status === 200){
		const data = xhr.responseText
	}
	if(this.status === 200){
		const data = this.responseText
	}
})