ajax案例，调用XML文件

最新推荐文章于 2021-08-06 11:22:12 发布

weixin_30752699

最新推荐文章于 2021-08-06 11:22:12 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/yinwangyizhi/p/9078926.html

版权

一个对象

　　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>

转载于:https://www.cnblogs.com/yinwangyizhi/p/9078926.html

weixin_30752699

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax案例，调用XML文件

一个对象　　var xhr=new XMLHttpRequest();两个方法　　xhr.open('get|post',url,true|false);　　xhr.send()两个属性　　xhr.responseText　　　　　　　　　　　　xhr.responseXML一个事件　　xhr.onreadystatechangeAjax部分，在本地服务...
复制链接

扫一扫