掌握 Ajax，第 10 部分: 使用 JSON 進行資料轉送

在非同步應用程式中發送和接收資訊時，可以選擇以純文字和 XML 作為資料格式。掌握 Ajax 的這一期討論另一種有用的資料格式 JavaScript Object Notation（JSON），以及如何使用它更輕鬆地在應用程式中移動資料和對象。

如果您閱讀了本系列前面的文章，那麼應已對資料格式有了相當的認識。前面的文章解釋了在許多非同步應用程式中如何恰當地使用純文字和簡單的成對的名稱和數值。可以將資料群組合成下面這樣的形式：

firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

這樣就行了，不需要再做什麼了。實際上，Web 老手會意識到通過 GET 請求發送的資訊就是採用這種格式。

然後，本系列討論了 XML。顯然，XML 得到了相當多的關注（正面和負面的評價都有），已經在 Ajax 應用程式中廣泛使用。關於如何使用 XML 資料格式，可以回顧 本系列前面的文章：

<request> <firstName>Brett</firstName> <lastName>McLaughlin</lastName> <email>brett@newInstance.com</email> </request>

這裡的資料與前面看到的相同，但是這一次採用 XML 格式。這沒什麼了不起的；這隻是另一種資料格式，使我們能夠使用 XML 而不是純文字和成對的名稱和數值。

本文討論另一種資料格式，JavaScript Object Notation（JSON）。JSON 看起來既熟悉又陌生。它提供了另一種選擇，選擇範圍更大總是好事情。

選擇的意義

在深入研究 JSON 格式的細節之前，您應該瞭解為什麼要用兩篇文章討論另一種資料格式（是的，本系列中的下一篇文章也討論 JSON），尤其在已經瞭解了如何使用 XML 和純文字的成對的名稱和數值的情況下。其實，原因很簡單：解決任何問題的選擇越多，找到問題的最佳 解決方案的可能性就越大，這比只能使用一個 解決方案要好得多。

回顧成對的名稱和數值和 XML

本系列已經用了大量篇幅討論適合使用成對的名稱和數值和 XML 的場合。總是應該首先考慮使用成對的名稱和數值。對於大多數非同步應用程式中的問題，使用成對的名稱和數值幾乎總是最簡單的解決方案，而且它只需要非常基本的 JavaScript 知識。

實際上，除非有某種限制迫使您轉向 XML，否則用不著考慮使用別的資料格式。顯然，如果要向需要 XML 格式的輸入的伺服器端程式發送資料，那麼希望使用 XML 作為資料格式。但是，在大多數情況下，對於需要嚮應用程式發送多段資訊的伺服器，XML 是更好的選擇；換句話說，XML 通常更適合用來向 Ajax 應用程式做出響應，而不是從 Ajax 應用程式發出請求。

添加 JSON

在使用成對的名稱和數值或 XML 時，實際上是使用 JavaScript 從應用程式中取得資料並將資料轉換成另一種資料格式。在這些情況下，JavaScript 在很大程度上作為一種資料操縱語言，用來移動和操縱來自 Web 表單的資料，並將資料轉換為一種適合發送給伺服器端程式的格式。

但是，有時候 JavaScript 不僅僅作為格式化語言使用。在這些情況下，實際上使用 JavaScript 語言中的對象來表示資料，而不僅是將來自 Web 表單的資料放進請求中。在這些情況下，從 JavaScript 對象中提取資料，然後再將資料放進成對的名稱和數值或 XML，就有點兒多此一舉 了。這時就合適使用 JSON：JSON 允許輕鬆地將 JavaScript 對象轉換成可以隨請求發送的資料（同步或非同步都可以）。

JSON 並不是某種魔彈；但是，它對於某些非常特殊的情況是很好的選擇。不要認為您不會遇到這些情況。閱讀本文和下一篇文章來瞭解 JSON，這樣，遇到這類問題時您就知道該怎麼辦了。

回頁首

JSON 基礎

簡單地說，JSON 可以將 JavaScript 對象中表示的一組資料轉換為字串，然後就可以在函數之間輕鬆地傳遞這個字串，或者在非同步應用程式中將字串從 Web 客戶機傳遞給伺服器端程式。這個字串看起來有點兒古怪（稍後會看到幾個樣本），但是 JavaScript 很容易解釋它，而且 JSON 可以表示比成對的名稱和數值更複雜的結構。例如，可以表示數組和複雜的對象，而不僅僅是鍵和值的簡單列表。

簡單 JSON 樣本

按照最簡單的形式，可以用下面這樣的 JSON 表示成對的名稱和數值：

{ "firstName": "Brett" }

這個樣本非常基本，而且實際上比等效的純文字成對的名稱和數值佔用更多的空間：

firstName=Brett

但是，當將多個成對的名稱和數值串在一起時，JSON 就會體現出它的價值了。首先，可以建立包含多個成對的名稱和數值的記錄，比如：

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

從文法方面來看，這與成對的名稱和數值相比並沒有很大的優勢，但是在這種情況下 JSON 更容易使用，而且可讀性更好。例如，它明確地表示以上三個值都是同一記錄的一部分；花括弧使這些值有了某種聯絡。

值的數組

