###### tags: `分享會` # 請求方式介紹 ## XMLHttpRequest 是 JavaScript 著名的古老 API,頁面能透過它操作 HTTP 請求,進行網路作業,擷取資料的同時,不需進行頁面重載 (page reload)! **優點** - JavaScript的原生物件,不需引入任何函式庫 - XHR是以事件為基礎(event-based)的非同步設計。 **缺點** - 難以捕捉各階段的狀態 - 寫法冗長不直覺,每次使用就要new一個XMLHttpRequest物件 範例 ![](https://i.imgur.com/qyuJgLx.png) ## 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的浪潮 範例 ![](https://i.imgur.com/9OXwcsi.png) ## 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)需要使用不同的對應方法。 範例 ![](https://i.imgur.com/ZZ8gmDV.png) ## axios 操作類似JQuery,並且有別於JQ的厚重,為輕量化設計的函式庫。跟fetch一樣使用promise物件,卻不限於瀏覽器,在node.js中也能使用。 **優點** - 使用方法類似於jQuery - 可以搭配 async/await - 支持Promise - 可以在node.js中使用 - 支援防CSRF - 輕量化,約13KB - 自動轉換JSON資料 - 提供超時處理 **缺點** - 基本上沒什麼缺點 範例 ![](https://i.imgur.com/SGSAGN0.png)