Ajax xml , JavaScript,PHP。js和Ajax接收处理xml信息

130 篇文章 0 订阅
23 篇文章 0 订阅


08-xml.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        function f1(){
            //① ajax请求xml信息
            // responseXML: 专门负责接收xml信息的属性
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    //alert(xhr.responseXML);//[object XMLDocument]
                    //XMLDocument是xml根节点(students)的父节点对象
                    var xmldom = xhr.responseXML;
                    //console.log(xmldom.firstChild);//<students>

                    //获得students的子节点(3个student)
                    //在主流浏览器(火狐、chrome、safari、opera)里边会把"空白、回车"等也算作具体节点
                    //console.log(xmldom.firstChild.childNodes);//空白节点 和 student 一共是7个节点

                    //dom处理html和xml的标准一致
                    var std = xmldom.getElementsByTagName('student');
                    //console.log(std);//HTMLCollection[student, student, student]

                    //循环遍历std
                    //document 和 普通的元素节点  都可以调用getElementsByTagName()方法
                    //但是大家 的作用范围不一样
                    //文本节点.nodeValue: 通过文本节点获得对应的文本信息 
                    var s = "";
                    for(var i=0; i<std.length; i++){
                        var nm = std[i].getElementsByTagName('name')[0].firstChild.nodeValue;  //和innerHTML作用相同。该方式可以兼容不同浏览器
                        var ag = std[i].getElementsByTagName('age')[0].innerHTML;
                        s += "名字:"+nm+"---年龄:"+ag+"<br />";
                    }
                    document.getElementById('result').innerHTML = s;
                }
            }
            xhr.open('get','./08.xml');
            xhr.send(null);
        }
        </script>
    </head>
    <body>
        <h2>ajax+javascript实现xml的接收和处理</h2>
        <input type="button" value="触发" οnclick="f1()" />
        <div id="result"></div>
    </body>
</html>

08.xml:

<?xml version="1.0" encoding="utf-8" ?>
<students>
	<student>
		<name>mary</name>
		<age>20</age>
	</student>
	<student>
		<name>linken</name>
		<age>26</age>
	</student>
	<student>
		<name>yuehan</name>
		<age>23</age>
	</student>
</students>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值