Ajax 读取 XML

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 xmlDoc = request.responseXML;

                            var name = xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;

                            var website = xmlDoc.getElementsByTagName("website")[0].firstChild.nodeValue;

                            var email = xmlDoc.getElementsByTagName("email")[0].firstChild.nodeValue;

                            console.log(name +"-"+website+"-"+email);



                            var setXml = document.createElement("a");

                            var XmlValue = document.createTextNode(name);

                            setXml.href = website;

                            setXml.appendChild(XmlValue);

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



                            document.getElementById("details").appendChild(setXml);



                        }

                    }

                }





                return false;

            }



        }





    }



</script>

<body>

<h1>people</h1>

<ul>

    <li><a href="files/andy.xml">Andy</a></li>

    <li><a href="files/richard.xml">Richard</a></li>

    <li><a href="files/jeremy.xml">jeremy</a></li>

    </ul>



<div id="details">





</div>



</body>

</html>
发表评论：