Debug客栈
做一个爱分享的程序猿
Debug客栈
Ajax对XML信息的接收和处理
  • Ajax负责请求xml和接收xml信息,dom负责处理xml信息
  • dom:
    • php中,dom是php与xml(html)之间的沟通桥梁;
    • javascript中,dom是javascript与html(xml)之间沟通的桥梁。
  • xml需要从服务器端返回到客户端被javascript处理;
  • ajax:负责请求xml回来;
  • DOM(javascript):负责处理xml信息。

Ajax+JavaScript实现对xml的接收处理,可以方便我们后期实现一个静态网站(html+css+javascript)实现对各个接口数据的处理。

document对象和普通元素对象都可以调用getElementsByTagName()方法。

函数执行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用ajax+javaScript实现对xml的接受和处理</title>
    <script type="text/javascript">
        function f1(){
            //ajax请求xml信息回来
            //javascript的dom技术处理xml
            //document xmldocument
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 ){
                    //[object XMLDocument] 其实是xml根结点的父节点对象
                    //alert(xhr.responseXML);
                    var xmldom = xhr.responseXML;

                    //console.log(xmldom.firstChild);<weather>
                    var citys = xmldom.getElementsByTagName('city');

                    //citys[1] //第二个city的元素节点对象
                    /*for(var k in citysp[1]){//k代表元素节点的成员名称
                        //有输出其中一个成员方法:getElementsByTagName
                        //结论:document对象 和 普通元素都可以调用getElementdByTagName函数
                        console.log(k);
                    }*/
                    var str ="";
                    for(var i=0; i<citys.length; i++){
                        var nm = citys[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        var temp = citys[i].getElementsByTagName('temp')[0].firstChild.nodeValue;
                        var wind = citys[i].getElementsByTagName('wind')[0].firstChild.nodeValue;
                        str += "城市:" +nm+ "--温度:"+temp+"--风向:"+wind+"<br/>";
                    }
                    document.getElementById('result').innerHTML =str;
                }
            }
            xhr.open('get','./test01.xml');
            xhr.send(null);
        }
    </script>
</head>
<body>
    <h2>利用ajax+javaScript实现对xml的接受和处理</h2>
    <input type="button" value="触发" onclick="f1()">
    <div id="result"></div>
</body>
</html>

XML文件数据

<?xml version="1.0" encoding="utf-8" ?>
<weather>
    <city>
        <name>北京</name>
        <temp>23-31度</temp>
        <wind>北风</wind>
    </city>
    <city>
        <name>上海</name>
        <temp>23-31度</temp>
        <wind>东风</wind>
    </city>
    <city>
        <name>广州</name>
        <temp>28-31度</temp>
        <wind>南风</wind>
    </city>
    <city>
        <name>深圳</name>
        <temp>29-31度</temp>
        <wind>东南风</wind>
    </city>
</weather>
赞赏
本文链接:https://www.debuginn.cn/403.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,转载请保留此文章链接
相关链接: Debug客栈  |  Debug客栈引导页  |  加入交流群  |  赞助本站  |  博主微博  |  博主推特  |  音乐下载器
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善

发表评论

textsms
account_circle
email

Debug客栈

Ajax对XML信息的接收和处理
Ajax负责请求xml和接收xml信息,dom负责处理xml信息dom: php中,dom是php与xml(html)之间的沟通桥梁;javascript中,dom是javascript与html(xml)之间沟通的桥梁。 xml需要从服务器端…
扫描二维码继续阅读
2018-10-22