MLHttpRequest簡介

XMLHttpRequest是由微軟提出的一個API接口，目的是為客戶端提供與服務器之間傳輸數據的功能。XMLHttpRequest的特點是可以按需請求、局部刷新，不僅提高了服務器響應速度還可以避免不必要的寬帶浪費。XMLHttpRequest提供了一個通過URL來獲取數據的簡單方式，通過它可以很容易的獲取到URL上所有類型的資源數據。

XMLHttpRequest是什么

XMLHttpRequest 是一個JavaScript對象，得到了所有現代瀏覽器（Chrom、IE7+、Firefox、Safari 以及 Opera等）較好的支持并內建了XMLHttpRequest 對象，它定義了很多方法和屬性方便用戶配置發送各種請求。比如說可以設置請求的超時時間、獲取請求進度信息、設置請求數據類型等，發送GET、POST、DELETE、HEAD、PUT等各種HTTP請求。

XMLHttpRequest對象方法

XMLHttpRequest對象創建可以通過new XMLHttpRequest()來實現，一個請求的實現至少需要使用open和send方法的使用。XMLHttpRequest支持以下幾種方法，需要注意的是setRequestHeader()方法指定了HTTP請求的頭部信息，需要在請求初始化之后發送之前定義。

XMLHttpRequest對象屬性

onreadystatechange是一個事件句柄函數，當readyState屬性發生變化時被調用以改變XMLHttpRequest 的狀態。我們可以通過獲取該對象的屬性來分析請求的狀態并做出相應的操作決策，也可以幫助開發者快速定位錯誤因素。

XMLHttpRequest監聽事件

XMLHttpRequest對象提供了一系列監聽事件來獲取請求的當前狀態，每個請求都以loadstart事件開始，以 loadend 事件結束。在這兩個事件中間可以注冊響應的監聽事件來獲取傳輸的狀態，比如通過onprogress獲取上傳文件的進度，那么我們就可以注冊一個onprogress 事件來監聽當前進度。

xhr.upload.onprogress=e=>{
  if (e.lengthComputable) {
　　　　var progress=e.loaded / e.total;
　　}
}

發送GET請求接收二進制數據

這里我寫了一個簡單的頁面載入時發送一個請求的示例，通過GET方法來獲取后臺的文件。在發送請求時可以設置一些請求頭部信息，比如content-type、connection、cookie等信息。xhr提供了setRequestHeader來允許我們修改請求頭部信息，第一個參數為請求頭參數，第二個參數為對應的參數值。我們還可以指定接受返回的數據類型，xhr可以通過responseType屬性指定數據類型為blob。老版本的 Internet Explorer不支持 XMLHttpRequest 對象，所以我們先檢查瀏覽器是否支持 XMLHttpRequest 對象，如果不支持的話可以創建 ActiveXObject 對象。

發送POST請求上傳文件

XMLHttpRequest新增formData對象，不僅可以發送文本數據還可以上傳文件。這里我嘗試實現文件上傳功能，將二進制文件追加到formData對象，在發送的時候我們將formData對象提交即可。

JavaScript中，你可以使用`fetch` API或者`XMLHttpRequest`對象來發送HTTP請求。以下是兩種方法的示例：

**使用fetch API發送HTTP請求**

fetch API是現代瀏覽器中推薦使用的方法，因為它提供了更簡潔的API，并且支持跨域請求。

```javascript

fetch('https://api.example.com/data', {

method: 'GET', // 或者 'POST'

headers: {

'Content-Type': 'application/json',

},

})

.then(response=> response.json()) // 解析響應數據為JSON

.then(data=> console.log(data)) // 在控制臺打印數據

.catch((error)=> console.error('Error:', error)); // 捕獲錯誤并打印

```

**使用XMLHttpRequest發送HTTP請求**

如果你需要更多的控制權，或者在舊的瀏覽器中使用，你可以使用`XMLHttpRequest`對象。但是請注意，由于瀏覽器的同源策略，`XMLHttpRequest`通常僅用于同一域的請求。

```javascript

var xhr=new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange=function () {

if (xhr.readyState==4 && xhr.status==200)

console.log(JSON.parse(xhr.responseText));

}

xhr.send();

```

以上兩種方法都可以發送HTTP請求，但請注意，由于安全性和隱私性的考慮，通常建議盡可能使用fetch API進行跨域請求。此外，請確保服務器已經正確配置了HTTP頭信息以允許跨域請求。

MLHTTPrequest 對象

Ajax 的核心是 JavaScript 對象 XmlHTTPRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHTTPRequest 使您可以使用 JavaScript 向服務器提出請求并處理響應，而不阻塞用戶。通過 XMLHTTPRequest 對象，Web 開發人員可以在頁面加載以后進行頁面的局部更新。

方法

open(String method,String url,boolean asynch,String username,String password)

send(content)

setRequestHeader(String header,String value)

getAllResponseHeaders()

getResponseHeader(String header)

abort()

常用詳細解析

open()：該方法創建 HTTP 請求

第一個參數是指定提交方式(post、get)

第二個參數是指定要提交的地址是哪

第三個參數是指定是異步還是同步(true 表示異步，false 表示同步)

第四和第五參數在 HTTP 認證的時候會用到，是可選的。

setRequestHeader(String header,String value)：設置消息頭（使用 post 方式才會使用到，

get 方法并不需要調用該方法）。

xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send(content)：發送請求給服務器

如果是 get 方式，并不需要填寫參數，或填寫 null，如果是 post 方式，把要提交的參數寫上去。

常用屬性

onreadystatechange：請求狀態改變的事件觸發器（readyState 變化時會調用此方法），一般用于指定回調函數。

readyState：請求狀態 readyState 一改變，回調函數被調用，它有 5 個狀態：

0：未初始化

1：open 方法成功調用以后

2：服務器已經應答客戶端的請求

3：交互中。HTTP 頭信息已經接收，響應數據尚未接收。

4：完成。數據接收完成

responseText：服務器返回的文本內容

responseXML：服務器返回的兼容 DOM 的 XML 內容

status：服務器返回的狀態碼

statusText：服務器返回狀態碼的文本信息

回調函數是什么

回調函數就是接收服務器返回的內容！