AJAX使用中的非同步同步請求怎麼實現

這次的教學是在AJAX中，非同步同步的請求怎麼實現，我們知道，FormData類型、事件監聽介面都是需要AJAX來實現的，那麼有沒有辦法在頁面資料變動時，只向伺服器請求新的數據，並且在阻止頁面刷新的情況下，動態替換頁面中展示的數據呢？今天就來談談AJAX這個概念。

XMLHttpRequest 物件

　　XMLHttpRequest只是一個JavaScript物件，確切的說，是一個建構子。換句話說，它一點也不神秘，它的特殊之處只在於它是由客戶端(即瀏覽器)提供的（而不是JavaScript原生的），除此之外，它有屬性，有方法，需要透過new關鍵字進行實例化，我們只需掌握它們就好；

XMLHttpRequest 之獲取數據

　　我們知道AJAX用來在項目中以阻止頁面刷新的方式獲取數據，那麼數據從哪裡來呢？我們又怎麼知道如何取得這些數據？答案是我們通常會使用API​​與各式各樣的資料庫互動。

　　「API」是「Application Programming Interface」(即：應用程式介面)的縮寫，你可以想像一些資料是開放的並且在等待被使用，而我們獲取這些資料的方式便是使用API 。 API通常的形式是一個URL，並提供指定的參數名稱和參數值用來幫助你定位要取得的資料。

XMLHttpRequest 之 準備請求

要想與伺服器交互，首先需要思考以下問題：

我們是要取得資料還是儲存資料？ —— 表現為請求方式是「GET」還是「POST」 向哪裡發出請求？　　　　　　　 —— 即對應的API位址 以何種方式等待對應？　　　　　 —— 有「同步」和「非同步」兩種選擇

而XMLHttpRequest實例的.open()方法的作用就是用來回答以上三個問題。 .open()方法接收三個參數：請求方式，請求URL位址和是否為非同步請求的布林值。

下面是一個.open()方法呼叫的範例：

// 該段程式碼會啟動一個針對「example.php」的GET同步請求。

xhr.open("get", "example.php", false)

// 「DELETE」、「HEAD」、「OPTONS」、「PUT」也可以作為open( )方法的第1個參數。

　　上面的程式碼中，透過傳遞第三個參數為false實現同步。要注意的是：一旦設定為同步，那麼send()方法就會阻塞直到請求完成。

（三）同步請求與非同步請求

　　人們通常認為AJAX是異步的，實際上並非如此，AJAX是避免頁面在獲取資料後刷新的一種技術，至於等待伺服器回應的方式是同步還是非同步，需要開發人員結合業務需求進行配置（雖然通常是非同步的）。

　　你可能會好奇，什麼時候我們需要使用同步的AJAX？就我個人經驗而言，似乎很難找到相應的場景。

　　最後我們再簡單解釋一下「同步」等待回應與「非同步」等待回應的差異：「同步」表示一旦要求發出，任何後續的JavaScript程式碼不會再執行，「非同步」則是當請求發出後，後續的JavaScript程式碼會繼續執行，當請求成功後，會呼叫對應的回呼函數。

XMLHttpRequest 2級之FormData類型

　　W3C提出了XMLHttpRequest 2級規範，雖然並非所有的瀏覽器都實現了該規範所規定的內容，但還是有一些內容被全部或大多數瀏覽器所實作。

FormData 類型

　　FormData是XMLHttpRequest 2級為我們提供的新的資料型別（建構子），還記的如何偽裝一個POST請求為一個表單提交嗎？ FormData讓這個過程變得更加輕鬆，因為XHR2物件能夠識別傳入的資料類型是FormData的實例，並自動配置適當的頭部資訊。

如何偽裝一個POST請求為一個表單提交？

當使用POST方法提交這種順序的表單資料時，必須設定「Content-Type」請求頭為這個值。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

注意：當使用form時，這不是必要值，因為這是預設方法。

FormData的使用方式如下：

// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
 
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)

　　除此之外，FormData的另一個好處是相較於傳統的AJAX請求，它允許我們上傳二進制資料（圖片，視頻，音頻等）。

FormData的瀏覽器相容性。

桌面端IE 10+ 與其他瀏覽器均支援

行動端Android，Firefox Mobile，OperaMobile皆支援，其餘瀏覽器未知

XMLHttpRequest 2級之事件監聽接口

XMLHttpRequest第一版，只能對onreadystatechange這一事件指定回呼函數。該事件對所有情況作出回應。

XMLHttpRequest第二版允許對更多的事件指定回呼函數。

onloadstart 　　請求發出 

onprogress     正在傳送​​和載入資料 

onabort        請求被中止，例如使用者呼叫了

##onload 　　　　　請求成功完成 

ontimeout 　　　　　　請求成功完成 

ontimeout 　　　使用者指定的時限到期，請求尚未完成 

onloadend #     請求完成，無論結果或失敗

onloadend #   

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

前端的js框架總結以及用途講解

怎麼解決ajax在解析json資料時單位秒的形式

h5裡js和servlet實作檔案上傳的實作步驟

以上是AJAX使用中的非同步同步請求怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！