3.Ajax_数据格式_XML_ajax xml数据格式-CSDN博客

本文链接：https://blog.csdn.net/XSM521/article/details/107831240

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送，服务器端的编程语言只能以如下三种格式返回数据：

-------XML

-------HTML

-------JSON

在此将介绍HTML格式时的ajax的实现方法。

demo3:

<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){
                             //结果是xml 格式，所以需要使用requestXML来进行解析
                            var result = request.responseXML;
                            //结果不能直接使用，必须先  创建对应的节点，再把节点加入
                            var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                            var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                            alert(name);
                            alert(website);
                            alert(email);
                     }
            }
     }
            return false;
            }
        }
}
</script>

在<body></body>标签之间加入如下代码：

<body>
    <h1>People</h1>
    <ul>
    <li><a href="andy.xml">Andy</a></li>
    <li><a href="richard.xml">Richard</a> </li>
    <li><a href="jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
</body>

andy.xml:(为例，其他的读者可仿照)

<?xml version="1.0" encoding="utf-8" ?>
<details>
    <name>Andy Keith</name>
    <website>http://adactio.com</website>
    <email>jeremy@clearleft.com</email>
</details>

预想效果是点击andy,Richard,Jeremy三个超链接，将出现所需要展示的信息

未点击状态：