(2010-12-21)掌握Ajax:使用 JSON 進行數據傳輸

在異步應用程序中發送和接收信息時,可以選擇以純文本和 XML 作爲數據格式。本文討論另一種有用的數據格式 JavaScript Object Notation(JSON),以及如何使用它更輕鬆地在應用程序中移動數據和對象……

許多異步應用程序中如何恰當地使用純文本和簡單的名稱/值對。可以將數據組合成下面這樣的形式:

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

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

  然後,本系列討論了 XML。顯然,XML 得到了相當多的關注(正面和負面的評價都有),已經在 Ajax 應用程序中廣泛使用:

<request>
  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>[email protected]</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,就有點兒多此一舉 了。這時就合適使用 JSONJSON 允許輕鬆地將 JavaScript 對象轉換成可以隨請求發送的數據(同步或異步都可以)

  JSON 並不是某種魔彈;但是,它對於某些非常特殊的情況是很好的選擇。不要認爲您不會遇到這些情況。

JSON 基礎

簡單地說,JSON 可以將 JavaScript 對象中表示的一組數據轉換爲字符串,然後就可以在函數之間輕鬆地傳遞這個字符串,或者在異步應用程序中將字符串從 Web 客戶機傳遞給服務器端程序。這個字符串看起來有點兒古怪(稍後會看到幾個示例),但是 JavaScript 很容易解釋它,而且 JSON 可以表示比名稱 值對更復雜的結構。例如,可以表示數組和複雜的對象,而不僅僅是鍵和值的簡單列表。

簡單 JSON 示例

按照最簡單的形式,可以用下面這樣的 JSON 表示名稱 值對:

 { "firstName": "Brett" } 

這個示例非常基本,而且實際上比等效的純文本名稱 值對佔用更多的空間:

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

 firstName=Brett 

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

值的數組

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

如果使用 JSON,就只需將多個帶花括號的記錄分組在一起:

 { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" } 

 { "people": [ 

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }, 

  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" }, 

  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } 

 ]} 

這不難理解。在這個示例中,只有一個名爲 people的變量,值是包含三個條目的數組,每個條目是一個人的記錄,其中包含名、姓和電子郵件地址。上面的示例演示如何用括號將記錄組合成一個值。當然,可以使用相同的語法表示多個值(每個值包含多個記錄):

 { "programmers": [ 

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }, 

  { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" }, 

  { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } 

 ], 

"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" } 

 ] 

 } 

這裏最值得注意的是,能夠表示多個值,每個值進而包含多個值。但是還應該注意,在不同的主條目(programmersauthors 和 musicians)之間,記錄中實際的名稱 值對可以不一樣。JSON 是完全動態的,允許在 JSON 結構的中間改變表示數據的方式。

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

回頁首

在 JavaScript 中使用 JSON

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

將 JSON 數據賦值給變量

例如,可以創建一個新的 JavaScript 變量,然後將 JSON 格式的數據字符串直接賦值給它:

 var people = 

  { "programmers": [ 

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }, 

    { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" }, 

    { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } 

   ], 

  "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鍵的值。結果是字符串值 “McLaughlin”

下面是使用同一變量的幾個示例。

 people.programmers[0].lastName; 

利用這樣的語法,可以處理任何 JSON 格式的數據,而不需要使用任何額外的 JavaScript 工具包或 API

修改 JSON 數據

正如可以用點號和括號訪問數據,也可以按照同樣的方式輕鬆地修改數據:

 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"

在將字符串轉換爲 JavaScript 對象之後,就可以像這樣修改變量中的數據。

轉換回字符串

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

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

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

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

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

回頁首

結束語

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

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


發佈了98 篇原創文章 · 獲贊 9 · 訪問量 28萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章