代码详解JavaScript中JSON的用法
- yulia原创
- 2018-09-14 17:50:371488浏览
最近归纳总结了一些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中文网其他相关文章！