xhr |XMLHttpRequest是什么？

XMLHttpRequest

XMLHttpRequest（XHR）是一个用于与服务器交互的对象，在AJAX编程中被大量使用。

它有如下特点：

• 可在不刷新页面的情况下请求特定 URL获取数据
• 可以用于获取任何类型的数据
• 支持 HTTP 以外的协议（包括 file:// 和 FTP）

如果您的通信流程需要从服务器端接收事件或消息数据，请考虑通过 EventSource 接口使用 server-sent events。对于全双工的通信， WebSocket 可能是更好的选择

简单示例

let xhr = new XMLHttpRequest(); //1. 创建xml对象
xhr.open('GET', 'https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum');//2. 初始化请求
xhr.send();//3. 发送请求
xhr.onload = function() {//4. onload表示当请求正确并成功返回数据时调用
    console.log(JSON.parse(this.response))
    let num=JSON.parse(this.response).data.number
    document.body.innerHTML=num
};

构造函数

XMLHttpRequest()——用于初始化一个 XMLHttpRequest 实例对象。在调用其他方法之前，必须先调用该构造函数或通过其他方式得到一个实例对象

const xhr = new XMLHttpRequest();

属性

• readyState——只读| 返回一个 XMLHttpRequest 当前所处的状态

  var xhr = new XMLHttpRequest();		// readyState 为 0
  xhr.open('GET', '/api', true); 		// readyState 为 1
  xhr.send();					// readyState 为 2
  xhr.onprogress = function () {...}          // readyState 为 3
  xhr.onload = function () {...}		// readyState 为 4
  

  readysatte	状态描述	说明
  0	UNSENT	代理（XHR）被创建，但尚未调用open()
  1	OPENED	open()已经被调用，建立了连接
  2	HEADERS_ RECEIVED	send()已经被调用，并且已经可以获取状态行和响应头
  3	LOADING	响应体下载中，responseText属性可能以及包含部分内容
  4	DONE	响应体下载，可以直接使用responseText

• onreadystatechange——当 readyState 属性发生变化时调用

  var xhr = new XMLHttpRequest();	
  xhr.open(method, url, true);
  xhr.send()	
  xhr.onreadystatechange = function () {...}
  

• 其他只读属性：

  var xhr =new XMLHttpRequest()
  xhr.open('GET','url')		
  xhr.send()										
  xhr.onload=function(){
      console.log(this.response)			//获取响应的正文
      console.log(this.responseText)		//获取文本格式的响应体
      console.log(this.responseXML)		//XML格式的响应体
      console.log(this.status)			//获取响应状态码
      console.log(this.statusText)		//获取响应状态描述
  }
  

方法

var xhr =new XMLHttpRequest()
xhr.open('GET','url')	//初始化一个请求
xhr.send()				//发送请求
xhr.abort()				//终止请求
xhr.setRequestHeader("Accept","text/plain")			//设置请求头
xhr.onload=function(){
    console.log(this.getAllResponseHeaders())			//获取全部响应头
	console.log(this.getResponseHeader("Content-Type"))	//获取指定响应头
}

事件

var xhr =new XMLHttpRequest()
xhr.onabort = function () {...};//请求中断时调用，接受 `abort` 对象作为参数
xhr.onerror = function () {...};//请求发生错误时调用，接受 `error` 对象作为参数
xhr.onload = function () {...};//当请求正确加载出内容并返回时调用，接受 `load` 对象作为参数
xhr.onloadstart = function () {...};//当请求开始加载数据时调用，接受 loadstart 对象作为参数
xhr.onprogress = function () {...};//获取请求过程中的信息，接受 `progress` 对象作为参数

EventTarget

什么是EventTarget？

EventTarget是一个 DOM 接口，由可以接收事件并且可以创建侦听器的对象实现。Element，document，window是最常见的 EventTarget ； XMLHttpRequest等对象也可以作为EventTarget。EventTarget有如下方法。换言之，XMLHttpRequest对象可以使用如下方法：

• addEventListener()——注册特定事件类型的事件处理程序

  //语法：
  target.addEventListener(type, listener, options);
  target.addEventListener(type, listener, useCapture);
  
  //参数：
  1.type：表示监听类型的字符串
  2.listener：监听的事件类型触发是调用，可以是函数
  3.options：指定有关 listener 属性的可选参数对象。(可选)
    -capture:布尔值，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
    -once:布尔值，表示 listener 在添加之后最多只调用一次。为true时会在其被调用之后自动移除
    -passive:布尔值，设置为true时表示 listener 永远不会调用 preventDefault()
  4.useCapture 布尔值，为true时表示启动捕获事件
  

• removeEventListener()——删除事件侦听器

  //语法：
  target.removeEventListener(type, listener[, options]);
  target.removeEventListener(type, listener[, useCapture]);
  

• dispatchEvent()——将事件分派到此EventTarget

• 一个例子

  var xhr=new XMLHttpRequest()	
  xhr.open('GET',"url")			
  xhr.send()					
  xhr.addEventListener('readystatechange',function(){
      //...
  })