[程式][JavaScript] 什麼是JSON？基本教學！－四處流浪的阿基。I am Vagrant Walker

什麼是 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，回存資料庫。