Ajax拿取JSON格式的数据

最新推荐文章于 2024-10-09 17:17:37 发布

刘小筛

最新推荐文章于 2024-10-09 17:17:37 发布

阅读量815

点赞数

分类专栏：前端 Ajax 文章标签： ajax javascript json

本文链接：https://blog.csdn.net/lhjbk/article/details/53135735

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Ajax

7 篇文章 0 订阅

订阅专栏

JSON简介

JSON(javaScript Object Notation) 一种简单的数据格式，比xml更轻巧。 JSON是javaScript原生格式。这意味着在 javaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称／值’对”集合。一个对象以“{”(做括号)开始，“}”(右括号)结束。但每个“名称”后跟一个“ ：”（冒号）；“’名称／值‘对”之间使用“，”（逗号）分隔。

解析JSON

JSON只是一种文本字符串，它被存储在responsetext属性中
为了读取存储在responseText属性中的JSON数据，需要根据javaScript对eval语句。函数eval会把一个字符串当作它对参数，然后这个字符串会被当作javaScript代码来执行。因为JSON 对字符串就是由javaScript代码构成的，所以它本身是可执行的
JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析JS

var jsonResponse=xhr.responseText;
        var personObject=jsonResponse.parseJSON();
        var name=personObject.person.name;
        var website=personObject.person.website;
        var email=personObject.person.email;

JSON小结

优点：

作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧。
JSON不需要从服务器端发送含有特定内容类型的首部信息

缺点

语法过于严谨
代码不易读
eval函数存在风险

解析JSON文件代码示例

1、json数据(所在文件：json,js)代码：

{
    "person": {
    "name": "JBK",
        "website": "http://baidu.com/",
        "email": "15204510180@163.com"
}
}

2、解析代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            var  as= document.getElementsByTagName("a");

            for(var i=0;i< as.length;i++){
                as[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 objectJSON=eval("("+result+")");
//                                2、结果不能直接使用,必须先创建对应但节点,再把节点加入到#detail中
//                                目标格式为:
//                                      <h2><a href="mailto:15204510180@163.com">JBK</a></h2>
//                                      <a href="http://baidu.com/">http://baidu.com</a>
                                var name=objectJSON.person.name;
                                var website=objectJSON.person.website;
                                var email=objectJSON.person.email;
                                //alert(name);
                                //alert(website);
                                //alert(email);
                                var aNode=document.createElement("a");
                                aNode.appendChild(document.createTextNode(name));
                                aNode.href="maelto:"+email;

                                var hNode=document.createElement("h2");
                                hNode.appendChild(aNode);

                                var aNode1=document.createElement("a");
                                aNode.appendChild(document.createTextNode(website));
                                aNode.href=website;

                                var dNode=document.getElementById("details");
                                dNode.innerHTML="";
                                dNode.appendChild(aNode);
                                dNode.appendChild(aNode1)


                            }

                        }
                    }
                    return false;

                }
            }



        }
    </script>
</head>
<body>
<a href="json.js">1</a>
<a href="json.js">2</a>
<a href="json.js">3</a>
<a href="json.js">4</a>
<div id="details"></div>

</body>
</html>