當需要表示一組值時，JSON 不但能夠提高可讀性，而且可以減少複雜性。例如，假設您希望表示一個人名列表。在 XML 中，需要許多開始標記和結束標記；如果使用典型的成對的名稱和數值（就像在本系列前面文章中看到的那種成對的名稱和數值），那麼必須建立一種專有的資料格式，或者將鍵名稱修改為 person1-firstName 這樣的形式。

如果使用 JSON，就只需將多個帶花括弧的記錄分組在一起：

{ "people": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ]}

這不難理解。在這個樣本中，只有一個名為 people 的變數，值是包含三個條目的數組，每個條目是一個人的記錄，其中包含名、姓和電子郵件地址。上面的樣本示範如何用括弧將記錄組合成一個值。當然，可以使用相同的文法表示多個值（每個值包含多個記錄）：

{ "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] }

這裡最值得注意的是，能夠表示多個值，每個值進而包含多個值。但是還應該注意，在不同的主條目（programmers、authors 和 musicians）之間，記錄中實際的成對的名稱和數值可以不一樣。JSON 是完全動態，允許在 JSON 結構的中間改變表示資料的方式。

在處理 JSON 格式的資料時，沒有需要遵守的預定義的約束。所以，在同樣的資料結構中，可以改變表示資料的方式，甚至可以以不同方式表示同一事物。

回頁首

在 JavaScript 中使用 JSON

掌握了 JSON 格式之後，在 JavaScript 中使用它就很簡單了。JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 資料不需要任何特殊的 API 或工具包。

將 JSON 資料賦值給變數

例如，可以建立一個新的 JavaScript 變數，然後將 JSON 格式的資料字串直接賦值給它：

var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] }

這非常簡單；現在 people 包含前面看到的 JSON 格式的資料。但是，這還不夠，因為訪問資料的方式似乎還不明顯。

訪問資料

儘管看起來不明顯，但是上面的長字串實際上只是一個數組；將這個數組放進 JavaScript 變數之後，就可以很輕鬆地訪問它。實際上，只需用點號標記法來表示數組元素。所以，要想訪問 programmers 列表的第一個條目的姓氏，只需在 JavaScript 中使用下面這樣的代碼：

people.programmers[0].lastName;

注意，數組索引是從零開始的。所以，這行代碼首先訪問 people 變數中的資料；然後移動到稱為 programmers 的條目，再移動到第一個記錄（[0]）；最後，訪問 lastName 鍵的值。結果是字串值 “McLaughlin”。

下面是使用同一變數的幾個樣本。

people.authors[1].genre// Value is "fantasy" people.musicians[3].lastName// Undefined. This refers to the fourth entry, and there isn't one people.programmers.[2].firstName// Value is "Elliotte"

利用這樣的文法，可以處理任何 JSON 格式的資料，而不需要使用任何額外的 JavaScript 工具包或 API。

修改 JSON 資料

正如可以用點號和括弧訪問資料，也可以按照同樣的方式輕鬆地修改資料：

people.musicians[1].lastName = "Rachmaninov";

在將字串轉換為 JavaScript 對象之後，就可以像這樣修改變數中的資料。

轉換回字串

當然，如果不能輕鬆地將對象轉換回本文提到的文字格式設定，那麼所有資料修改都沒有太大的價值。在 JavaScript 中這種轉換也很簡單：

String newJSONtext = people.toJSONString();

這樣就行了！現在就獲得了一個可以在任何地方使用的文本字串，例如，可以將它用作 Ajax 應用程式中的請求字串。

更重要的是，可以將任何 JavaScript 對象轉換為 JSON 文本。並非只能處理原來用 JSON 字串賦值的變數。為了對名為 myObject 的對象進行轉換，只需執行相同形式的命令：

String myObjectInJSON = myObject.toJSONString();

這就是 JSON 與本系列討論的其他資料格式之間最大的差異。如果使用 JSON，只需調用一個簡單的函數，就可以獲得經過格式化的資料，可以直接使用了。對於其他資料格式，需要在未經處理資料和格式化資料之間進行轉換。即使使用 Document Object Model 這樣的 API（提供了將自己的資料結構轉換為文本的函數），也需要學習這個 API 並使用 API 的對象，而不是使用原生的 JavaScript 對象和文法。

最終結論是，如果要處理大量 JavaScript 對象，那麼 JSON 幾乎肯定是一個好選擇，這樣就可以輕鬆地將資料轉換為可以在請求中發送給伺服器端程式的格式。

回頁首

結束語

本系列已經用大量時間討論了資料格式，這主要是因為幾乎所有非同步應用程式最終都要處理資料。如果掌握了發送和接收所有類型的資料的各種工具和技術，並按照最適合每種資料類型的方式使用它們，那麼就能夠更精通 Ajax。在掌握 XML 和純文字的基礎上，再掌握 JSON，這樣就能夠在 JavaScript 中處理更複雜的資料結構。

本系列中的下一篇文章將討論發送資料以外的問題，深入介紹伺服器端程式如何接收和處理 JSON 格式的資料。還要討論區伺服器端程式如何跨指令碼和伺服器端組件以 JSON 格式發送回資料，這樣就可以將 XML、純文字和 JSON 請求和響應混合在一起。這可以提供很大的靈活性，可以按照幾乎任何組合結合使用所有這些工具。