請選擇 進入手機版 | 繼續訪問電腦版
搜索
熱搜: 活動 交友 discuz
查看: 10897|回復: 0

[JavaScript] JSON 基礎教學與範例 - JSON概念、細節、使用

[複製鏈接]
發表於 2013-10-1 11:55:11 | 顯示全部樓層 |閱讀模式
JSON概念

進入JSON前,請先看「Array宣告」,宣告一個Javascript Array物件,基本上是兩種語法:
  1. // 正式宣告
  2. var team1 = new Array('Bruce', 'Sherry', 'Happy');
  3. // 整合宣告
  4. var team2 = ['Bruce', 'Sherry', 'Happy'];
  5. alert(team1[0]); // Bruce
  6. alert(team2[2]); // Happy
複製代碼
一個比較正式,一個是比較簡寫,通常Javascript寫久了,會採用第二種方式來宣告Array。

再來看Javascript物件的宣告,基本上也是兩種:
  1. // 正式宣告
  2. var Bruce = new Object();
  3. Bruce.name = 'King Kong';
  4. Bruce.age = 18;
  5. Bruce.sex = 'male';
  6. alert(Bruce.age); // 18

  7. // 整合宣告
  8. var Bruce = {
  9.   'name' : 'King Kong',
  10.   'age' : 18,
  11.   'sex' : 'male'
  12. }
  13. alert(Bruce.name); // King Kong
  14. alert(Bruce[name]); // King Kong
複製代碼
一樣,久了也是會選第二種來寫,再來我們看看Javascript的「Array + Object」的宣告:
  1. // 宣告一個familys Array,裡面包含兩個Object
  2. var family = [
  3.   {'name' : 'Bruce',
  4.    'age' : 18,
  5.    'sex' : 'male'},
  6.   {'name' : 'Sherry',
  7.    'age' : 16,
  8.    'sex' : 'famale'}
  9. ];
  10. alert(family[0].name); // Bruce
  11. alert(family[1].sex);  // famale
複製代碼
到這裡你已經會了JSON的80%以上了,JSON (JavaScript Object Notation)已經說明的很清楚了,它是一個JavaScript的子集,它利用Object與Array來表示資料,讓資料很容易的可以交換使用。



JSON寫法

我們先來看完整的JSON寫法:
  1. {
  2. "familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]
  3. }
複製代碼
JSON會建構出兩種結構:(1)「"名稱" : 值」的集合;(2)Array。
JSON的細節
比對上面範例,你會發現一點也不難。

JSON Object:
以"{"開始,以"}"結尾
每個名稱後跟著一個":"
每對"名稱:值"之間用","分隔
  1. { // 以"{"開始
  2.   "name" : "Bruce",  // 每個名稱後跟著一個":"
  3.   "age" : 18,        // 每對"名稱:值"之間用","分隔
  4.   "sex" : "male"
  5. } // 以"}"結尾
複製代碼
JSON Array:
以"["開始,以"]"結尾
值之間使用","
  1. {
  2.   // familys為一維陣列,陣列裡包含兩筆物件資料
  3.   "familys" : [  // 以"["開始
  4.     {"name" : "Bruce",
  5.      "age" : 18,
  6.      "sex" : "male"},  // 值之間使用","
  7.     {"name" : "Sherry",
  8.      "age" : 16,
  9.      "sex" : "famale"}
  10.   ] // 以"]"結尾
  11. }
複製代碼
JSON Value:
值本身可以是String、Number、true、false、null、Object、Array;

JSON String:
由雙引號包圍的任意Unicode字元集合。可以使用"反斜線(\)"來轉義。
  1. {
  2.   "details" : "這是JSON的值. \n 此格式比XML合適Ajax交換資料使用."
  3. }
複製代碼
JSON Number:
與一般數值相同,除8 / 16進制外。



JSON的使用

那JSON要如何使用呢?

原生的JSON格式資料,目前在IE7以上及MF 3以上,已經內建解析JSON格式的能力,但在相容性及網路上的不確定性(其他瀏覽器),建議在有需要使用JSON格式的頁面引用json2.js,依官方說法,請不要在使用json.js這個版本的Script了。

