zoukankan      html  css  js  c++  java
  • 【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的语法

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

    常见的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

     

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

  • 相关阅读:
    坚持博客
    虚拟机CentOS7.2 1611 Minimal最小化安装后桥接固定ip
    Js 希望某链接只能点击一次
    ThinkPHP3.2 杂记
    Mysql 杂记
    Linux挂载Win共享文件夹 一
    Linux 监测系统资源
    Phpstrom 书签应用
    php默认有最大执行时间
    tp3.2中配置链接多个数据库
  • 原文地址:https://www.cnblogs.com/HDK2016/p/6171222.html
Copyright © 2011-2022 走看看