前言

在 Ajax 出現之前，網頁想要和服務器通信，最常用的方式是使用 form 表單；用戶提交表單后，瀏覽器就開始跳轉，服務器接收表單并處理，然后將新的網頁返回給瀏覽器；整個過程用戶都只有等待，用戶之前的操作狀態會丟失，并且服務器返回的新網頁常常和之前網頁的大部分內容相同，浪費帶寬；可見，使用表單來進行網頁和服務器的交互，會做很多無謂的工作，浪費資源，用戶體驗還差。

Ajax 是 Asynchronous JavaScript and XML(異步的 JavaScript 與 XML 技術)的縮寫，并不是 JavaScript 的一部分，而是網頁與服務器通信的一系列技術的總稱。網頁使用 Ajax 與服務器通信，可以規避上述 form 表單存在的問題，頁面不會刷新，用戶不用等待請求的返回，可以繼續在我們的網頁上“沖浪”。第一個大規模使用 Ajax 的網頁應用是 Gmail，Gmail 的出現讓大家意識到網頁還能這么玩，網頁也能做得像桌面應用一樣，打破了大家對網頁應用的認知，可以說 Ajax 為 web 技術注入了靈魂。

使用

瀏覽器為我們提供了 XMLHttpRequest 對象(低版本 IE 使用 ActiveXObject 對象)，讓我們能夠方便地使用 Ajax。下面我們就用 Ajax 來和服務器打聲招呼：

var xhr// 實例化一個 XMLHttpRequest 對象if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE 6及以下 xhr = new ActiveXObject("Microsoft.XMLHTTP");}// 綁定 xhr.readyState 改變時調用的回調xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText) console.log('請求成功') } else { console.log('請求錯誤') } }}// 初始化請求xhr.open('GET', '/api/hello');// 設置請求頭(可選)xhr.setRequestHeader('Accept', '*/*')// 發出請求xhr.send();

可見，發送一個最簡單的 Ajax 請求，只需幾步：實例化一個 XMLHttpRequest 對象，綁定 readyState 改變時調用的回調，最后使用 open、send 方法發出請求即可。

上面的代碼涉及到 XMLHttpRequest 對象的常用屬性、方法，接下來依次解釋它們的作用。

注：為了方便閱讀，下面用 xhr 指代 XMLHttpRequest

xhr.onreadystatechange

請求發出后，只要 xhr.readyState 發生變化，就會調用通過 xhr.onreadystatechange 綁定的函數。

xhr.readyState

xhr.readyState 的值代表 xhr 對象所處的狀態，可能的狀態如下：

就像上面的示例一樣，一般我們在 xhr.onreadystatechange 綁定的函數中判斷 xhr.readyState 的值，當值變為4的時候，我們再做進一步處理。

xhr.status

xhr.status 代表服務器響應的 http 狀態碼，比如上面的示例中，我們認為 xhr.status 等于200的時候，服務器正常返回了我們想要的內容，否則認為請求發生錯誤。

xhr.responseText

xhr.responseText 的值即為服務器響應的內容。

xhr.open(method, url, async, user, password)

xhr.open方法，用于初始化請求，可以接受5個參數，后三個參數都是可選的，通常我們也很少使用

• method：要使用的HTTP方法，比如 GET、POST、PUT、DELETE 等
• url：請求的url
• async(可選)：是否發起異步請求，默認值為 true；注意，新版本的瀏覽器已經不建議將該值設置為 false 來發起同步請求
• user(可選)：用戶名，用于認證
• password(可選)：用戶密碼，用于認證

xhr.setRequestHeader(header, value)

xhr.setRequestHeader 用于設置 http 請求的 header。需要注意的是，該方法只能在調用 xhr.open 初始化請求后，并且在調用 xhr.send 發出請求之前調用，否則會拋出錯誤。該方法接收兩個參數

• header: 設置的 header 頭的名字
• value：設置的 header 頭的值

xhr.send(content)

xhr.send 方法用于發出請求。注意，如果發出的是同步請求，該方法會阻塞 js 的執行。xhr.send 接收一個參數

