Ajax 读取 JSON

2016-7-11 流沙团
学习用的代码,意义不大
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Ajax - XML</title>

</head>



<style type="text/css">

    #details{

        width:400px;

        height: 200px;

        background-color: aliceblue;

    }

</style>



<script type="text/javascript">



    window.onload = function(){

        var aNodes =  document.getElementsByTagName("a");

        //alert(aNodes.length);

        for(var i=0;i<aNodes.length;i++)

        {

            aNodes[i].onclick = function(){



                var request  = new XMLHttpRequest();

                var method = "GET";

                var url = this.href;



                request.open(method,url);

                request.send(null);



                request.onreadystatechange = function(){

                    if(request.readyState == 4){

                        if(request.status == 200 || request.status == 304){

                            //document.getElementById("details")

                           var jsonData = request.responseText;

                            var object = eval("("+jsonData+")");



                            var name = object.person.name;

                            var website = object.person.website;

                            var email = object.person.email;



                            var str = name+"<br/>"+website+"<br/>"+email;



                            document.getElementById("details").innerHTML = str;



                        }

                    }

                }

                return false;

            }



        }

        

    }



</script>

<body>

<h1>people</h1>

<ul>

    <li><a href="json/andy.json">Andy</a></li>

    <li><a href="json/richard.json">Richard</a></li>

    <li><a href="json/jeremy.json">jeremy</a></li>

</ul>



<div id="details">





</div>



</body>

</html>
发表评论：