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%