AJAX 動態資料串接

發表於 | 分類於 | |

A: 這個是用 ajax 作的嗎
B: ajax 還是 $.ajax 呢

AJAX 可以說是前端最重要的技術沒有之一
主要功用是在不重刷頁面下作局部資料的動態更新

底下介紹常用的 ajax 技術

內文

  • xhr
  • $.ajax
  • fetch
  • axios

xhr


xhr 是最古老的 Ajax 技術 現在已經很少使用
但如果是為了支援一些古老的版本的瀏覽器 可以稍微認識一下
先來看一下簡單的代碼範例
此範例用於 get 方法請求取得隨機狗狗圖片的 JSON 資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 宣告請求成功和失敗的函式 (此函式為請求成功或失敗後的 callback)
function reqOnload() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log(err);
}

// 建立 XMLHttpRequest 物件 (在 console 裡 type 此物件即可以見當前狀態所有屬性內容)
var xhr = new XMLHttpRequest();

// 設定方法與 url
xhr.open("get", "https://dog.ceo/api/breeds/image/random");

// 送出
xhr.send();

xhr.onload = reqOnload;
xhr.onerror = reqError;

// {message: "https://images.dog.ceo/breeds/groenendael/n02105056_4591.jpg", status: "success"}

補充 (設定標頭)

1
2
xhr.setRequestHeader("token", "wefuni2hu43f9hr");
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");

補充 (post 方法下設定 payload)

1
xhr.send(JSON.stringify({ key: "value" }));

$.ajax


此方法為 jQuery 所提供的 ajax 方法 實際上由 xhr 所封裝的
如果專案下以有引用此 library
則可以直接使用此方法
底下為代碼的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 建立 請求物件
const requestOptions = {
  url: "https://dog.ceo/api/breeds/image/random",
  type: "get", //
  dataType: "json", // server的回傳格式
  success: function (data) {
    // 請求成功的callback
    console.log(data);
  },
  error: function (err) {
    // 請求失敗的callback
    console.log(err);
  },
};

// 送出請求
$.ajax(requestOptions);

補充(post 方法的 payload)

1
2
3
...
requestOptions.type = "post"; // 請求方法
requestOptions.data = payload; // payload

fetch


fetch 是一個 HTML5 的 API 會回傳一個 es6 的 promise 物件
如果是在主流瀏覽器的執行環境下是可以直接使用的

1
2
3
4
fetch("https://dog.ceo/api/breeds/image/random")
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.log(err));

補充 (加入其他 options)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email: "xxx@mail.com",
  }),
};

fetch(url, options)
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.log(err));

axios


一個非常流行的三方套件
支持瀏覽器中發送 XMLHttpRequests 與 Promise API
底下為參考的代碼範例

1
2
3
4
5
6
7
8
import axios from "axios";

const options = {
  method: "get",
  url: "https://dog.ceo/api/breeds/image/random",
};

axios.request(options);

補充 (post payload)

1
2
3
4
...
options.method = "post";
options.headers = { "Content-Type": "application/json" };
options.data = payload;

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/20/ajax/

0%