JS —— ajax

since1986 發布于2019-08-22 13:49 / 2053人閱讀

摘要：方法用于常規請求，它適用于當完全指定請求資源，請求對服務器沒有任何副作用以及服務器響應是可緩存的。不同的額外數據服務器可能返回不同的數據。四發送請求使用的最后一步是指定可選的請求主體并向服務器發送它。

瀏覽器在XMLHttpRequest類上定義了他們的HTTP API。這個類的每一個實例都是一個獨立的請求/響應對，這個對象的屬性和方法允許指定請求細節和提取響應數據。

一、實例化XMLHttpResquest（）

使用這個HTTP API的第一步就是實例化一個XMLHttpRequest對象：

var requestObj new XMLHttpRequest();

當然，實際開發中，不會這么簡單，我們還要考慮兼容早版本的IE的問題，在IE5和IE6中它只是一個ActiveX對象。IE7之前的版本不支持非標準化的XMLHttpRequest()構造函數。我們需要這樣寫：

if (window.XMLHttpRequest) {
    requestObj = new XMLHttpRequest();
} else {
    requestObj = new ActiveXObject("Microsoft.XMLHTTP")//兼容早版本的ie, 如IE5 IE6
}

除了實例化一個XMLHttpRequest對象，我們也可以重用已有的對象，但要注意，這樣會終止之前通過該對象掛起的任何請求。

請求和響應的組成

一個http請求由4部分組成：

方法或“動作”

請求的 url

可選的請求頭集合，可能包含身份驗證信息

可選的請求主體

HTTP響應包含3部分：

狀態碼，顯示請求的狀態，如是否成功

響應頭集合

響應主體

二、指定請求

發起HTTP請求的下一步是調用XMLHttpRequest對象的open（）方法：

request.open("方法", "URL")

open（）方法需要指定兩個必要部分：方法和 url。第一個參數為“方法”，不區分大小寫，但通常使用大寫，常用的方法有 “GET” “POST”。GET 方法用于常規請求，它適用于當URL完全指定請求資源，請求對服務器沒有任何副作用以及服務器響應是可緩存的。POST方法常用于HTML表單，它在請求主體中包含額外數據，且這些數據常需要存儲到服務器的數據庫上（副作用）。不同的額外數據服務器可能返回不同的數據。

除了POST和GET方法，還有“DELETE” “HEAD” “OPTION” “PUT”等方法。他們都可以作為open（）方法的第一個參數。

open（）方法還有第三個參數，用來指定方法是同步還是異步的。而默認是異步的，這個在文章后面會細講。

三、設置請求頭

如果有請求頭的話，我們可以通過

requestObj.setRequestHeader("Content-Type",  "  ")

來設置請求頭。
要注意的是：對相同的頭調用setRequestHeader（）多次，新值不會取代舊值，相反，HTTP請求將包含這個頭的多個副本或這個頭將指定多個值。并不是所有的頭都可以設置，如“Content-length”"Date" "Referer" 和 "User-Agent"等，XMLHttpRequest將自動添加這些頭而防止偽造它們。

四、發送請求

使用XMLHttpRequest的最后一步是指定可選的請求主體并向服務器發送它。使用send（）方法：

requestObj.send(null)

GET方法沒有主體，我們在send（）方法中傳入null或省略這個參數。POST請求通常擁有主體，同時應該配合setRequestHeader（）指定的“Content-Type”頭。

到現在，我們可以看到一個完整的發送請求的過程：

var requestObj;

if (window.XMLHttpRequest) {
    requestObj = new XMLHttpRequest();
} else {
    requestObj = new ActiveXObject("Microsoft.XMLHTTP")
}

requestObj.open("方法", url, async);
requestObj.setRequestHeader("Content-Type", "xxxxxxxx") //根據方法設置相應的頭
requestObj.send();

前面部分講了如何 發送ajax請求_，下面部分是如何 _取得響應

五、取得響應

一個完整的HTTP響應由狀態碼、響應頭集合和響應主體組成。這些都可以通過XMLHttpRequest對象的屬性和方法使用。

status和statusText屬性以數字和文本的形式返回HTTP狀態碼。

getResponseHeader()和getAllResponseHeaders()能查詢響應頭。

響應主體可以從 reponseText 屬性中得到文本形式，從responseXML中得到Document形式。

在send（）方法發送后，我們需要知道我們的請求什么時候得到了響應，請求是否成功等，這時候我們就要用到XMLHttpResquest對象上的 readyState 屬性，readyState屬性是一個整數，它指定了請求的狀態：

常量	值	含義
UNSENT	0	open()尚未使用
OPENED	1	open()已調用
HEADERS_RECEIVED	2	接收到頭部信息
LOADING	3	接收到響應主體
DONE	4	響應完成

