Ajax_数据格式

下面是XML格式异步获取代码：

点击不同的a连接，获取不同的xml文本中的数据

    <%--
    Created by IntelliJ IDEA.
    User: Administrator
    Date: 2019/6/26
    Time: 10:57
    To change this template use File | Settings | File Templates.
    --%>
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <html>
        <head>
        <title>XML格式传输</title>
        <style>
        #detail{
        width: 200px ;
        height: 200px;
        border: 1px red dotted;
        }
        a:hover{
            color: red;
            }

        </style>
        <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 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){
        //结果为xml格式，所以需要使用resposeXML来获取
        var result = request.responseXML;
        //结果不能直接使用，必须先创建对应的节点，在把节点放入到#detail中
        /*
        目标格式为：
        <h2><a href="mailto:cearleft.com">Andy Budd</a></h2>
        */
        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);
        var aNode = document.createElement("a");
        aNode.appendChild(document.createTextNode(name));
        aNode.href = "https://www.baidu.com";

        var detail = document.getElementById("detail");
        detail.innerText = "";
        detail.appendChild(aNode);
        }
        }
        };
        return false;
        }

        }

        }
        </script>
        </head>
        <body>
        <a href="jeremy.xml">点击我获取jeremy数据</a><br>
        <a href="Andy.xml">点击我获取Andy的数据</a><br>
        <a href="Richard.xml">点击我获取Richard的数据</a>
        <div id="detail"></div>
        </body>
        </html>

获取的xml文本的代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<details>
    <name>Andy chen</name>
    <website>http://andy.com</website>
    <email>[email protected]</email>
</details>

<?xml version="1.0" encoding="UTF-8" ?>
<details>
    <name>Jeremy Keith</name>
    <website>http://adactio.com</website>
    <email>[email protected]</email>
</details>

<?xml version="1.0" encoding="UTF-8" ?>
<details>
    <name>Richar Keith</name>
    <website>http://richard.com</website>
    <email>[email protected]</email>
</details>

优点：

XML是一种通用的数据格式
不必把数据强加到已定义的格式中，而要为数据自定义合适的标签
利用DOM可以完全掌控文档

缺点：

如果文档来自服务器，就必须保证文档含有正确的首部通信信息，如文档类型不正确，那么responseXML的值空的。
当浏览器接收到长的XML文件后，DOM解析可能会很复杂。

Ajax_数据格式_XML

优点：

缺点：

相关文章