JavaScript JSON

JavaScript JSON

向伺服器發出Ajax請求時，可以以兩種不同的方式從伺服器回應檢索資料：一種是使用XMLHttpRequest物件的reponseXML屬性存取XML格式的資料；一種是XMLHttpRequest物件的responseText屬性存取字串格式的資料。目前，XML是進行資料傳輸的標準語言，但是使用XML的缺點之一是很難對它進行解析並提取要新增到頁面的資料。
      JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，我們稱為JavaScript物件表示法。使用JSON進行資料傳輸的優點之一是JSON其實就是JavaScript。它是基於ECMAScript第3版中JavaScript物件字面量語法子集的一種文字格式。這表示可以使用responseText從伺服器中檢索JSON數據，然後再使用JavaScript的eval()方法將JSON字串轉換成JavaScript對象，那麼，使用附加JavaScript就可以很地從該對像中提取數據，而不需要處理DOM。
      另外，也有針對大部分程式語言（包括C++，C#,ColdFusion、Java、Perl、PHP和Python）的JSON函式庫，這些函式庫能將上述語言格式化資料轉換成JSON格式。

      儘管有許多宣傳關於XML如何擁有跨平台，跨語言的優勢，然而，除非應用於Web Services，否則，在普通的Web應用中，開發都經常為XML的解析作秀了腦筋，無論是伺服器端產生或處理XML，還是客戶端用JavaScript解析XML，都常常導致複雜的程式碼，極低的開發效率。實際上，對於大多數Web應用來說，根本不需要要複雜的XML來傳輸數據，XML的擴展性很少具有優勢，許多Ajax應用甚至直接返回HTML片段來建立動態Web頁面。和返回XML並解析它相比，返回HTML片段大大降低了系統的複雜性，但同時也缺乏了一定的彈性。 XML使用元素、屬性、實體和其他結構。 JSON不是文件格式，因此它不需要這些附加結構。因為JSON資料只包含「名-值」對（物件）或值（陣列），所以JSON資料比同等的XML資料佔用更少的空間，執行速度更快。
      （一）JSON語法 
      JSON建構於兩個結構：
      物件－名稱/值對的集合。不同的語言中，它被理解為對象，紀錄，結構，字典，哈希表，有鍵列表（keyed list），或關聯數組。一個物件以「{」（左括號）開始，「}」（右括號）結束。每個「名稱」後面跟著一個「:」（冒號）；「『名稱/值』 對」之間使用「,」（逗號）分隔。
      陣列－值的有序列表。在大部分語言中，它被理解為數組。一個陣列以「[」（左中括號）開始，「]」（右中括號）結束。值之間使用“,”（逗號）分隔。
      JSON沒有變數或其他控制結構。 JSON只用於資料傳輸。
      JSON語法則是基於對面字面量和陣列字面量的JavaScript語法。當使用字面量時，將包括資料本身，但不包括產生資料的表達式。
      1、資料型別
      JSON資料結構包含下列資料型態：字元、數字、布林值（true/false）、null、對象，陣列。
      JSON字串必須以雙引號括起來。它們使用標準的JavaScript轉義序列。因此在以下列字元的前面要加上一個反斜線：
      JSON有下列這些形式：」（引號）、b（空格）、n（新行）、f（換頁）、r（回車） 、t（水平定位）、u（為Unicode字元增加4個數字）、\（反斜線符號）、/（正斜線符號）。      JSON使用字面量來表示對象，如果有一個以上的成員對象，則在JSON中，可以將其表示為一個包含擁有兩個對象的數組的對象。下列程式碼顯示JOSN文字形式的member物件：
   

   {“memeber”:[
            {
                  “name”:”Tom”,
                  “age”:22,
                  “country”:”USA”
      },
      {
                  “name”:”WangMing”,
                  “age”:25,
                  “country”:”China”
      }
      ]
      }

      3、使用JSON解析器
      可使用JSON解析器從物件和陣列中建立JSON文字或JSON文字建立物件和陣列。 JSON站佔www.json.rog/json.js上提供有JSON解析器，透過將下列程式碼加入頁面的頭部即可使用。 JSON解析器提供了兩個函數：toJSONString()和parseJSON()。
      toJSONString()方法被加入到JavaScript Object和Array定義中，可以將JavaScript物件或陣列轉換成JSON文字。不必將物件或陣列轉換成字面量就能使用此方法。
      parseJSON()方法能從JSON文字建立物件或陣列。
      （二）使用XMLHttpRequest物件建立JSON資料請求
      1、建立請求
      若直接請求伺服器上一個JSON檔案中的JSON資料，則可利用檔案名稱來要求JSON  如果直接要求伺服器上一個JSON檔案中的JSON資料，則可利用檔案名稱來要求JSON 資料。
      respone.open(“GET”,”classes.txt”,true);
      在這種情況下，classes.txt是JSON資料檔案的名稱，request是建立用來存放XMLHttpRequest物件的變數。
      2、 解析回應
      一旦接受伺服器的JSON數據，就可以採用兩種不同的方式解析該回應。可以使用JavaScript的內建函數eval()，或是為了進一步的安全，使用JSON解析器來取代。
      eval()方法可以把JavaScript字串當作參數，還可以將該字串轉換成對象，或作為命令動作。如果使用XMLHttpRequest物件的responseText屬性請求JSON數據，那麼使用eval()將JSON文字字串轉換成JavaScript物件。因為JSON字串常包包含花括號，所以用圓括號來括住JSON字串，以表示字它是一個求值表達式，而不是一個要運行的命令。
      var jsonResp=request.responseText;
      jsonResp=eval(“(”+jsonResp+”)”);
      如果Web伺服器既提供JSON資料也提供請求頁，則適用於方法適合資料選用方式。如果涉及安全，則適合使用JSON解析器。 JSON解析器只作用於JSON文本，並且不執行其他JavaScript。在這種情況下，可以使用responseText，但要使用parseJSON()方法將JSON文字字串轉換成JavaScript物件。要存取parseJOSN函數，需要要新增引用json.js檔案到頁面中。
      var jsonResp=request.responseText;
      jsonResp=jsonResp.parseJSON();
       

  <script type="text/javascript">
      var user =[
      {
            "name":”shenmiweiyi”,
            "QQ":306451129,
            "email":”shenmiweiyi@163.com”
            "address":
            [
                  {"City":"ZhengZhou","ZipCode":"450000"},
                  {"City":"BeiJing","ZipCode":"100000"}
            ]
      },
      {
            "name":”kehao”,
            "QQ":254892313,
            "email":”kehao@163.com”
            "address":
            [
                  {"City":"ShangHai","ZipCode":"200000"},
                  {"City":"GuangZhou","ZipCode":"510000"}
            ]
       }
      ]
      alert(user[0].name+”的Email是：”user[0].email);  //outputs shenmiweiyi的Email是：shenmiweiyi@163.com
       alert(user[1].name+”住在：”user[1].address[0].city) //outputs kehao住在：ShangHai
