XHR(XMLHttpRequest)

简介

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();