Json 浅谈及解析
Json简介
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。
Json优点:
Json比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包
Json的规则
JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。
规则如下:
1)映射用冒号(“:”)表示。名称:值
2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2
3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}
4) 并列数据的集合(数组)用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型:string, number, object, array, true, false, null
了解规格后,那我们如何编写一个正规的json
Student=[ { Name="wangli", Sex="男", Age=20, Email="wangliai@qq.com", }, { Name="wangli", Sex="男", Age=20, Email="wangliai@qq.com", } ]
这就是一个简单的json文档
* 值得注意的是:
JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。
创建json之后 我们进一步对这个json进行解析
解释json时要注意的是
1,JSON 只是一种文本字符串。它被存储在 responseText 属性中
2, 为了读取存储在 responseText 属性中的 JSON 数据,需要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可执行的
如:var students=eval(xhr.respnoseText);
3,JSON还提供了json.js包,下载http://www.json.org/json.js后,使用parseJSON()方法将字符串解析成 JS 对象
解释上面的json代码如下
<script type="text/javascript">
function getxhr(){
var xhr;
try{
xhr=new ActiveXObject("MicrosoftHTTP");
}catch (err) {
try{
xhr=new XMLHttpRequest();
}catch (er) {
alert("浏览器不支持......");
}
}
return xhr;
}
//获取ID
function $(id){
return document.getElementById(id);
}
function jsjosn(){
var xhr=getxhr();
xhr.open("get","josn.jsp",true);
xhr.send();
xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200){
var stues=eval("("+xhr.responseText+")");
var stus=$("testjosn");
stus.innerHTML="";//清空stus中的文本
for(var i=0;i<stues.length;i++){
var stre=document.createElement("tr");
var sname=document.createElement("td");
var ssex=document.createElement("td");
var sage=document.createElement("td");
var semail=document.createElement("td");
//添加姓名
sname.appendChild(document.createTextNode(stues[i].name))
//添加性别
ssex.appendChild(document.createTextNode(stues[i].sex))
//添加年龄
sage.appendChild(document.createTextNode(stues[i].age))
//添加邮箱
semail.appendChild(document.createTextNode(stues[i].email))
stre.appendChild(sname);
stre.appendChild(ssex);
stre.appendChild(sage);
stre.appendChild(semail);
stus.appendChild(stre);
}
}
}
}
</script>
</head>
<body>
<div align="center" style="border:1px solid red;">
<input type="button" value="解析josn" onclick="jsjosn()" />
<table cellpadding="0" cellspacing="0" border="1px" >
<caption>信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="testjosn">
</tbody>
</table>
</div>
</body>
</html>
<!--EndFragment-->