這次的教學是在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中文網其他相關文章！
