在異步應用程序中發送和接收信息時,可以選擇以純文本和XML作為數據格式。掌握Ajax的這一期討論另一種有用的數據格式JavaScript Object Notation(JSON),以及如何使用它更輕松地在應用程序中移動數據和對象。
如果您閱讀了本系列前面的文章,那么應已對數據格式有了相當的認識。前面的文章解釋了在許多異步應用程序中如何恰當地使用純文本和簡單的名稱/值對。可以將數據組合成下面這樣的形式:
firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com
這樣就行了,不需要再做什么了。實際上,Web老手會意識到通過GET請求發送的信息就是采用這種格式。
然后,本系列討論了XML。顯然,XML得到了相當多的關注(正面和負面的評價都有),已經在Ajax應用程序中廣泛使用。關于如何使用XML數據格式,可以回顧本系列前面的文章:
Brett
McLaughlin
brett@newInstance.com
這里的數據與前面看到的相同,但是這一次采用XML格式。這沒什么了不起的;這只是另一種數據格式,使我們能夠使用XML而不是純文本和名稱/值對。
本文討論另一種數據格式,JavaScript Object Notation(JSON)。JSON看起來既熟悉又陌生。它提供了另一種選擇,選擇范圍更大總是好事情。
添加JSON
在使用名稱/值對或XML時,實際上是使用JavaScript從應用程序中取得數據并將數據轉換成另一種數據格式。在這些情況下,JavaScript在很大程度上作為一種數據操縱語言,用來移動和操縱來自Web表單的數據,并將數據轉換為一種適合發送給服務器端程序的格式。
但是,有時候JavaScript不僅僅作為格式化語言使用。在這些情況下,實際上使用JavaScript語言中的對象來表示數據,而不僅是將來自Web表單的數據放進請求中。在這些情況下,從JavaScript對象中提取數據,然后再將數據放進名稱/值對或XML,就有點兒多此一舉了。這時就合適使用JSON:JSON允許輕松地將JavaScript對象轉換成可以隨請求發送的數據(同步或異步都可以)。
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請求和響應混合在一起。這可以提供很大的靈活性,可以按照幾乎任何組合結合使用所有這些工具。
xml的寫法:
Michael
17bity@gmail.com
http://www.jialing.net
John
john@gmail.com
http://www.john.com
Peggy
peggy@gmail.com
http://www.peggy.com
而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,也可以是對象或數組。這些結構都能嵌套。