【JavaScript】详解JSON

目录结构：

contents structure [+]

什么是JSON

JSON就是JavaScript Object Notation，即JavaScript对象表示法。

JSON和XML的比较

相同点：

都是存储和交换文本信息的一种方法。

不同点：

JSON 比 XML 更小、更快，更易解析。XML在JSON出现之前，风靡一时，XML有两大主要功能，就是存储数据和传输数据，不过随着时间推移，XML在传输数据方面就显得力不从心了，因此后来诞生的JSON在传输数据方面取代了XML。所以JSON主要用于传输数据，XML主要用于存储数据。关于在ajax中传输JSON可以参考文章浅析Ajax的使用。

JSON的语法

数据在“名称:值”对中
数据由逗号隔开
花括号保存对象
方括号保存数组

常见的JSON写法：

var sites = [
    { "name":"百度" , "url":"www.baidu.com" }, 
    { "name":"Google" , "url":"www.google.com" }, 
];

或是：

var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';

如何解析JSON文本

当javaScript类写成上面的第二种形势的时候，就需要解析JSON，生成相应的javaScript对象。

1，eval()方法

该方法是javaScript的内置方法，

<!DOCTYPE html>
<html>
  <head>
    <title>测试JSON</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
  <div id="name">
  </div>
  <script>
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';

var obj = eval ("(" + tx + ")"); 

alert(obj.sites[0].name+","+obj.sites[0].url);

</script> 
</body> 
</html>

访问JSON中数据，有两种方式，一种是通过对象.key 来获得，比如 obj.sites[0].url ；另一种就是通过对象["key"] 来获得,比如 obj.sites[0]["key"] 。第一种方式的好处就是简洁，第二种方式的好处就是通过字符串来获得JSON对象的值，这可以应用在需要通过动态拼接一个字符串的key，然后再获得对应值。

2，JSON.parse()方法

只需要将上面的用eval()方法解析的那句替换成如下即可：

var obj = JSON.parse(tx);

关于更多JSON.parse()的用法，读者可以点击这里。

3，JSON数组

在进行Ajax访问数据中，我们常常会对服务端返回回来的JSON数据，进行解析，而JSON数组又是比较常用的，接下来笔者说一说JSON数组的解析。

JSON数组的解析，可以使用for循环，也可使用for...in...循环，

使用for-in访问数组：

<body>

<p>你可以使用 for-in 来访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>

使用for循环访问数组：

<body>

<p>使用 for 循环访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>

其中 myObj.sites.length 可以获得sites数组的长度。

如何解析JSON对象

如果需要将JSON解析为JSON文本，那么只需要使用函数：

var JSONString = JSON.stringify(JSONObject);

　　stringify函数不会解析函数，它会删掉对象中的函数，我们可以将函数转化为字符串来解决这个问题

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
//将函数转化为字符串
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

JSON文件

JSON是定义javaScript对象的一种语言，它可以单独写成一个文件，后缀名为“.json”，可以通过脚本语言来解析。

JSONP

什么是JSONP

JSONP(json width padding)，json的一种使用模式。

JSONP有什么作用

它可以实现网页从别的域名哪儿获取资料，即跨域读取数据。

为什么使用JSONP

因为同源策略（由NetScape提出的一种安全策略）。

使用JSP实现JSONP

客户端的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>jsonp.html</title>

    <meta name="content-type" content="text/html; charset=UTF-8">

  </head>
  
  <body>
<script type="text/javascript">    

    function jsonpCallback(result){     
       alert(result[1].name);     
    }
    
</script>  
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>

服务端的完整代码：

<%  
     String callback = request.getParameter("callback");  
     out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );"); 
%>

代码讲解：

调用数据的为客户端，发送数据的称为服务端。客户端在访问服务端的url的代码中，添加一个制定了函数名称的参数，也就是jsonCallback，然后在服务端用getParameter获取数据，最后按照js的语法，输出到流中。在这里读者需要注意，上面服务端的数据就是全部的jsp文件内容了，除了使用jsp，读者还可以使用php或是jquery等技术来实现服务端，但是后缀名和使用的语法必需一致，。更多详细情况，读者可参考“说说JSON和JSONP，你会豁然开朗”或是“JSON和JAVA操作例子”。

java对于JSON的解析

因为json字符串和java中的Map集合对象非常类似，两者之间可以相互转化，不过之前我们先需要导包 gson.jar

将JSON字符串封装为java对象

将字符串转化为Map集合

/*
* 参数1. 要转换为对象的JSON格式字符串
* 参数2. 要转换的对象的类信息
*/
ClassObject = GsonInstance.fromJSON(JSON字符串,Class);

将java对象转化为JSON字符串

将字符串转化字符串使用函数

String str_json=GsonInstance.toJson(Map map);

下面通过java代码来看看：

package cn.gson.test;

import java.util.HashMap;
import java.util.Map;

import com.google.gson.Gson;

public class GSON_TEST {
    public static void main(String[] args) {
        Map map1=new HashMap();
        Map map2=new HashMap();
        map2.put("info", "测试json");
        map1.put("error", "no");
        map1.put("detail", map2);
        
        Gson gsoninstance=new Gson();
        //将map集合转化为json字符串
        String strjson=gsoninstance.toJson(map1);
        System.out.println(strjson);//{"detail":{"info":"测试json"},"error":"no"}
        
        Map map3=new HashMap();
        map3=gsoninstance.fromJson(strjson, Map.class);
        System.out.println(map3);//{detail={info=测试json}, error=no}
    }
}

GSON_TEST.java

java对于JSON的解析不仅仅只有这一种方式，下面查询天气的demo，我们使用另一种将json字符串转化为java中Map集合

参考文章

http://www.runoob.com/json/json-tutorial.html

http://www.runoob.com/js/js-json.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

本文为博主原创文章，如需转载请注明出处。