📖 第四章 AJAX and JSON

jQuery 中,可以好方便地使用 Javascript 存取各種網絡資源。

AJAX 全稱 Asynchronous JavaScript and XML,用意係由 JavaScript 非同止地於瀏覽器中,向伺服器發送 Request 請求資源。相關資源可以係獲取數據(GET)或者發送資料(POST)。

當年出現這個技術時,傳遞資料的格式是 XML。最先由 IE5/6 通過 ActiveX 的 XMLHTTP 實現。其後便統一為 XMLHttpRequest。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

JavaScript 獲得資料更新後,便可以通過之前學的 DOM Manipulation 修改技巧,將界面內容更換成最新的資料內容。

以下圖示中,黃色標示的,是會重新載入的部份。在傳統頁面中,每一次都是整個頁面重新載入。而圖示下方則使用 AJAX,在按下跳頁後,由 JavaScript 在背後獲取第二版的資料,再通過 JavaScript 改變 HTML 內容,以替換成新資料。於是要載入的數據及需要重新繪製的區域均大為降低,從而提高載入速度及使用體驗。

AJAX-refreshing

JavaScript Object Notation

雖然 AJAX 名稱中的 X 是 XML,實則現今主流是使用 JSON 作為中間傳遞格式。JSON 全稱 JavaScript Object Notation。當中的重點是 Notation 這個字,代表 JSON 只是一個表達方法。是一個用 JavaScript 物件寫法來表達的字串,和真實的 JavaScript 物件定義是有分別的。

分別一:JSON 定義 Key/Value Pair 時,Key 是必須用雙引號的。JavaScript 物件定義時,對 Key 有沒有引號是沒有所謂的。

分別二:JavaScript 物件可以包括邏輯運算,而 JSON 一般只會包含資料數據。

測試 API Server

https://open-test-api.herokuapp.com

# Create user and sample tasks:
POST /users.json

# List all users:
GET /users.json

# Fetch tasks:
GET /tasks.json?key=<USER_KEY>

# Create tasks:
POST /tasks.json
data:
key=<USER KEY>
task: { "content": <CONTENT>, "is_done": true/false }

# Update tasks is_done:
PUT /tasks/<task_id>.json
data:
key=<USER_KEY>
task: { "is_done": true/false }

# Update tasks content and is_done:
PUT /tasks/<task_id>.json
data:
key=<USER_KEY>
task: { "content": "New content", "is_done": true/false }

getJSON

$.getJSON(url, callback);

http://api.jquery.com/jQuery.getJSON/

$.getJSON 是 $.ajax 的其實一個特例短寫。底層實際是通過 $.ajax 執行,並設定類型為 JSON。

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

例子:

var url = "https://open-test-api.herokuapp.com/users.json";
$.getJSON(url, function(data){
  console.log(data);
});

$.ajax 是所有過 Network 存取資料的 jQuery function 的最底層,其餘的特例短寫還有:

  • $.get
  • $.getJSON
  • $.getScript
  • $.post
  • $.load

http://api.jquery.com/category/ajax/shorthand-methods/

jQuery.ajax

http://api.jquery.com/jQuery.ajax/

$.ajax 是各個方便的過 network Function 的核心,定義於 xhr.js,通過 XMLHttpRequest 執行。

值得留意的是,Fetch 是新進的過 Network 存取資源 function。Google Developer 上有更詳細的 fetch 例子。

JSON-P

http://json-p.org

JSON-P 即是 JSON with padding.

基於安全埋由,JavaScript 對於存取非自己 Domain 的資源,有嚴格限制。但其中一個 JSON 資料傳遞的目的,就是為了跨服務跨 Domain 交換資料。要解決這個安全限制,有兩個方法:

  1. 於 API 伺服器上設定 CORS
  2. 於 API 提供的 JSON 格式前後,加上一個 function call。好讓執行的第三方客戶端 JavaScript 能夠有一個載體,使用所取得的資料。
Edit

← Previous Page 第三章 事件處理 Events and Function handler


Last updated at 2019-06-02. Show version history

Comments

no comments yet.

Please login to chat.