本篇介紹JSON的基礎知識。在沒有接觸AJAX之前我還不知道什么是JSON,在讀Jeffrey Zhao的《深入Atlas系列》時才看到這個詞,所以有必要了解一下JSON。這里我結合今天初淺的認識及一個小練習記錄我的學習。

JSON是什么?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一個子集。 JSON采用完全獨立于語言的文本格式,但是也使用了類似于C語言家族的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。這些特性使JSON成為理想的數據交換語言。

JSON建構于兩種結構:

  1. “名稱/值”對的集合(A collection of name/value pairs)。不同的語言中,它被理解為對象(object)紀錄(record)結構(struct)字典(dictionary)哈希表(hash table)有鍵列表(keyed list),或者關聯數組 (associative array)
  2. 值的有序列表(An ordered list of values)。在大部分語言中,它被理解為數組(array)

這些都是常見的數據結構。事實上大部分現代計算機語言都以某種形式支持它們。這使得一種數據格式在同樣基于這些結構的編程語言之間交換成為可能。

有關JSON的更多介紹,訪問它的官方網站:http://www.json.org

在JavaScript中使用JSON

JSON是JavaScript對象描述符號(object literal notation)的一個子集。正因為JSON是JavaScript的子集,所以在JavaScript中我們可以很容易的使用它。

var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};

這個例子中,創建了一個對象,它只包含一個成員“bindings”。“bindings”是一個包含了3個對象的數組,而這每個對象都有"ircEvent""method""regex"3個成員。

這些成員可以用“.”或subscript 操作得到。

myJSONObject.bindings[0].method    // "newURI"

我們可以使用eval()函數的eval()方法調用JavaScript的編譯器把JSON文本轉變成對象。因為JSON是JavaScript的一個確切的子集,編譯器可以正確地解析JSON文本,然后生成一個對象結構。

var myObject = eval('(' + myJSONtext + ')');

eval函數的執行效率很高。然而,它能夠編譯、執行任何的JS程序,所以這樣會有安全問題。在來源可信的時候才需要使用eval,這通常是服務器提供基礎頁面和JSON數據的web應用程序中的情形。而很多情況中,來源是不可信的。特別是永遠都不要信任客戶端。

如果關心安全的話,那最好是使用JSON解析器了(js腳本中有解析功能的函數)。JSON解析器只認可JSON文本,因此它比較安全:

var myObject = myJSONtext.parseJSON();

而JSON的字符串轉換器(stringifier)則作相反的工作,它將JavaScript數據結構轉換為JSON文本。JSON是不支持循環數據結構的,所以注意不能把循環的結構交給字符串轉換器。

var myJSONText = myObject.toJSONString();

這里是JSON官方網站提供的一個開源的JSON解析器和字符串轉換器:json.js

?一個使用json.js的簡單例子

  1. 在VS中新建一個空網站。
  2. 引入json.js文件。
    • <script?type="text/javascript"?src="json.js"></script>
  3. 然后添加一個HTML頁面,在頁面上拖放兩個Textarea和三個Button;Button的ID分別為btnParser、btnEval和btnStringifier;Textarea的ID分別為txtJSON和txtJS,cols設為50,rows設為10;
  4. 編寫三個Button的事件代碼。
    • ????<script?type="text/javascript">
      ????
      //<![CDATA[
      ????
      ????????
      function?btnStringifier_Click()?{
      ????????????
      var?oTxtJSON?=?document.getElementById("txtJSON");???????????
      ????????????
      var?myObject?=?new?Object();?//創建對象
      ????????????var?obindings?=?new?Array();
      ????????????
      var?oFirst?=?new?Object();
      ????????????
      var?oSecond?=?new?Object();
      ????????????
      var?oThird?=?new?Object();
      ????????????
      ????????????oFirst.ircEvent?
      =?"PRIVMSG";
      ????????????oFirst.method?
      =?"newURI";
      ????????????oFirst.regex?
      =?"^http://.*";???
      ????????????
      //
      ????????????
      ????????????obindings[
      0]?=?oFirst;
      ????????????obindings[
      1]?=?oSecond;
      ????????????obindings[
      2]?=?oThird;
      ????????????
      ????????????
      //將obindings數組設置為myObject的bindings成員
      ????????????myObject.bindings?=?obindings;
      ????????????
      ????????????
      //將對象轉化成JSON文本,并把文本寫入Textarea中
      ????????????oTxtJSON.value?=?myObject.toJSONString();?
      ????????}
      ?
      ????
      ????????
      function?btnParser_Click()?{
      ????????????
      var?oTxtJSON?=?document.getElementById("txtJSON");
      ????????????
      var?oTxtJS?=?document.getElementById("txtJS");
      ????????????
      //把JSON文本轉變成對象?
      ????????????var?myObject?=?oTxtJSON.value.parseJSON();
      ????????????
      ????????????
      //獲取myObject對象的第一個bindings成員得ircEvent成員(屬性值)
      ????????????oTxtJS.value?+=?myObject.bindings[0].ircEvent?+?"/";
      ????????}
      ?

      ????????
      function?btnEval_Click()?{?
      ????????????
      var?oTxtJSON?=?document.getElementById("txtJSON");
      ????????????
      var?oTxtJS?=?document.getElementById("txtJS");
      ????????????
      //把JSON文本轉變成對象?
      ????????????var?myObject?=?eval('('?+?oTxtJSON.value?+?')');
      ????????????
      ????????????
      //獲取myObject對象的第一個bindings成員得ircEvent成員(屬性值)
      ????????????oTxtJS.value?+=?myObject.bindings[0].method?+?"/";
      ????????}


      ????
      //]]>?
      ????</script>
  5. 運行HTML頁面,先點Stringifier,得到對象的JSON文本;然后點Parser,將JSON文本轉化成對象,然后獲取ircEvent成員的值;最后點Eval,它也將JSON文本轉化成對象,然后獲取method成員的值;看看效果: