1. What is JSON

JSON stands for JavaScript Object Notation

  • JSON is lightweight data interchange format
  • JSON is language independent
    • The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only.
    • Code for reading and generating JSON data can be written in any programming language.
  • JSON is "self-describing" and easy to understand

2. JSON vs. JS Object

  • JSON 是由 Native JS Object 語法衍生而來,非常相似,因此兩者可以輕易轉換
  • there is any different? --> yes, with detail syntax, but still similar
  1. name/value pairs syntax

    • JSON: {"firstName":"John", "lastName":"Doe"}
    • JS Object: {firstName:'John', lastName:"Doe"}
  2. name(key):

    • In JSON, keys must be strings. JSON names require double quotes
    • In JS, keys can be strings, numbers, or identifier names. JS names do not require double quotes.
  3. value:

    • 少數 JS 的資料型態在 JSON 不支援,從 JS Object 轉成 JSON 會被忽略或轉型
      • e.g., function(忽略), Date(轉型成字串), undefined(忽略), null(忽略)
    • 如果硬希望透過 JSON 傳遞 function,迂迴方式: 用字串型態傳遞 function 定義,再用 eval() 轉換成真正的 function 型態
    • Date 雖然轉成JSON時會自動轉成字串,但轉回來時不會自動變成 Date 型態,要用 reviver function 額外處理
  4. string:

    • JSON 必須雙括號,JS 單雙括號都可以

2.1. Example 1: JS Object 轉換 JSON 會忽略不支援的資料型態

var myFunc = function(){console.log('hi');};
var lv = "level";
var myName = "john";
var obj = {name: myName, age: 18, lv: 2, "addr": 'mars', birth: new Date(), armor: null, weapon:undefined, spell: myFunc};

// ********* result ********
// {name: "john", age: 18, lv: 2, addr: "mars", birth: Tue Jan 30 2018 11:33:20 GMT+0800 (台北標準時間), armor: null, weapon: undefined, spell: ƒ}
// {"name":"john","age":18,"lv":2,"addr":"mars","birth":"2018-01-30T03:33:20.615Z", "armor":null}

2.2. Example 2: 從 JSON 傳 function 給 JS Object 執行的迂迴作法

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
console.log(typeof obj.age);         //"string"
console.log(obj.age);                //"function () {return 30;}"
var x = eval("(" + obj.age + ")");
console.log(x);                      //ƒ () {return 30;}

3. JSON Files

  • The file type for JSON files is .json
  • The MIME type for JSON text is application/json

4. Why JSON is Better Than XML

  • JSON is shorter
  • JSON can use arrays
  • XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function. (mynote: 主流 browser 其實都有內建 XML parser 可以轉換 XML text 成 XML DOM Object,不過比起原生 JS Object 的操作,XML DOM Object 相對不那麼簡便直觀)


JSONP stands for JSON with Padding.

5.1. What's JSONP

  • JSONP is a method for sending JSON data without worrying about cross-domain issues.
  • JSONP does not use the XMLHttpRequest object.
  • JSONP uses the <script> tag instead.
  • Requesting a file from another domain can cause problems, due to cross-domain policy.
  • Requesting an external script from another domain does not have this problem.
  • JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

Also refer to: JS AJAX - Access Across Domains

5.2. Example: Basic Usage

test.html (client-side):

<p id="demo"></p>
function myFunc(myObj) {
  console.log('myObj=', myObj);
    document.getElementById("demo").innerHTML = myObj.name;
<script src="demo_jsonp.php"></script>

demo_jsonp.php (dummy of server-side response):

myFunc({ "name":"John", "age":30, "city":"New York" });

HTML Page Result:


5.3. Example: Creating a Dynamic Script Tag

The script tag should only be created when needed:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php?x=123&callback=myDisplayFunction";

results matching ""

    No results matching ""