JavaScript AJAX 原生寫法

前言

這一篇來記錄一下 JavaScript AJAX 原生的寫法,順便記錄一下問題。

早期寫法 (XMLHttpRequest)

早期 AJAX 取的都是透過古老的 XMLHttpRequest 語法,那寫法就像這樣子

1
2
3
4
5
6
7
var xhr = new XMLHttpRequest(); // xhr 實體化
xhr.open('get','https://soweb.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery?startdate=&enddate=') // 開啟要取得的 AJAX 網址,資料來源: open1999
xhr.send(null) // 告知不傳送任何資料
xhr.onload = function() { // 確保資料有取得在執行....
var _data = JSON.parse(xhr.responseText); // 取得資料並轉成物件格式
...
}

但是這邊要注意現階段 XHR,已經不堪用於現在複雜的 Web 環境,一個不小心可能就會進入Callback Hell(回調地獄),可以參考這篇文章

近期寫法 (Fetch API)

後來為了解決這個問題 HTML5 推出了 Fetch API 這個方法,那寫法是這樣子 (注意並非來自 ECMAScript 標準)

1
2
3
4
5
6
7
8
var url = 'https://soweb.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery?startdate=&enddate=';
fetch(url).then((respons) => {
return respons.json(); //取的資料後將資料傳給下一個 then
}).then((data) => {
...
}).catch((error) => { // 當初出現錯誤時跑 catch
console.log(error);
})

可以發現寫法簡潔許多,而且有支援 Promise,進而解決 Callback Hell 問題

但是使用 Fetch API 有一個很嚴重的問題,也就是不支援 Internet Explorer 11

不支援 IE 11

所以基本上現階段如果專案上需求是要讓 IE 用戶可以使用的話,可能還是會使用 XHR 或是其他套件來解決這些問題。

最後順便補充 jQuery ajax 寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ajaxUrl = 'https://soweb.kcg.gov.tw/open1999/ServiceRequestsQuery.asmx/ServiceRequestsQuery?startdate=&enddate=';

$.ajax({
url: ajaxUrl,
type: 'GET'
}).done(function(response) {
console.log(response);
}).fail(function( xhr, status, errorThrown ) { // 取得失敗時執行的階段程式碼
console.log( '出現錯誤,無法完成!' )
console.log( 'Error: ' + errorThrown )
console.log( 'Status: ' + status )
console.dir( xhr )
}).always(function( xhr, status ) { // 不論成功或失敗都會執行的回調函式
console.log( '要求已完成!' )
})

(本身沒在寫 jQuery,如有寫錯請指教~)

補充

如果想看 XHR、fetch、jQuery AJAX 的詳細文章可以看這篇

0%