📖 第四章 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 交換資料。要解決這個安全限制，有兩個方法：

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