</script>

      JSON已經是JavaScript標準的一部分。目前，主流的瀏覽器對JSON支援都非常完美，應用JSON，我們可以從XML的解析中擺脫出來，對那些應用Ajax的Web2.0網站來說，JSON確實是目前最靈活的輕量級方案。

JSON 格式化後為 JavaScript 物件

JSON 格式在語法上與建立 JavaScript 物件程式碼是相同的。

由於它們很相似，所以 JavaScript 程式可以輕鬆的將 JSON 資料轉換為 JavaScript 物件。

JSON 語法規則

資料為 鍵/值 對。

資料由逗號分隔。

大括號保存物件

方括號保存陣列

JSON 資料- 一個名稱對應一個值

JSON 資料格式為鍵/值對，就像JavaScript 物件屬性。

鍵/值對包含欄位名稱（在雙引號中），後面一個冒號，然後是值：

"firstName":"John"

JSON 物件

JSON 物件保存在大括號內。

就像在JavaScript 中, 物件可以儲存多個鍵/值對：

{"firstName":"John", "lastName":"Doe"}

#JSON 陣列

JSON 陣列保存在中括號內。

就像在JavaScript 中, 陣列可以包含物件：

"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter", "lastName":"Jones"}
]

在以上實例中，物件"employees" 是一個陣列。包含了三個物件。

每個為個物件為員工的記錄（姓和名）。

JSON 字串轉換為 JavaScript 物件

通常我們從伺服器讀取 JSON 數據，並在網頁中顯示數據。

簡單起見，我們網頁中直接設定JSON 字串(你也可以閱讀我們的 JSON 教學):

首先，建立JavaScript 字串，字元 字串為JSON 格式的資料：

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName" :"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然後，使用JavaScript 內建函數JSON.parse() 將字串轉換為JavaScript 物件:

var obj = JSON.parse(text);