2009/6/21

顛覆網路 35 天 (9): 原生 JSON，更安全、效能更好

標籤： , , , ,

JavaScript Object Notation (JSON)在網站開發的世界裡已經有很多人採用，成為不可或缺的一部份。Firefox 3.5 起以 window.JSON 來原生支援 JSON 格式，本篇 (原文) 將為各位做個相關介紹。

JavaScript 等腳本語言的標準原型 ECMAScript 在第五版時將 JSON 原生支援列入規格，目前 Firefox 3.5 跟 IE8 都支援，而且其他瀏覽器必定也會很快加入支援行列。JSON 原生支援有兩個優點：

  1. 安全性提升：單純使用 eval 來解析字串型態陳述式的方法有其安全顧慮，原生 JSON 目前單純解析資料、不呼叫函式來解析物件。
  2. 效能提升：這是應該的… 目前其他可以安全解析 JSON 的函式庫，效能都比不上原生支援的瀏覽器。

來看些範例 —— 一個以 HTTP GET 等方法傳回的簡單 JSON API 搜尋結果看起來大概像這樣：

/* 
從主機取回一段搜尋結果的 JSON 資料
*/
 
var data = ' { "responseData":
{"results": [
    {
        "SafeSearch":"true",
        "url":"http://www.arunranga.com/i.jpg",
    },
    {
        "SafeSearch":"false",
  "url":"http://www.badarunranga.com/evil.jpg",
    }
]}}';

您可以用這樣的方式處理資料：

/* 
 取回、操作上一段的 JSON 資料
 如果用支援原生 JSON 的其他函式庫，會更容易一些
*/
 
if (window.JSON) {
    var searchObj = JSON.parse(data);
    for (var i=0; i++; i < searchObj.responseData.results.length) {
        if (searchObj.responseData.results[i].SafeSearch) {
            var img = new Image();
            img.src = searchObj.responseData.results[i].url;
            // ... 在 DOM 中插入圖片...
    }
}

不過，網頁設計師通常並不直接使用 JSON 原生支援，而常用 jQuery 等函式庫自不同網域取回、解析 JSON 資料，這也是 JSON 大展身手的地方。考量到效能問題，有些函式庫已經開始採用瀏覽器的原生 JSON 能力來解析資料。目前 jQurey 與 Dojo 都已支援原生 JSON，所以您使用這些函式庫時一方面在已原生支援 JSON 的瀏覽器上將獲得更好的效能、另一方面在尚未支援的瀏覽器上也可以順利解析 JSON 資料。

沒有留言:

張貼留言

歡迎留下您的意見

訂閱： 張貼留言 (Atom)