3.Ajax_数据格式_XML

最新推荐文章于 2021-07-12 17:06:58 发布

原创最新推荐文章于 2021-07-12 17:06:58 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用AJAX技术以HTML格式实现客户端与服务器之间的数据交换，通过实例演示了如何解析XML数据并显示在网页上。

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

-------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三个超链接，将出现所需要展示的信息

未点击状态：