1. XMLHttpRequest常用方法

一、open();

XMLHttpRequest.open()方法用于指定 HTTP 請求的參數，或者說初始化 XMLHttpRequest 實例對象。它一共可以接受五個參數。

例：

xhr.open('POST', '/carrots-admin-ajax/a/login', true);

參數:

method:用于指定請求的類型 "GET"或者"POST"

url:用于請求的地址, 可相對可絕對

asyncFlag:指定請求方式為同步還是異步, true為異步, false為同步

二、send();

XMLHttpRequest.send()方法用于實際發出 HTTP 請求。它的參數是可選的，如果不帶參數，就表示 HTTP 請求只包含頭信息，也就是只有一個 URL，典型例子就是 GET請求；如果帶有參數，就表示除了頭信息，還帶有包含具體數據的信息體，典型例子就是 POST 請求。

var xhr = new XMLHttpRequest(); var data = 'name=' + userVal + '&pwd=' + pwVal; xhr.open('POST', '/carrots-admin-ajax/a/login', true); /* POST的請求頭 */ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); /* 發出HTTP請求 */ xhr.send(data);

注意，所有 XMLHttpRequest 的監聽事件，都必須在send()方法調用之前設定。（send放在最后）

2. XMLHttpRequest常用屬性

一、readyState

XMLHttpRequest.readyState返回一個整數，表示實例對象的當前狀態。該屬性只讀。它可能返回以下值。

• 0：表示 XMLHttpRequest 實例已經生成，但是實例的open()方法還沒有被調用。
• 1：表示open()方法已經調用，但是實例的send()方法還沒有調用，仍然可以使用實例的setRequestHeader()方法，設定 HTTP 請求的頭信息。
• 2：表示實例的send()方法已經調用，并且服務器返回的頭信息和狀態碼已經收到。
• 3：表示正在接收服務器傳來的數據體（body 部分）。
• 4：表示服務器返回的數據已經完全接收，或者本次接收已經失敗。

二、onreadystatechange

XMLHttpRequest.onreadystatechange屬性指向一個監聽函數。

通信過程中，每當實例對象發生狀態變化，它的readyState屬性的值就會改變。這個值每一次變化，都會觸發readyStateChange事件。

readystatechange事件發生時（實例的readyState屬性變化），就會執行這個屬性。

另外，如果使用實例的abort()方法，終止 XMLHttpRequest請求，也會造成readyState屬性變化，導致調用XMLHttpRequest.onreadystatechange屬性。

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 通信成功時，狀態值為4 if (xhr.readyState === 4){if (xhr.status === 200){console.log(xhr.responseText);} else {console.error(xhr.statusText);} }}; xhr.open('GET', '/endpoint', true); xhr.send(null);

三、responseText

XMLHttpRequest.responseText屬性返回從服務器接收到的字符串，該屬性為只讀。只有 HTTP 請求完成接收以后，該屬性才會包含完整的數據

四、status

XMLHttpRequest.status屬性返回一個整數，表示服務器回應的 HTTP

狀態碼。一般來說，如果通信成功的話，這個狀態碼是200；如果服務器沒有返回狀態碼，那么這個屬性默認是200。請求發出之前，該屬性為0。該屬性只讀。

200, OK，訪問正常404, Not Found，未發現指定網址500, Internal Server Error，服務器發生錯誤

基本上，只有2xx和304的狀態碼，表示服務器返回是正常狀態。

3. 常見問題

跨域問題

使用post提交的時候需要設置content-type為"application/x-www-form-urlencoded"

4. 解決方案

nginx配置跨域

使用post提交的時候需要設置content-type會出錯，見demo

5. 編碼實戰

原生寫法

/* 創建實例 */var xhr = new XMLHttpRequest();/* 需要發送的數據 */var data = 'name=' + userVal + '&pwd=' + pwVal; console.log(data)/* 指定請求的參數 */ xhr.open('POST', '/carrots-admin-ajax/a/login', true);/* POST的請求頭 */ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');/* 發出HTTP請求 */ xhr.send(data);

$.ajax()寫法

var xhr = $.ajax({type: 'POST',data: {name: userVal,pwd: pwVal},url: '/carrots-admin-ajax/a/login',success: function () {} });

$.post()寫法

var data = {name: userVal,pwd: pwVal, }console.log(data)var xhr = $.post('/carrots-admin-ajax/a/login', data, function () {})

總結

以上是生活随笔為你收集整理的JS----Ajax中XMLHttpRequest常用方法及属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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