Newest ⟷ Oldest
  1. Snapshot at 2019-06-02

    第四章 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 能夠有一個載體，使用所取得的資料。
  2. Snapshot at 2019-06-02

    第四章 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/.json
data:
key=<USER_KEY>
task: { "is_done": true/false }

# Update tasks content and is_done:
PUT /tasks/&lt;task_id&gt;.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 能夠有一個載體，使用所取得的資料。
  3. Snapshot at 2019-03-22

    第四章 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/.json
data:
key=<USER_KEY>
task: { "is_done": true/false }

# Update tasks content and is_done:
PUT /tasks/.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 能夠有一個載體，使用所取得的資料。
  4. Snapshot at 2017-05-08

    第四章 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/.json
data:
key=<USER_KEY>
task: { "is_done": true/false }

# Update tasks content and is_done:
PUT /tasks/.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 能夠有一個載體，使用所取得的資料。
  5. Snapshot at 2017-05-08

    第四章 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/.json
data:
key=<USER_KEY>
task: { "is_done": true/false }

# Update tasks content and is_done:
PUT /tasks/.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 能夠有一個載體，使用所取得的資料。
  6. Snapshot at 2017-04-10

    [撰寫中] AJAX 與 getJSON

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

  7. Snapshot at 2017-04-03

    [撰寫中] AJAX 與 getJSON

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

  8. Snapshot at 2017-04-02

    AJAX 與 getJSON

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