==陣列==
你可以建立一個陣列物件，其中包含該有的元素，如下：
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"]);
再來，陣列物件混和使用：
var myCats = [
{
"name": "Hero","age": 5,"color": "silver" },
{
"name": "Euro","age": 2,"color": ["brown", "white", "black"] }];
alert(myCats[0].name); alert(myCats[1].age);
什麼是 JSON？
OK，你已經知道 JSON 是什麼了，上面講的 Javascript Object and Array notation 就是 JSON 了，物件陣列的文字表示法就是 JSON 的精神，因此 JSON 全名就是「JavaScript Object Notation」，Nothing more。
一個簡單的 JSON 範例如下：
{ "myCats": [{
"name": "Hero",
"age": 5,
"color": "silver"},
{"name": "Euro",
"age": 2,
"color": ["brown", "white", "black"]
}]}
這樣看來，JSON 有什麼用？有什麼鳥不起的？事實上，你可以當它是種資料交換格式，就像 XML 一樣，你可以將這兩種格式視為相同，可以戶轉，但是不是絕對等於，也不能互相取代。
舉例來說，上面的 JSON 我們可以改寫成如下的 XML 文件：
<myCats>
<cat>
<name>Hero</name>
<age>5</age>
<color>silver</color>
</cat>
<cat>
<name>Euro</name>
<age>2</age>
<color>brown</color>
<color>white</color>
<color>black</color>
</cat>
</myCats>
XML 是一種很好的表示式，但有時候它就是太囉唆了，JSON 可以簡化這種表示式，用較少的字元達到相同的效果。但是你卻不能將這兩種格式視為相等，有時候是反轉不過來的，例如：
<myCats>
<cat name="Hero">
<age>5</age>
<color>silver</color>
</cat>
</myCats>
你還是可以轉成同樣的 JSON，但是要從同樣的 JSON 轉回這個 XML 就不是那麼直覺了，它們之間並沒有定義轉換的規則，怎麼轉換單看每個人實作的不同，轉換時容易產生 ambiguous 的情況，甚至遇到 XML namespace 等更複雜的應用時，JSON 就沒轍了。因此 JSON 很適合應用在 lightweight 的網頁應用，為什麼說適合在網頁應用呢？因為 JSON 是以 Javascript 的 ECMA-262 3rd Edition 的標準為基準，根本就是 Javascript 身上的一塊肉，最佳拍檔非 Javascript 莫屬，而 Javascript 又只有 Web 在用，不過，還是要強調一下，只是適合應用在 Web 上而已，但沒有這樣的限制存在，事實上，你想用在哪就用在哪，例如 Action Script 應該也是可以的，它也是符合 ECMA 標準的語言，不過我沒用過 Action Script，不太清楚是否真的適當。此外，JSON 目前也有各種語言的 Binding 了，詳情請看 JSON 官網 - http://www.json.org/。
怎麼用？
舉例，如果你有一串 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.');
alert(obj.myCats[0].name);
alert(obj.myCats[1].name);
利用 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 字串：
<script type="text/javascript" src="http://www.json.org/json.js"></script>
<script type="text/javascript">
var obj = new Object();
obj.myCats = new Array(new Object(), new Object());
obj.myCats[0].name = "Hero";
obj.myCats[0].age = 5;
obj.myCats[0].color = "silver";
obj.myCats[1].name = "Euro";
obj.myCats[1].age = 2;
obj.myCats[1].color = ["black", "white", "brown"];
alert(JSON.stringify (obj));
</script>
真是酷啊～
跟 AJAX 何干？
實作 AJAX 時，我們通常有兩種作法：
1. 伺服器回傳一段 Javascript 由瀏覽器去執行。
2. 伺服器回傳一段 XML 由瀏覽器去讀取詮釋。
一個控制權在伺服器端，一個則是在用戶端，各有好處，用的時機也不太一樣。
但是如果回傳的是一份 XML 文件，我們通常透過 DOM 模型去 parse，如下：
function onRcvData(req) {
if (req.readyState == 4) {
if (req.status == 200) {
cats = req.responseXML.getElementsByTagName('cat');
for (var i = 0; i < cats.length; i++) {
var name = cats.getElementsByTagName('name')[0];
var color = cats.getElementsByTagName('color');
}
}
}
}
看到缺點了吧，就是很麻煩，打那麼多字。不過如果是用 JSON 的話：
function onRcvData(req) {
if (req.readyState == 4) {
if (req.status == 200) {
borg = eval ('(' + req.responseText + ')');
var name = borg.cat[0].name;
var color = borg.cat[0].color;
}
}
}
簡單明嘹又直覺，這就是運用 JSON 的優點，而且跟 Javascript 搭配起來比 XML 合得多。
其實除了 AJAX 外，一般 Web UI 應用應該也是可以運用 JSON 的，現在一般的 UI 設計都是以伺服器端的 PHP、ASP、CGI 等依據資料來控制網頁的編排，但是有時候為了 DHTML 設計，又非得在用戶端的瀏覽器上利用 Javascript 做變動，同樣的 UI 設計卻需要同時在兩端做考量，網頁設計師與程式設計師的溝通就變的複雜，如何改進？我的想法是，底層 PHP、ASP、CGI 等就一次把前端所需要的資料寫在網頁上，要怎麼安排介面，只需要修改 Javascript 即可，前端程式有了資料後可以自由安排版面配置，後端程式只需要關心如何從資料庫撈資料就好，所以既然如此，最好的資訊呈現方式就非 JSON 莫屬了，Javascript 的一塊肉。資料回存資料庫也類似，JSON 也可以與 PHP 的物件互轉，同樣可以在用戶端將資訊轉成 JSON 格式，到了伺服器端，轉換成物件，一樣可以做資料檢查驗證等，甚至轉換成 SQL，回存資料庫。
引用來源:http://blog.roodo.com/syshen/archives/1410294.html
沒有留言:
張貼留言