一、JSON
1、json 是一种简单的数据格式,比xml更加轻巧。JSON 是javascript原生格式,这意味这在javascript中处理JSON数据不需要任何特殊的API或者工具包
2、JSON的规则很简单,对象是一个无序的 “名称/值” 对集合,一个对象以 ‘{’ (左括弧)开始,以 ‘}’(右括弧)结束
每一个名称后面跟一个“:”(冒号),名称/值 之间用逗号分隔开。
3、JSON示例代码如此啊:
var jsonObject = {
"name": "guishanggu",
"age" : 12,
"adderss" :{"city" :"beijing", "school" :"西交大"},
"teaching" : function(){alert("JAVAEE,JSP....")}
}
alert(jsonObject.name);
alert(jsonObject.adderss.city);
jsonObject.teaching();
JSON对象本身的属性的值还可以是一个JSON对象,就像示例代码中的属性address它既是jsonObject对象的属性,同时他自己本身也是一个JSON对象,
而且属性还可以是一个方法,将比如示例代码中的teaching函数。
二、解析JSON
1、json 只是一种文本字符串,它被存储在responseText属性中
2、为了读取存储在responseText属性中的JSON数据,需要用到javascript的 eval() 函数
eval函数会把一个字符串当做它的一个参数,然后这个字符串会被当做javascript代码来执行,因为JSON的字符串就是javascript代码构成的
所以它本身是可以执行的。
示例代码:
//1、将JSON字符串转化为JSON 对象
var jsonstr = "{'name': 'guigu'}";
var strJson = eval( "(" + jsonstr + ")");
alert(strJson.name);
//2、将字符串转化成json 对象,使用eval方法
var str = "alert('hello eval')"
//eval可以将一个字符创转化为js代码来执行
eval(str);
3、JSON提供了json.js包后,使用parseJSON()方法可以将JSON 对象解析为 JS 对象
三、
1、项目目录结构:
2、涉及相关文件的代码:
2.1、andy.js文件代码如下:
{"person": {
"name":"Andy Budd",
"website": "http://andybudd.com/",
"email": "andy@clearleft.com"
}
}
2.2、index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.οnlοad=function(){
var nodes = document.getElementsByTagName('a');
for(var i = 0; i<nodes.length;i++){
//1、获取a节点,并为其添加onclick函数响应
nodes[i].οnclick=function(){
//3、创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//4、准备发送请求的数据:url
var url = this.href;
var method = "GET";
//5、调用XMLHttpRequest对象的open方法
request.open(method, url);
//6、调用XMLHttpRequest对象的send方法
request.send(null);
//7、为XMLHttpRequest对象 添加onreadystatechange函数响应
request.onreadystatechange = function(){
//8、判断响应是否完成:XMLHttpRequest对象的 readystate 属性值为4的时候
if(request.readyState == 4){
//9、在判断响应是否可用:XMLHttpRequest对象的 Status 的值为200
if(request.status == 200 || request.status == 304){
//10-1 结果为xml格式,所以需要responseText 来获取
var result = request.responseText;
//10-2 结果不能直接使用,必须先创建对应的节点,在把节点加入到 #details 中
//使用eval将result字符串转化为JSON 对象
var jsonObject = eval("(" + result + ")")
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
//构建的目标节点的格式为:
/**
<h2><a href=mailto:andy@clerrleft.com >Andy Ruben</a></h2>
<a href=http://andy.com/ >http://andy.com/</a>
*/
//10-3 a节点 :<a href=mailto:andy@clerrleft.com >Andy Ruben</a>
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name))// name = Andy Ruben
aNode.href = "mailto:" + email;
//10-4 构建h2节点
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
//10-5 构建第二个a节点:<a href=http://andy.com/ >http://andy.com/</a>
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website))// name = Andy Ruben
aNode2.href = website;
//10-6 :将重新构建的节点复赋给div
var detialsNode = document.getElementById("detials");
detialsNode.innerHTML = "";
detialsNode.appendChild(h2Node);
detialsNode.appendChild(aNode2);
}
}
}
//2、取消a节点的默认行为
return false;
}
}
}
</script>
<body>
<h1>people</h1>
<ul>
<li> <a href="files/andy.js">andy</a></li>
<li> <a href="files/judy.js">judy</a></li>
<li> <a href="files/jojo.js">jojo</a></li>
</ul>
<div id="detials"></div>
</body>
</html>
</pre><p></p><pre>
这个和传送XML格式数据的主要区别是解析更加容易了:
if(request.status == 200 || request.status == 304){
//10-1 结果为xml格式,所以需要responseText 来获取
var result = request.responseText;
//10-2 结果不能直接使用,必须先创建对应的节点,在把节点加入到 #details 中
//使用eval将result字符串转化为JSON 对象
var jsonObject = eval("(" + result + ")")
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
四、JSON总结
优点;
1、作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧
2、JSON不需要从服务器端发送含有特定内容类型的首部信息
缺点:
1、语法过于严谨
2、代码不易读
3、eval函数存在风险
五、三种格式的对比总结
1、如果应用程序不需要与其它应用程序共享数据的时候,使用HTML片段来返回数据最简单
2、如果数据需要重用,JSON数据是个不错的选择,其在性能和文件大小方面有一定优势
3、当远程应用程序未知时,使用XML文档是首选,因为XML是web服务的领域的“世界语言”