• content：請求發送的內容。如果是 GET 或 HEAD 請求，應當不傳這個參數或者傳null

---

XMLHttpRequest Level 2

在 HTML5 之前，雖然各家瀏覽器都實現了 XMLHttpRequest 接口，但由于沒有統一的規范，導致各個瀏覽器的實現或多或少有些差異。HTML5 將 XMLHttpRequest 納入了規范，并在原來的基礎上做了升級，提出了 XMLHttpRequest Level 2。

XMLHttpRequest Level 2 相較于老版本的 XMLHttpRequest 主要新增了如下內容：

• 可以設置HTTP請求的超時時間
• 可以通過 FormData 發送表單數據
• 可以上傳文件
• 支持跨域請求
• 可以獲取服務器端的二進制數據
• 可以獲得數據傳輸的進度信息

設置HTTP請求的超時時間

xhr.timeout

和 xhr.setRequestHeader 一樣，xhr.timeout的值只能在調用 xhr.open 之后且在 xhr.send 之前設置

var xhr = new XMLHttpRequest()xhr.open('GET', '/api/hello')xhr.timeout = 2000 // 超時時間，單位是毫秒xhr.ontimeout = function (e) { // XMLHttpRequest 超時，在此做超時的處理}xhr.send(null)

發送表單數據

HTML5 新增了一個 FormData 對象，用于模擬表單。我們可以結合 FormData 與 xhr 發送表單數據

var xhr = new XMLHttpRequest()// 實例化一個 FormData 對象var formData = new FormData()// 向 FormData 添加數據formData.append('username', 'whale')formData.append('age', '18')xhr.open('POST', '/api/form')// 發送表單數據xhr.send(formData)

上傳文件

FormData 除了可以添加字符串數據，也可以添加 blob、file 類型的數據，因此可以用于上傳文件。在瀏覽器中，一般是通過文件上傳輸入框來獲取 file 對象，比如：

然后監聽 input 的 change 事件，獲取 file 對象：

document.getElementById('upload-file').addEventListener('change', function () { formData.append('uploadFile', this.files[0]) xhr.send(formData)})

跨域請求

默認情況下，瀏覽器出于安全考慮不允許發送跨域請求，但有時候向不同域的服務器發送請求是必要的。為了標準化跨域請求流程，W3C 提出了跨域資源共享(Cross-origin resource sharing，簡稱 CORS)標準，在 CORS 出現之前，通常是使用 JSONP 來取巧地解決跨域問題，但由于 JSONP 存在各種限制，因此在支持 CORS 的瀏覽器中(IE10 以下不支持)還是推薦使用 CORS。

要使用 CORS，默認情況下，前端不用修改任何代碼，如果瀏覽器發現 XMLHttpRequest 發出了跨域請求，會幫我們做相應的處理，但服務器需要返回 Access-Control-Allow-Origin 響應頭，指定允許進行跨域請求的域。

CORS 請求默認是不發送 Cookie 的，如果想要發送 cookie，服務器需要返回 Access-Control-Allow-Credentials: true，并且前端需要設置 withCredentials 屬性：

xhr.withCredentials = true

接收二進制數據

XMLHttpRequest level 1 只能接收文本數據，新版本 XMLHttpRequest 添加了接收二進制數據的能力。要接收二進制數據，一般有兩種方式。

一種是使用 overrideMimeType 方法覆寫服務器指定的 MIME 類型，從而改變瀏覽器解析數據的方式。

xhr.overrideMimeType(mimeType)

• mimeType：要設置的 MIME 類型

比如：

// 告訴瀏覽器，服務器響應的內容是用戶自定義的字符集xhr.overrideMimeType('text/plain; charset=x-user-defined')

執行上面的代碼后，瀏覽器就會將服務器返回的二進制數據當成文本處理，我們需要做進一步的轉換才能拿到真實的數據：

// 獲取二進制數據的第 i 位的值var byte = xhr.responseText.charCodeAt(i) & 0xff

---

歡迎關注

總結

以上是生活随笔為你收集整理的ajax put请求_前端基础面试：手写一个ajax,说说XMLHttpRequest 都有哪些属性?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。