ajax案例，调用XML文件

一个对象

　　var xhr=new XMLHttpRequest();

两个方法

　　xhr.open('get|post',url,true|false);

　　xhr.send()

两个属性

　　xhr.responseText　　　　　　　　
　　　　xhr.responseXML

一个事件

　　xhr.onreadystatechange

Ajax部分，在本地服务器调用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <div class="aii">
        <input type="button" value="获取">
        <div class="cainame"></div>
    </div>
    <script>
    var cainame=document.querySelector('.cainame');
    function aa(){
    var xhr=new XMLHttpRequest();
    var url="ss.xml";
    xhr.open('get',url,true);
    xhr.onreadystatechange=function(){
        if (4==this.readyState && 200==this.status) {
            var cai=this.responseXML;
            console.log(cai);
            var cname=cai.getElementsByTagName("name");
            var tt="";
            for (var i=0;i<cname.length;i++) {
                tt+=cname[i].childNodes[0].nodeValue+"<br>"
            };
            console.log(tt);
            cainame.innerHTML=tt;
        }
    }
    xhr.send();
    }
    document.querySelector('[type=button]').onclick=aa;
    </script>
    </body>
</html>

xml文件ss.xml

<?xml version="1.0" encoding="utf-8"?>
<menu>
    <caipu>
        <name>.赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
    <caipu>
        <name>赠送</name>
        <price>10.00</price>
    </caipu>
</menu>

ajax案例，调用XML文件

猜你喜欢