XMLHttpRequest

是 JavaScript 著名的古老 API，頁面能透過它操作 HTTP 請求，進行網路作業，擷取資料的同時，不需進行頁面重載 (page reload)！

優點

• JavaScript的原生物件，不需引入任何函式庫
• XHR是以事件為基礎(event-based)的非同步設計。

缺點

• 難以捕捉各階段的狀態
• 寫法冗長不直覺，每次使用就要new一個XMLHttpRequest物件

範例

Jquery ajax

JQuery是js函式庫，相容各種瀏覽器。jQuery使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的html頁保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫命令了，只需定義id即可。

優點

• 基於原生的XHR物件開發，改良XHR本身架構不清晰的問題，取代原生XHR物件成為主流的AJAX語法結構
• 語法使用上直觀
• 可以在不同的狀態訂定多個回調函式

缺點

• JQuery的整個項目太大，單純使用ajax卻要引入整個JQuery
• 不能向後相容。每一個新版本不能相容早期的版本。
• 本身是針對MVC的程式設計,不符合現在前端MVVM的浪潮

範例

fetch

fetch() 是一個全域的方法，包含了需要fetch 的網址和對應的屬性設定( 例如method、headers、mode、body…等，最基本的寫法屬性不一定要填)，執行之後會送出Request，如果得到回應就會回傳帶有Response 的Promise 物件，使用then 將回傳值傳遞下去。

優點

• 使用ES6的Promise物件做回傳的處理
• 可以搭配 async/await
• 不須引入函式庫
• 可以直接呼叫定義的Request物件
• 可以用Headers物件設定表頭

缺點

• 需要使用catch做錯誤的捕捉與處理
• 伺服器有回應的情況下，都會回傳已實現的Promise物件，須自行判斷伺服器的回傳代碼(200、500、404等)
• 對應不同資料類型(json、blob、formdata)需要使用不同的對應方法。

範例

axios

操作類似JQuery，並且有別於JQ的厚重，為輕量化設計的函式庫。跟fetch一樣使用promise物件，卻不限於瀏覽器，在node.js中也能使用。

優點

• 使用方法類似於jQuery
• 可以搭配 async/await
• 支持Promise
• 可以在node.js中使用
• 支援防CSRF
• 輕量化，約13KB
• 自動轉換JSON資料
• 提供超時處理

缺點

• 基本上沒什麼缺點

範例