如何透過AJAX進行非同步請求

今天將分享的是如何透過AJAX進行非同步請求，有一定的參考價值，希望對大家有所幫助。

AJAX定義

AJAX是Asynchronous JavaScript XML的簡稱,使我們可以透過JavaScript 直接取得服務端最新的內容而不必重新載入

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

HTTP是一種請求- 回應協議，這意味著瀏覽器向網路伺服器發出請求，然後網頁伺服器建立它發送回瀏覽器的回應，並且瀏覽器以視覺方式將該文字呈現給用戶。但是，如果您只需要更新頁面的一小部分，就需要用到AJ​​AX了然後使用瀏覽器的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有幫助。

以上是如何透過AJAX進行非同步請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！