☞2016年w3cschool全網技術教程離線下載

☞檢視完整手冊《JavaScript中的json操作》

☞學技術從w3cschool。cn開始

JSON是 JavaScript Object Notation的簡稱,是一種輕量的資料表示方法。jason格式採用key:value的方式記錄資料,非常直觀,比XML簡潔,因而大受歡迎

介紹jason格式前,先讓我們看看XML格式。顯然,XML 得到了相當多的關注(正面和負面的評價都有),已經在 Ajax 應用程式中廣泛使用:

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 可以將 JavaScript 物件中表示的一組資料轉換為字串,然後就可以在函式之間輕鬆地傳遞這個字串,或者在非同步應用程式中將字串從 Web 客戶機傳遞給伺服器端程式。這個字串看起來有點兒古怪(稍後會看到幾個示例),但是 JavaScript 很容易解釋它,而且 JSON 可以表示比名稱/值對更復雜的結構。例如,可以表示陣列和複雜的物件,而不僅僅是鍵和值的簡單列表。

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 格式的資料時,沒有需要遵守的預定義的約束。所以,在同樣的資料結構中,可以改變表示資料的方式,甚至可以以不同方式表示同一事物。

將 JSON 資料賦值給變數

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

在 JavaScript 中使用 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 幾乎肯定是一個好選擇,這樣就可以輕鬆地將資料轉換為可以在請求中傳送給伺服器端程式的格式。