首页 > js教程 > 正文

代码详解JavaScript中JSON的用法

原创 2018-09-14 17:50:37 0 3
最近归纳总结了一些JavaScript知识,分享给大家。这篇文章围绕JSON 展开,讲解JSON和XML的区别,如何解析JSON文本,以及JSONP 。
具有一定的参考价值,有需要的朋友可以看看,希望可以帮助到你。

一、什么是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);

3,JSON数组

在进行Ajax访问数据中,我们常常会对服务端返回回来的JSON数据,进行解析,而JSON数组又是比较常用的,接下来笔者说一说JSON数组的解析。SON数组的解析,可以使用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);

六、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等技术来实现服务端,但是后缀名和使用的语法必需一致。

以上就是代码详解JavaScript中JSON的用法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:JSON ,JavaScript
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • jquery使用Cookie和JSON记录用户最近浏览历史_jquery
  • jQuery使用$.each遍历json数组的简单实现方法_jquery
  • jQuery遍历json的方法分析_jquery
  • 简单谈谈json跨域_javascript技巧
  • jquery+json实现分页效果_jquery
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • 弹指间学会JavaScript 教程 弹指间学会JavaScript 教程
  • JSON中文手册 JSON中文手册
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • AJAX跨域解决方案:JSONP视频教程 AJAX跨域解决方案:JSONP视频教程
  • JSON与AJAX原理与实战 JSON与AJAX原理与实战
  • 相关视频章节