JavaScript- 三種Ajax串接方式

本文总阅读量次

第一種：XMLHttpRequest

其一老式做法 ── XMLHttpRequest
格式：‘get’(讀取資料)、‘post’(傳送資料至該資料庫)

1
2
3
4
5
6
7
var xhr = new XMLHttpRequest();
xhr.open('get','URL',true);
xhr.send(null); //傳送資料（若上面使用'get'，則此欄填寫空值 null ）
xhr.onload = function () {
    data = JSON.parse(xhr.responseText);
    console.log(`已經載入 api `)
}

其中第五行執行的 data = JSON.parse(xhr.responseText)需要提醒一下，因為 JSON 雖然本身是“陣列包物件”的格式，但資料在傳輸的時候必須轉換成 string(字串)，所以我們在接收到了傳送來的「字串」時，就必須使用 JSON.parse 將其轉換回原本的格式

console可得知的串接狀態

xmlHttp5個狀態：

var state = xmlHttp.readyState;//可能是0、1、2、3、4

  • 0狀態：剛創建，還沒有調用open()方法;
  • 1狀態：請求開始：調用了open()方法，但還沒有調用send()方法
  • 2狀態：調用完了send()方法了；
  • 3狀態：服務器已經開始響應，但不表示響應結束了！
  • 4狀態：服務器響應結束！（通常我們只關心這個狀態！！！）
得到服務器響應的狀態碼：

var status = xmlHttp.status;//例如為200、404、500

第二種：jQuery- 原語法

請參考: jQuery串接影片

1
2
3
4
5
6
7
8
9

$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  success: function(data) {
    console.log(data);
    // 取得的遠端資料
  }
});

第三種：jQuery- Fetch語法

Fetch與 $.ajax 不同點在於：

  • fetch 會使用 ES6 的 Promise 作回應
  • then 作為下一步
  • catch 作為錯誤回應 (404, 500…)
  • 回傳的為 ReadableStream 物件，需要使用不同資料類型使用對應方法，才能正確取得資料物件。
1
2
3
4
5
6
7
8
9
10
11
fetch('https://randomuser.me/api/', {})
  .then((response) => {
    // 這裡會得到一個 ReadableStream 的物件
    console.log(response);
    // 可以透過 blob(), json(), text() 轉成可用的資訊
    return response.json(); 
  }).then((jsonData) => {
    console.log(jsonData);
  }).catch((err) => {
    console.log('錯誤:', err);
});

觀念解析

true(預設值) 非同步

使用非同步的設定時，我們的程式碼不會等到資料回傳回來，就會開始執行後續程式碼，因為有時候我們撈取的 JSON 檔是一大筆資料，那等我們等一大筆筆資料抓完才去執行後續動作，網頁就會在載入完成之前都卡在那邊，無形中就會浪費許多時間成本，因此若要執行非同步，則需另設定一組函式來判定onload狀態，當onload完成後即可取得資料。

false 同步

會等資料回傳(接收)完畢，才繼續往下跑