zoukankan      html  css  js  c++  java
  • 原生ajax练习-post&xml

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <style>
        h2 {color: #555; }
        .p1 {color: #f99; }
        .p2 {color: #9f9; }
        .p3 {color: #99f; }
    
    
    
    </style>
    <ul id="ul">
        <li>
            <p class="p4"></p>
            <h2></h2>
            <p class="p1"></p>
            <p class="p2"></p>
            <p class="p3"></p>
        </li>
    </ul>
    </body>
    </html>
    <script>
        window.onload = function() {
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
    
            var url = 'xml/1.xml?';
            var para = '?_t='+new Date().getTime();//传递到send()当中去,不会有缓存
    
    
            // xhr.setRequestHeader('Content-Type','application/x-form-www-urlencoded')
            // Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
            
            
            xhr.open('post',url,true);//url中不再包含参数
            xhr.setRequestHeader('Content-Type','application/x-form-www-urlencoded')//必须位于open之后,send之前
            xhr.send(para);
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200 ) {
                    //得到的XML是一个对象,这个对象有各种属性和方法
                    var data = xhr.responseXML;
                    var NOVEL = data.getElementsByTagName('NOVEL')[0];
                    var books = NOVEL.getElementsByTagName('book');
                    var len = books.length;
                    //console.log(NOVEL);
                    var str = '';
                    for(var i=0;i<len;i++) {
                        str+= '<li><h2>'+getNodeText(books[i].getElementsByTagName('name')[0])+'</h2>';
                        str+= '<p class="p4">'+getNodeText(books[i].getElementsByTagName('author')[0])+'</p>';
                        str+= '<p class="p2">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p>';
                        str+= '<p class="p3">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p>';
                        str+= '<p class="p1">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p></li>';
                    }
                    document.getElementById('ul').innerHTML = str;
                }
            }
    
            function getNodeText(node){
                if(window.ActiveXObject){//IE
                    return node.text;
                }else{//标准浏览器
                    if(node.nodeType == 1){
                        return node.textContent;
                    }
                }
            }
    
        }
    </script>
    <?xml version="1.0" encoding="utf-8"?>
    <bookstore>
        <NOVEL>
            <book>
                <name>Herry Porter</name>
                <author>J.K Rolling</author>
                <publish_time>2058</publish_time>
            </book>
            <book>
                <name>三国演义</name>
                <author>罗贯中</author>
                <publish_time>1984</publish_time>
            </book>
            <book>
                <name>水浒传</name>
                <author>施耐庵</author>
                <publish_time>2501</publish_time>
            </book>
            <book>
                <name>红楼梦</name>
                <author>高雪琴</author>
                <publish_time>1865</publish_time>
            </book>
        </NOVEL>
        <MATH>
            <book>
                <name>圆周率</name>
                <author>猪无能</author>
                <publish_time>1869</publish_time>
            </book>
            <book>
                <name>勾股定理</name>
                <author>沙悟净</author>
                <publish_time>1875</publish_time>
            </book>
            <book>
                <name>相对论</name>
                <author>唐玄奘</author>
                <publish_time>1886</publish_time>
            </book>
        </MATH>
    </bookstore>
    

      

  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/darkterror/p/6555594.html
Copyright © 2011-2022 走看看