我們有一JSON格式的String:
  1. var jsonData = '{"familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]}';
複製代碼
方法一:使用eval()
這個方法會引發安全性問題,我就不介紹了。

方法二:使用json2.js (IE7以上及MF 3以上可以不引用)

先在網頁中引用json2.js,然後使用json2所提供的parse方法:
  1. var jsonData = '{"familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]}';

  2. var jsonObj = JSON.parse(jsonData);  // 將JSON格式資料轉為物件

  3. alert(jsonObj.familys[0].name); // Bruce
  4. alert(jsonObj.familys[1].age); // 16
複製代碼
這樣之後,我們就能在Ajax函式將伺服器傳回的JSON格式做解析:
  1. // ...
  2. if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  3.   var jsonObj = JSON.parse(xmlHttp.responseText);
  4. // ...
  5. }
複製代碼
使用了JSON來交換資料後,你會發現相關Ajax的程式碼變簡單了,例如:
  1. // 原始Ajax函數
  2. function Do(xmlHttp) {
  3.   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  4.     var familys = xmlHttp.responseXML.getElementsByTagName('familys');
  5.     for (var i = 0; i < familys.length; i++) {
  6.       var name = familys.getElementsByTagName('name')[0].firstChild.nodeValue;
  7.       var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
  8.       var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
  9.     }
  10.   }
  11. }

  12. // 使用JSON後的Ajax函數
  13. function Do(xmlHttp) {
  14.   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  15.     var jsonObj = JSON.parse(xmlHttp.responseText);
  16.     var name = jsonObj.familys[0].name;
  17.     var age = jsonObj.familys[0].age;
  18.     var sex = jsonObj.familys[0].sex;
  19.   }
  20. }
複製代碼
不只有變簡單,而且程式的撰寫更直覺。另外,你也可以把Object轉為JSON:
  1. // 宣告一個familys Array,裡面包含兩個Object
  2. var familys = [
  3.   {'name' : 'Bruce',
  4.    'age' : 18,
  5.    'sex' : 'male'},
  6.   {'name' : 'Sherry',
  7.    'age' : 16,
  8.    'sex' : 'famale'}
  9. ];

  10. var jsonData = JSON.stringify(familys);
複製代碼
更快速的是使用jQuery的$getJSON,但這超出了JSON的討論了。以上是接收解析JSON,那如果我要傳送JSON給伺服器呢?也簡單:
  1. var xhr = request();  // 建立XHR物件
  2. xhr.onreadystatechange = handler;
  3. xhr.open('POST',URL);
  4. xhr.setRequestHeader('Content-Type', 'application/json');  // 這裡是重點
  5. xhr.send(json);
複製代碼
記得使用'application/json'來傳送即可,但一般伺服器端是看不懂JSON,不過沒關係,在JSON官網最下方或上網找一下,已經有很多高手分享出來可以在伺服器解析JSON的元件或Source Code,讓JSON資料傳送到伺服器後,依然方便好用。

來源:KingKong Bruce/陳傳興製作




JSON常用函數 - (Javascript)

JSON.parse()
將以 JavaScript 物件標記法 (JavaScript Object Notation,JSON) 表示的字串轉換成物件。
  1. JSON.parse(text [, reviver])
複製代碼
JSON.stringify()
將 JavaScript 值轉換成以 JavaScript 物件標記法 (JavaScript Object Notation,JSON) 表示的字串。
  1. JSON.stringify(value [, replacer] [, space])
複製代碼
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

本論壇為非營利之網路平台,所有文章內容均為網友自行發表,不代表論壇立場!若涉及侵權、違法等情事,請告知版主處理。


Page Rank Check

廣告刊登  |   交換連結  |   贊助我們  |   服務條款  |   免責聲明  |   客服中心  |   中央分站

手機版|中央論壇

GMT+8, 2019-1-18 11:38 , Processed in 0.061834 second(s), 17 queries .

Powered by Discuz!

© 2005-2015 Copyrights. Set by YIDAS

快速回復 返回頂部 返回列表