首页 > 代码库 > 原生ajax练习-post&xml

原生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>

  

原生ajax练习-post&xml