Ajax_ data format _XML

Here is an asynchronous XML format to get the code:

Click on a different connection, access to different data xml text

    <%--
    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 format for transmitting </ 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 is || Request / Status == 304 ) {
         // result xml format, it is required to obtain resposeXML 
        var = result request.responseXML;
         // results can not be directly used, must create a corresponding node in the node to put in #detail 
        / *
        Target format is:
        <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"> Click I get jeremy data </a> <br><a
        href= "Andy.xml"> Click me get Andy's data </a> <br><a
        href= "Richard.xml"> Click me get Richard data </a>
        <div id="detail"></div>
        </body>
        </html>

xml text acquired code is as follows:

<?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>

advantage:

  1. XML is a common data format
  2. Unnecessary to impose data format is defined, and to define the appropriate data from the tag
  3. DOM complete control over the use of the document

Disadvantages:

  1. If the document from the server, you must ensure that the document contained the correct communication header information, such as document type is not correct, then the value of responseXML empty.
  2. When the browser receives the long file of XML, DOM parsing can be complex.

Guess you like

Origin www.cnblogs.com/huangpeideng/p/11089092.html