4.Ajax_数据格式_json_json xsm接口数据模型-优快云博客

本文深入介绍了JSON（JavaScript Object Notation）的基本概念与规则，详细解释了如何使用JavaScript的eval()函数和json.js包的parseJSON()方法解析JSON数据，通过一个具体的示例展示了从服务器获取并解析JSON数据的过程。

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"
    }
}

效果：

至此目标就达到了。