2016年3月8日 星期二

什麼是 JSON

什麼是 JSON?JSON 全稱 JavaScript Object Notation是一種非常輕量級的資料交換格式它是基於JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集JSON 主要利用了成對的 {} 來包住各個object(物件),用成對的 [] 來包各個array(陣列),用成對的 "" 來包住各字串,用逗號來區隔各變數而資料型態有 string, number, array, object

在介紹 JSON 之前,先來看看 Javascript 是怎麼表示物件跟陣列的。

先稍微了解一下JavaScript的陣列:

你可以建立一個陣列物件,其中包含該有的元素,如下:

var myArray = new Array ("Hero", "Euro", "MyCat");

此外,你也可以這樣表示一個陣列:

var myArray = ["Hero", "Euro", "MyCat"];

Javascript 的陣列是混和式的陣列,你可以在一個陣列中包含各種型態的物件,字串、數字或者自建物件等,通通都可以。

在來說明一下物件,你可以以如下程式建立一個新物件:

var myCat = new Object();

myCat.name = "Hero";

myCat.age = 5;

myCat.color = "silver";

上面是一般建立物件的概念。此外,你也可以用底下的方式來代表一個新物件(這比較重要):

var myCat = { "name": "Hero", "age": 5, "color": "silver" };

//以下兩種方式顯示的結果都相同
alert(myCat.name);
alert(myCat.age);
alert(myCat.color);

//這總就是值接把物件的變數名稱當做陣列的參數呼叫(了解下來方是對你比較有幫助)
alert(myCat["name"]);
alert(myCat["age"]);
alert(myCat["color"]);

上述兩種方法分別會跳出對話視窗顯示HERO,5,silver。

再來,陣列物件混和使用:

var myCats = [ { "name": "Hero", "age": 5, "color": "silver" },
                        { "name": "Euro", "age": 2, "color": ["brown", "white", "black"] } ];

alert(myCats[0].name); //結果會跳出對話視窗,顯示HERO

alert(myCats[1].age);  //結果會跳出對話視窗,顯示2

OK,你已經知道 JSON 是什麼了,上面講的 Javascript Object and Array notation,就是JSON的概念了。

物件陣列的文字表示法就是 JSON 的精神,因此 JSON 全名就是「JavaScript Object Notation」。

一個簡單的 JSON 範例如下:

{
     "myCats": [
                        { "name": "Hero", "age": 5, "color": "silver" },
                        { "name": "Euro", "age": 2, "color": ["brown", "white", "black"] }
                      ]
}

這樣看來,JSON 有什麼用?有什麼了不起的?事實上,你可以當它是種資料交換格式,就像 XML 一樣,你可以將這兩種格式視為相同,可以互轉,但是不是絕對等於,也不能互相取代。
怎麼用JSON?

舉例,如果你有一串 JSON 的字串,如下:

var json = '{  "myCats"  :
                       [
                             {"name": "Hero", "age": 5, "color": "silver" },
                             {"name": "Euro", "age": 2, "color": ["brown", "white", "black"] }
                       ] 
                  }';

怎麼用?就這樣用:

var obj = eval ("(" + json + ")");

alert('I have ' + obj.myCats.length + ' cats.');    //這裡會顯示2 

alert(obj.myCats[0].name);     // 這裡會顯示 Hero 

alert(obj.myCats[1].name);     // 這裡會顯示 Euro

利用 eval() 來將 JSON 字串轉成物件,不過字串的前後記得要加上刮號 (),這是用來告知 Javascript Interpreter 這是個物件描述,不是要執行的 statement。
但是呼叫 eval() 是危險的,因為他會執行任何字串中的 Javascript 程式碼,容易有 XSS 攻擊的危險,所以一般都建議引用官網上所提供的 parser - http://www.json.org/json.js 。

var obj = JSON.parse(json);

alert('I have ' + obj.myCats.length + ' cats.');

alert(obj.myCats[0].name);

alert(obj.myCats[1].name);

此外 json.js 還提供了一項方便的功能,就是增加了 toJSONString() 函式,您可以直接如下傳回物件的JSON表示法: 

function Person( name, age, phone) {
                    this.name = name;
                    this.age = age;
                    this.phone = phone;
}

var person = new Person( "Roger", 30 , 0912345678);
json = person.toJSONString() ;
var object = JSON.parse(json);

Ex : object.person.name = Roger ; object.person.age = 30

其實除了 AJAX 外,一般 Web UI 應用應該也是可以運用 JSON 的,現在一般的 UI 設計都是以伺服器端的 PHP、ASP、CGI 等依據資料來控制網頁的編排,但是有時候為了 DHTML 設計,又非得在用戶端的瀏覽器上利用 Javascript 做變動,同樣的 UI 設計卻需要同時在兩端做考量,網頁設計師與程式設計師的溝通就變的複雜,如何改進?我的想法是,底層 PHP、ASP、CGI 等就一次把前端所需要的資料寫在網頁上,要怎麼安排介面,只需要修改 Javascript 即可,前端程式有了資料後可以自由安排版面配置,後端程式只需要關心如何從資料庫撈資料就好,所以既然如此,最好的資訊呈現方式就非 JSON 莫屬了,Javascript 的一塊肉。資料回存資料庫也類似,JSON 也可以與 PHP 的物件互轉,同樣可以在用戶端將資訊轉成 JSON 格式,到了伺服器端,轉換成物件,一樣可以做資料檢查驗證等,甚至轉換成 SQL,回存資料庫。

沒有留言: