學習Ajax，關於XMLHttpRequest對象是怎麼從後台和伺服器交換數據的不太理解？

01-06

客戶端在提交表單之後，非同步是說線程不阻塞，那麼客戶端是怎麼知道readyState==4和stutas=200的呢，是伺服器每更改一次readyState的值就向客戶端更新一次信息嗎？還是說和什麼回調函數有關係，它們到底是怎麼交互的呢？不懂，求解惑。謝謝

就是一個事件

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { Fuck(xhr.readyState); Fuck(xhr.status); }

伺服器發數據給瀏覽器，瀏覽器等數據發完了拿到狀態了就調用你寫的回調函數。

這個過程中，還是有其他代碼在運作的，在不斷接收數據解析數據，只是不阻塞js代碼而已。

謝邀。

其實再多的解釋還不如你自己假裝寫一個 XMLHttpRequest 來得實在。（注意，不是用 XMLHttpRequest ，而是寫一個 XMLHttpRequest）。

class FakeXMLHttpRequest { constructor () { this.readyState = 0 }


  setReadyState (state) {

    this.readyState = state

    if (this.onreadytatechange) {

      this.onreadytatechange()

    }

  }
  open () {

    this.setReadyState(1)

  }

send () { this.setReadyState(2) // sending setTimeout(() =&> { this.setReadyState(3) // received, but no data setTimeout(() =&> { this.status = 200 this.responseText = "GOOD" this.setReadyState(4) // done }, 200) }, 100) } }

然後就假裝用它來發送 HTTP 請求：

const xhr = new FakeXMLHttpRequest() xhr.onreadytatechange = function () { console.log("Current state is: ", xhr.readyState) if (xhr.readyState === 4) { console.log(xhr.responseText) } } xhr.open("GET", "http://baidu.com") xhr.send()

然後你就會發現瀏覽器出現：

我們用自己寫的 XMLHttpRequest 假裝在發 Ajax 請求...你認真看看上面這個類，其實你會發現瀏覽器的 Ajax 會有五個階段。

1. 當你實例化的時候，readyState 設置為0。
2. 當你調用 xhr.open 方法的時候，readyState 設置為 1, 並且調用一次你的 onreadytatechange。
3. 當你調用 xhr.send 方法的時候，readyState 設置為 2，並且調用一次你的 onreadytatechange。並且開始發送請求了。
4. 當請求回來了，readyState 設置為 3，並且調用一次你的 onreadytatechange。但是還沒數據還沒接受完， xhr.responseText 還不能用。
5. 數據接受完了 xhr.responseText 可以用了，readyState 設置為 4，並且調用一次你的 onreadytatechange。

說白了，瀏覽器在 Ajax 的不同階段設置一下 readyState ，並且調用一下你的 onreadytatechange 方法。

===================== 裝逼完畢的分割線 ===================

其實我也不是很懂，我只是看了一下 MSDN（readyState property）。

這個故事告訴我們：看文檔比上知乎問問題來的快。

是這樣的，readystate這個量完全是由客戶端來更新的，表示的是當前的請求進行到哪一個階段了，是xmlhttprequest對象的狀態，具體的值的含義可參考：

XMLHttpRequest.readyState

對於伺服器來說，根本沒有readystate這種東西，這就是一個很普通的http請求，該怎麼處理怎麼處理，完了給你返回一個狀態碼，從上面的參考中你可以看到，readyState為4的時候表示下載已經完成了，所以你可以讀取這個狀態碼，也就是status這個量。

所以總結下來你的問題的答案就是，客戶端怎麼知道？xmlhttprequest對象天然就知道，因為這個值就是它自己設的，同時它還提供了一個onreadystatechange事件回調的介面，讓程序員想知道的時候也可以知道一下。

知其然不知其所以然，所以還是貼超鏈吧XMLHttpRequest(XHR) - 學習畫板

你寫的代碼跟伺服器之間還有瀏覽器在中間呢。簡單講，你通過js告訴瀏覽器伺服器成功返回後執行某段代碼，這叫註冊回調函數。瀏覽器去跟伺服器通過http協議交互，交互完成，收到請求內容後會調用你的代碼段。

給onreadystatechange事件註冊處理函數然後readystate值會根據xhr請求的進度變成1 2 3 4 每次都會觸發上面那個事件調用你設置的回調函數等readystate變成4說明請求完成之後檢查status 這個就是響應的狀態碼

ajax引擎在瀏覽器上，有5個狀態，01234，4是代表ajax引擎收到伺服器的response返回(不管返回的是200還是什麼頁面)，每次引擎狀態改變0-&>1,...,3-4都會去調onreadystatechange後面寫的函數，所以你要在函數裡面判斷下readystate是否為4，再判斷請求是否正常返回200，是的話再通過js更新頁面等操作。如提示用戶名是否被佔用什麼的。

可以去官網上找到簡單的實現，模仿註冊，不難。