通過readyState我們就可以知道當前的請求出于什么狀態了，那我們怎么去監聽readyState呢？其實在每次readyState改變的時候，都會觸發readystatechange事件，而我們可以通過onreadystatechange屬性去監聽readystatechange事件。所以通過onreadystatechange屬性就可以間接的監聽到readyState的改變了。當然我們也可以使用addEventListener（）方法來監聽，但我們通常不這么做。

所以我們可以通過下面代碼來獲取響應信息：

requestObj.onreadystatechange = function() {  // 監聽readyState的變化

  if (requestObj.readyState == 4) { // 判斷響應是否完成
  
     if (requestObj.status == 200) {  // 判斷請求是否成功
     
        console.log(resquestObj.responseText);
     }
     
  }
  
}

所以到這里，我們應該知道了一個完整的原生ajax請求是怎么樣的了。

// 實例化XMLHttpRequest
var requestObj;
if (window.XMLHttpResquest) {
   requestObj = new XMLHttpRequest();
} else {
  requestObj = new ActiveXObject("Microsoft.XMLHTTP")
}

// 發送請求
requestObj.open("TYPE", "URL");
requestObj.setRequestHeader("Content-Type", .....);
requestObj.send();

// 獲取響應
requestObj.onreadystatechange = function() {
  if (requestObj.readyState == 4) {
      if (requestObj.status == 200) {
         console.log(requestObj.reponseText);
      }
  }
}

六、同步請求

是否還記得前面說到，open（）方法還有第三個參數，它指定請求是同步的還是異步的，而默認值為true，使得請求為異步請求。我們可以給它傳入false來實現同步請求。

requestObj.open(type, url, false);

這樣我們就不需要去監聽readyState的值來獲知請求何時得到了響應了。

requestObj.open("TYPE", "URL", false);
requestObj.setRequestHeader("Content-Type", .....);
requestObj.send();

// 當請求得到響應才執行
if (requestObj.status != 200) throw new Error(request.statusText);

console.log(requestObj.reponseText);

同步請求是吸引人的，但是同步請求意味著什么呢？意味著由于JavaScript是單線程的，當send（）方法調用后，請求發出，send（）方法將阻塞這份代碼，send（）方法后面的代碼都不會被執行，直到請求得到響應，如果連接的服務器響應慢，用戶的瀏覽器UI就會被凍結。所以不是特殊情況，最好不用同步請求。

GPU云服務器云服務器 js???ajax???? js ajax 解析 js ajax對象 js ajax調用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92486.html

JavaWEB開發14——ajax

摘要：一概述什么是同步，什么是異步同步現象客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態異步現象客戶端發送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會被卡死的運行原理頁面發起請求，會將請求發送一、Ajax概述1．什么是同步，什么是異步同步現象：客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態異步現象：客戶...

yearsj 2019-08-16 13:52 評論0 收藏0
原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
AJAX 的來龍去脈

摘要：簡要理解你才返回對象，你全家都返回對象你指的是響應內容的第四部分是一門語言，是另一門語言，這門語言抄襲了這門語言就是用請求和響應響應的第四部分是字符串，可以用語法表示一個對象，也可以用語法表示一個數組，還可以用語法，還可以用語法，還可以用語簡要理解 AJAX 你才返回對象，你全家都返回對象(你指的是響應內容的第四部分) JS 是一門語言，JSON 是另一門語言，JSON 這門語言抄...

Miracle 2019-08-22 13:53 評論0 收藏0
AJAX 的來龍去脈

摘要：簡要理解你才返回對象，你全家都返回對象你指的是響應內容的第四部分是一門語言，是另一門語言，這門語言抄襲了這門語言就是用請求和響應響應的第四部分是字符串，可以用語法表示一個對象，也可以用語法表示一個數組，還可以用語法，還可以用語法，還可以用語簡要理解 AJAX 你才返回對象，你全家都返回對象(你指的是響應內容的第四部分) JS 是一門語言，JSON 是另一門語言，JSON 這門語言抄...

fnngj 2019-08-29 14:15 評論0 收藏0
搜索自動提示功能JS優化

摘要：我的博客原文直奔主題，和百度的搜索框都會有這種自動提示關聯詞條的功能，自己最近接觸的項目也有多個地方要做這個功能，后臺開發咱不懂，所以從前端方面來說說這個功能的主要兩點性能優化。我的博客原文：http://arayzou.com/2013/12/18/%E6%90%9C%E7%B4%A2%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA%E5%8A%9F%E8%...

CloudwiseAPM 2019-08-21 10:22 評論0 收藏0