在異步應用程序中發送和接收信息時,能夠選擇以純文本和 XML 做爲數據格式。掌握 Ajax 的這一期討論另外一種有用的數據格式 JavaScript Object Notation(JSON),以及如何使用它更輕鬆地在應用程序中移動數據和對象。 web
若是您閱讀了本系列前面的文章,那麼應已對數據格式有了至關的認識。前面的文章解釋了在許多異步應用程序中如何恰當地使用純文本和簡單的名稱/值對。能夠將數據組合成下面這樣的形式: ajax
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 函數
在使用名稱/值對或 XML 時,其實是使用 JavaScript 從應用程序中取得數據並將數據轉換成另外一種數據格式。在這些狀況下,JavaScript 在很大程度上做爲一種數據操縱語言,用來移動和操縱來自 Web 表單的數據,並將數據轉換爲一種適合發送給服務器端程序的格式。 工具
可是,有時候 JavaScript 不只僅做爲格式化語言使用。在這些狀況下,實際上使用 JavaScript 語言中的對象來表示數據,而不只是未來自 Web 表單的數據放進請求中。在這些狀況下,從 JavaScript 對象中提取數據,而後再將數據放進名稱/值對或 XML,就有點兒畫蛇添足 了。這時就合適使用 JSON:JSON 容許輕鬆地將 JavaScript 對象轉換成能夠隨請求發送的數據(同步或異步均可以)。 學習
JSON 並非某種魔彈;可是,它對於某些很是特殊的狀況是很好的選擇。 ui
|
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 請求和響應混合在一塊兒。這能夠提供很大的靈活性,能夠按照幾乎任何組合結合使用全部這些工具。
xml的寫法:
<contact>
<friend>
<name>Michael</name>
<email>17bity@gmail.com</email>
<homepage>http://www.jialing.net</homepage>
</friend>
<friend>
<name>John</name>
<email>john@gmail.com</email>
<homepage>http://www.john.com</homepage>
</friend>
<friend>
<name>Peggy</name>
<email>peggy@gmail.com</email>
<homepage>http://www.peggy.com</homepage>
</friend>
</contact>
而JSON:
[
{
name:"Michael",
email:"17bity@gmail.com",
homepage:"http://www.jialing.net"
},
{
name:"John",
email:"john@gmail.com",
homepage:"http://www.jobn.com"
},
{
name:"Peggy",
email:"peggy@gmail.com",
homepage:"http://www.peggy.com"
}
]
JSON的格式:
1,對象:
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"}
{ 屬性 : 值 , 屬性 : 值 , 屬性 : 值 }
2,數組是有順序的值的集合。一個數組開始於"[",結束於"]",值之間用","分隔。
[
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"},{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"},
{name:"Peggy",email:"peggy@gmail.com",homepage:"http://www.peggy.com"}
]
3, 值能夠是字符串、數字、true、false、null,也能夠是對象或數組。這些結構都能嵌套。