XHR对象

一、创建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 } })