實例詳解JSON資料格式及json格式資料域字串相互轉換_javascript技巧

JSON(JavaScript Object Notation)是一種輕量級的資料交換格式。 JSON採用完全獨立於語言的文字格式，這些特性使JSON成為理想的資料交換語言。易於人閱讀和編寫，同時也易於機器解析和生成。

基礎結構

JSON建構於兩種結構：

1. “名稱/值”對的集合（A collection of name/value pairs）。在不同的語言中，它被理解為物件（object），記錄（record），結構（struct），字典（dictionary），雜湊表（hash table），有鍵列表（keyed list），或關聯數組（associative array）。

2. 值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數組（array）。

基礎範例

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

表示名稱 / 值對

依照最簡單的形式，可以用下面這樣的 JSON 表示 "名稱 / 值對" ：{ "firstName": "Brett" }
這個範例非常基本，而且實際上比等效的純文字 "名稱 / 值對" 佔用更多的空間：firstName=Brett

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

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" } 

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

表示陣列

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

{ "people": [ 
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"}, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
]} 

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

{ "programmers": [ 
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" }, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
], 
"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 格式之後，在 JavaScript 中使用它就很簡單了。 JSON 是 JavaScript 原生格式，這表示在 JavaScript 中處理 JSON 資料不需要任何特殊的 API 或工具包。

將 JSON 資料賦值給變數

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

var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" }, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
], 
"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 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

概念比较

JSON和XML的比较

◆可读性

JSON和XML的可读性可谓不相上下，一边是简易的语法，一边是规范的标签形式，很难分出胜负。

◆可扩展性

XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，而JSON却不能。不过JSON在Javascript主场作战，可以存储Javascript复合对象，有着xml不可比拟的优势。

◆编码难度

XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有提供的工具。无工具的情况下，相信熟练的开发人员一样能很快的写出想要的xml文档和JSON字符串，不过，xml文档要多很多结构上的字符。

◆解码难度

XML的解析方式有两种：

一是通过文档模型解析，也就是通过父标签索引出一组标记。例如：xmlData.getElementsByTagName("tagName")，但是这样是要在预先知道文档结构的情况下使用，无法进行通用的封装。

另外一种方法是遍历节点（document 以及 childNodes）。这个可以通过递归来实现，不过解析出来的数据仍旧是形式各异，往往也不能满足预先的要求。

凡是这样可扩展的结构数据解析起来一定都很困难。

JSON也同样如此。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。但是如果你是一个应用开发人员，就不是那么喜欢了，毕竟xml才是真正的结构化标记语言，用于进行数据传递。

而如果不知道JSON的结构而去解析JSON的话，那简直是噩梦。费时费力不说，代码也会变得冗余拖沓，得到的结果也不尽人意。但是这样也不影响众多前台开发人员选择JSON。因为json.js中的toJSONString()就可以看到JSON的字符串结构。当然不是使用这个字符串，这样仍旧是噩梦。常用JSON的人看到这个字符串之后，就对JSON的结构很明了了，就更容易的操作JSON。

以上是在Javascript中仅对于数据传递的xml与JSON的解析。在Javascript地盘内，JSON毕竟是主场作战，其优势当然要远远优越于xml。如果JSON中存储Javascript复合对象，而且不知道其结构的话，我相信很多程序员也一样是哭着解析JSON的。

◆实例比较

XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。

用XML表示中国部分省市数据如下：

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
<country> 
<name>中国</name> 
<province> 
<name>黑龙江</name> 
<cities>
<city>哈尔滨</city> 
<city>大庆</city> 
</cities> 
</province> 
<province> 
<name>广东</name> 
<cities> 
<city>广州</city> 
<city>深圳</city> 
<city>珠海</city> 
</cities> 
</province> 
</country> 

用JSON表示如下：

{ 
{name:"中国", province:[ { name:"黑龙江", cities:{ city:["哈尔滨","大庆"] }, 
{name:"广东", cities:{ city:["广州","深圳","珠海"] } 
} 

编码的可读性，xml有明显的优势，毕竟人类的语言更贴近这样的说明结构。json读起来更像一个数据块，读起来就比较费解了。不过，我们读起来费解的语言，恰恰是适合机器阅读，所以通过json的索引.province[0].name就能够读取“黑龙江”这个值。

编码的手写难度来说，xml还是舒服一些，好读当然就好写。不过写出来的字符JSON就明显少很多。去掉空白制表以及换行的话，JSON就是密密麻麻的有用数据，而xml却包含很多重复的标记字符。

JSON在线校验工具

前言
JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。
但是国人的一款在线工具 BeJson 给众多程序员带来了一阵凉风。

功能简介

1. JSON格式化校验
很多人在得到JSON数据后,一时没有办法判断JSON数据格式是否正确,是否少或多符号而导致程序不能解析,这个功能正好能帮助大家来完成JSON格式的校验。

2. JSON视图

想必很多程序员都会遇到当找一个节点的时候,会发现如果直接对着一行行数据无从下手,就算知道哪个位置,还要一个节点一个节点的往下找,万一一不留神又得从头开始找的麻烦事。

有了这个功能,一切JSON数据都会变成视图格式,一目了然,什么对象下有多少数组,一个数组下有多少对象。

这个功能非常实用。不光有视图功能还有格式化、压缩、转义、校验功能。总之很强大。

3. 压缩转义

程序员在写JSON语句测试用例的时候,很多时候为了方便直接写了个JSON字符串做测试,但是又陷入了无止境的双引号转义的麻烦中。这款功能集压缩、转义于一身,让你在写测试用例的时候,如鱼得水。

4. JSON在线编辑器

如果你现在的电脑刚巧没有装你所熟悉的编辑器,如果你想针对拿到的JSON数据的某个节点做数据修改时,这个功能可以满足你的需求。

5. 在线发送JSON数据

大家都知道,JSON用的最多的还是web项目的开发,那你要测试一个接口是否能准确的接受JSON数据,那你就得写一个页面发送JSON字符串,重复的做着这件事。随着这个功能的横空出世,你可以摆脱写测试页面了,因为这个功能可以将指定的JSON数据发送指定的url,方便吧。

6. JSON着色

很多人在写文档时，总希望文档能一目了然,但是面对着白底黑字的JSON数据总是提不起精神没关系,使用这个功能,所有的关键字都会被着色,数据结构一目了然。

7. JSON-XML互转

顾名思义，将JSON格式的数据转化成XML格式、或者XML格式的数据转化成JSON格式，一切都不是问题。

json格式数据域字符串相互转换实例代码

字符串和json格式数据能够进行相互转换，当然这个是有实际需求的，下面是两端进行转换的实例。

一.json格式数据转换成字符串:

var arr=[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]; 
var str=JSON.stringify(arr); 

要使用JSON.stringify()函数需要实现引用json2.js文件，这个在百度搜索下载即可。
输出结果:"[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]"

二.String转换为json格式数据:

var str="[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]"; 
var json=$.parseJSON(str); 

输出结果：[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]