寫 javascript 對一般的網頁程式設計人員來說, 應該是家常便飯, 舉凡一些需要在 client side 完成的事, 大多會利用 javascript 來操作, 例如滑鼠經過換色, 或是檢查 form (表單)在送出前的一些資料正確性檢查(ps. 一定要記得在 server side 也要再次檢查, 以確保資料的正確性)或方便使用者輸入的自動更正等功能.
javascript 的功能強大, 又加上高階, 物件化等特性, 使得撰寫 javascript 的程式設計人員十分愛用, 也方便許多在 client side 就可以先完成的一些動作, 再加上最近的 Ajax 風行, javascript 無疑變成十分熱門的語言.
JSON (Javascript Object Notation)相信很多人有聽過, 但也有很多人不知道這個東西, 他是附屬在 javascript 下的一組物件描述方法, 這個網站介紹十分詳細: http://www.json.org/, 有很容易了解的圖示幫助使用者了解 JSON 物件的描述方式.
JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 "" 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:
{ 'obj1': {
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};
這裡實作一個小程式介紹兩種產生 JSON 物件的方法:
<html>
<body>
<script>
function test()
{
// test1:
var myJsonObj = {'obj1': {'child1':'value1', 'child2':'value2'}, 'array1': [1,2,3,4,5]};
alert(myJsonObj.obj1.child2); // alert value2
alert(myJsonObj.array1[1]); // alert 2
// test2:
var strMyJsonObj = "{'obj2': {'child1':'value1', 'child2':'value2'}, 'array2':[1,2,3,4,5]}";
var myJsonObj2 = eval('(' + strMyJsonObj + ')');
alert(myJsonObj2.obj2.child2); // alert value2
alert(myJsonObj2.array2[2]); // alert 3
}
</script>
<a href=# onclick=" test()">test</a><br />
</body>
</html>
上面的 test1 在 javascript 中, 直接生成了一個 obj1 物件, 並擁有兩個 member data, 分別為 child1 及 child2, 其值又分別為 value1 及 value2, 在 test1 中, 另一個 array1 陣列, 則是擁有5個數字, 直接將 JSON 描述的資料指定給 myJsonObj, 於是 myJsonObj 就可以直接取用 myJsonObj.obj1.child2 來取得 value2 的值, 用 myJsonObj.array1[1] 就能取到 2.
上面的 test2 則是利用了 eval 將字串型態的 JSON 描述資料轉為實體的物件, 要注意的地方是在 eval 的 JSON 描述字串前後要加上 () , 如此一來便能將字串描述的 JSON 物件轉為實體的物件, 所以轉好的 myJsonObj2 也可以利用 test1 的方法來取得成員變數.
利用這種描述字串的方式, 可以應用在 AJAX 的回傳物件及變數上, 可以不用 xml 的解析器, 減低在解析上的資源消耗, 在實務上也許多人推薦使用 JSON 方法來取代 xml , 當然直接取得 html code 的方式對於 web ui 的呈現上可以直接應用, 但在資料傳遞上, html 就遠不如 xml 或是 JSON 來得方便囉.
參考資料:
http://www.json.org/
http://www.json.org/js.html
http://jengdarho.googlepages.com/ajax%2Cjsonandjson-rpc
http://developer.yahoo.com/common/json.html
[2006/8/7 01:33]
另外第三種方式亦可動態評估出 JSON 物件, 是利用 function 方法, 範例如下:
// test3:
var strMyJsonObj2 = "{'obj3': {'child1':'value1', 'child2':'value2'}, 'array3':[1,2,3,4,5]}";
var myfunc = new Function ( 'return ' + strMyJsonObj2 );
var myJsonObj3 = myfunc();
alert(myJsonObj3.obj3.child2); // alert value2
alert(myJsonObj3.array3[2]); // alert 3
利用 new Function return 的方式, 將一個 function 定義出來後, 回傳該 JSON 字串內容, 並執行該 function 後, 即可取得該 JSON 描述的物件.
new Function 的參考資料:
http://www.devguru.com/Technologies/ecmascript/quickref/function_object.html
http://www.permadi.com/tutorial/jsFunc/
[2007/7/11 17:22]
JSON和.net 結合: http://msdn2.microsoft.com/en-us/library/bb299886.aspx
這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:
Waiting...