|
JSON概念
進入JSON前,請先看「Array宣告」,宣告一個Javascript Array物件,基本上是兩種語法:- // 正式宣告
- var team1 = new Array('Bruce', 'Sherry', 'Happy');
- // 整合宣告
- var team2 = ['Bruce', 'Sherry', 'Happy'];
- alert(team1[0]); // Bruce
- alert(team2[2]); // Happy
複製代碼 一個比較正式,一個是比較簡寫,通常Javascript寫久了,會採用第二種方式來宣告Array。
再來看Javascript物件的宣告,基本上也是兩種:- // 正式宣告
- var Bruce = new Object();
- Bruce.name = 'King Kong';
- Bruce.age = 18;
- Bruce.sex = 'male';
- alert(Bruce.age); // 18
- // 整合宣告
- var Bruce = {
- 'name' : 'King Kong',
- 'age' : 18,
- 'sex' : 'male'
- }
- alert(Bruce.name); // King Kong
- alert(Bruce[name]); // King Kong
複製代碼 一樣,久了也是會選第二種來寫,再來我們看看Javascript的「Array + Object」的宣告:- // 宣告一個familys Array,裡面包含兩個Object
- var family = [
- {'name' : 'Bruce',
- 'age' : 18,
- 'sex' : 'male'},
- {'name' : 'Sherry',
- 'age' : 16,
- 'sex' : 'famale'}
- ];
- alert(family[0].name); // Bruce
- alert(family[1].sex); // famale
複製代碼 到這裡你已經會了JSON的80%以上了,JSON (JavaScript Object Notation)已經說明的很清楚了,它是一個JavaScript的子集,它利用Object與Array來表示資料,讓資料很容易的可以交換使用。
JSON寫法
我們先來看完整的JSON寫法:- {
- "familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]
- }
複製代碼 JSON會建構出兩種結構:(1)「"名稱" : 值」的集合;(2)Array。
JSON的細節
比對上面範例,你會發現一點也不難。
JSON Object:
以"{"開始,以"}"結尾
每個名稱後跟著一個":"
每對"名稱:值"之間用","分隔- { // 以"{"開始
- "name" : "Bruce", // 每個名稱後跟著一個":"
- "age" : 18, // 每對"名稱:值"之間用","分隔
- "sex" : "male"
- } // 以"}"結尾
複製代碼 JSON Array:
以"["開始,以"]"結尾
值之間使用","- {
- // familys為一維陣列,陣列裡包含兩筆物件資料
- "familys" : [ // 以"["開始
- {"name" : "Bruce",
- "age" : 18,
- "sex" : "male"}, // 值之間使用","
- {"name" : "Sherry",
- "age" : 16,
- "sex" : "famale"}
- ] // 以"]"結尾
- }
複製代碼 JSON Value:
值本身可以是String、Number、true、false、null、Object、Array;
JSON String:
由雙引號包圍的任意Unicode字元集合。可以使用"反斜線(\)"來轉義。- {
- "details" : "這是JSON的值. \n 此格式比XML合適Ajax交換資料使用."
- }
複製代碼 JSON Number:
與一般數值相同,除8 / 16進制外。
JSON的使用
那JSON要如何使用呢?
原生的JSON格式資料,目前在IE7以上及MF 3以上,已經內建解析JSON格式的能力,但在相容性及網路上的不確定性(其他瀏覽器),建議在有需要使用JSON格式的頁面引用json2.js,依官方說法,請不要在使用json.js這個版本的Script了。
我們有一JSON格式的String:- 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方法:- var jsonData = '{"familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]}';
- var jsonObj = JSON.parse(jsonData); // 將JSON格式資料轉為物件
- alert(jsonObj.familys[0].name); // Bruce
- alert(jsonObj.familys[1].age); // 16
複製代碼 這樣之後,我們就能在Ajax函式將伺服器傳回的JSON格式做解析:- // ...
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
- var jsonObj = JSON.parse(xmlHttp.responseText);
- // ...
- }
複製代碼 使用了JSON來交換資料後,你會發現相關Ajax的程式碼變簡單了,例如:- // 原始Ajax函數
- function Do(xmlHttp) {
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
- var familys = xmlHttp.responseXML.getElementsByTagName('familys');
- for (var i = 0; i < familys.length; i++) {
- var name = familys.getElementsByTagName('name')[0].firstChild.nodeValue;
- var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
- var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
- }
- }
- }
- // 使用JSON後的Ajax函數
- function Do(xmlHttp) {
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
- var jsonObj = JSON.parse(xmlHttp.responseText);
- var name = jsonObj.familys[0].name;
- var age = jsonObj.familys[0].age;
- var sex = jsonObj.familys[0].sex;
- }
- }
複製代碼 不只有變簡單,而且程式的撰寫更直覺。另外,你也可以把Object轉為JSON:- // 宣告一個familys Array,裡面包含兩個Object
- var familys = [
- {'name' : 'Bruce',
- 'age' : 18,
- 'sex' : 'male'},
- {'name' : 'Sherry',
- 'age' : 16,
- 'sex' : 'famale'}
- ];
- var jsonData = JSON.stringify(familys);
複製代碼 更快速的是使用jQuery的$getJSON,但這超出了JSON的討論了。以上是接收解析JSON,那如果我要傳送JSON給伺服器呢?也簡單:- var xhr = request(); // 建立XHR物件
- xhr.onreadystatechange = handler;
- xhr.open('POST',URL);
- xhr.setRequestHeader('Content-Type', 'application/json'); // 這裡是重點
- xhr.send(json);
複製代碼 記得使用'application/json'來傳送即可,但一般伺服器端是看不懂JSON,不過沒關係,在JSON官網最下方或上網找一下,已經有很多高手分享出來可以在伺服器解析JSON的元件或Source Code,讓JSON資料傳送到伺服器後,依然方便好用。
來源:KingKong Bruce/陳傳興製作
JSON常用函數 - (Javascript)
JSON.parse()
將以 JavaScript 物件標記法 (JavaScript Object Notation,JSON) 表示的字串轉換成物件。- JSON.parse(text [, reviver])
複製代碼 JSON.stringify()
將 JavaScript 值轉換成以 JavaScript 物件標記法 (JavaScript Object Notation,JSON) 表示的字串。- JSON.stringify(value [, replacer] [, space])
複製代碼 |
|