JSON 的概念
* 首先介绍一下json(javascript Object Notation)一种简单的数据格式,比xml轻巧,json是JavaScript的原生格式,这意味着处理JSON数据不需要任何特殊的API或工具包。
* json规则简单,对象是一个无序的“ ‘名称/值’ 对 ”集合,一个对象以“{” 开始,“}”结束,每个”名称”之后跟一个“:”(冒号),“ ‘名称/值’ 对 ”之间使用逗号相隔。
解析JSON
* json只是一种文本字符串,他被存储在responseText属性中。
* 需要读取存储在responseText中的json数据,需要根据javaScript 的eval()语句。函数eval()会把一个字符串当做他的参数,然后这个字符串会被当做JavaScript代码来执行。因为JSON 的字符串就是由JavaScript代码来构成的。所以他本身就可以执行。
代码示:
var jsonObject = xhr.responseText();
var personObject = eval("(" +jsonResponse + ")");
var name = personObject.person.name;
var website =personObject.person.website;
var email = personObject.person.email;
* JSON 提供了json.js包,下载http://www.json.org/json.js后,使用parseJSON()方法将字符串解析为js对象。
var jsonObject = xhr.responseText();
var personObject = jsonResponse.parseJSON();
var name = personObject.person.name;
var website =personObject.person.website;
var email = personObject.person.email;
下面用个实例来说明一下:
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { var aNodes = document.getElementsByTagName("a"); for (var i = 0; i < aNodes.length; i++) { aNodes[i].onclick = function () { var request = new XMLHttpRequest(); var url = this.href; var method = "GET"; request.open(method, url); request.send(null); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200 || request.status == 304) { var result = request.responseText; var object = eval("(" + result + ")"); var name = object.person.name; var website = object.person.website; var email = object.person.email; alert(name); alert(website); alert(email); } } } return false; } } } </script> </head> <body> <h1>People</h1> <ul> <li><a href="andy.js">Andy</a></li> </ul> <div id="details"></div> </body> </html>
andy.js:(可能会报错,但是没关系)
{ "person":{ "name":"小智 ", "website":"http://andybudd,com/", "email":"andy@cleatleft.com" } }
效果:
至此目标就达到了。