通過AJAX進行異步請求的方法

這篇文章主要介紹通過AJAX進行異步請求的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

AJAX定義

AJAX是Asynchronous JavaScript + XML的簡寫,使我們可以通過 JavaScript 直接獲取服務端最新的內容而不必重新加載

頁面。讓 Web 更能貼近用戶體驗。其實AJAX  就是瀏覽器提供的一套 API ，可以通過 JavaScript  調用，從而實現通過代碼控制請求與響應。

HTTP是一種請求 - 響應協議，這意味著瀏覽器向Web服務器發出請求，然后Web服務器創建它發送回瀏覽器的響應，并且瀏覽器以可視方式將該文本呈現給用戶。但是，如果您只需要更新頁面的一小部分，就需要用到AJAX了然后使用瀏覽器的DOM模型將響應動態插入頁面中。

AJAX異步請求的四個步驟

（1）為瀏覽器創建一個 XMLHttpRequest對象

var xhr = new XMLHttpRequest();

（2）創建將請求發送到服務器的功能：

xhr.open('GET', './demo.php');

（3）通過連接發生一次請求

xhr.send(string);

（4）指定 xhr 狀態變化事件處理函數

xhr.onreadystatechange = function () {
  // 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
  if (this.readyState === 4) {
    // 通過 xhr 的 responseText 獲取到響應的響應體
    console.log(this)

readyState的四個狀態

0 ：代表xhr被創建但還沒有調用open方法。

1 ：open()方法已經被調用建立了連接。

2：調用了send()方法，并且已經可以獲取狀態行和響應頭。

3: 響應體加載中， responseText 屬性可能已經包含部分數據。

4: 響應體加載完成，可以直接使用  responseText 。

例：

var xhr = new XMLHttpRequest()//0狀態
xhr.open('GET', 'time.php')//1狀態，open方法已經調用了，建立一個與服務端特定端口的連接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2，3，4三種狀態，2分別為接受到了響應頭但還沒有接受到響應體；
正在下載響應報文；
報文下載下來處理響應體
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//處理函數

以上是通過AJAX進行異步請求的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！