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(){
      //...
  })