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 存取各種網絡資源。