ajax对xml的信息接收与发送

发布时间：2020-12-16 03:20:41 所属栏目：百科来源：网络整理

导读：xml文件 ?xml version="1.0" encoding="utf-8" ?students student namedancheng/name age21/age addr长春/addr /student student namedancheng1/name age22/age addr白城/addr /student student namedancheng2/name age23/age addr通榆/addr /student/studen

xml文件

<?xml version="1.0" encoding="utf-8" ?>
<students>
    <student>
        <name>dancheng</name>
        <age>21</age>
        <addr>长春</addr>
    </student>
    <student>
        <name>dancheng1</name>
        <age>22</age>
        <addr>白城</addr>
    </student>
    <student>
        <name>dancheng2</name>
        <age>23</age>
        <addr>通榆</addr>
    </student>
</students>

JavaScript操作文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function f1() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    //alert(xhr.responseText);   //返回字符串
                    //alert(xhr.responseXML);    //返回文档对象
                    var xmldom = xhr.responseXML;
                    //console.log(xmldom.firstChild);
                    //console.log(xmldom.firstChild.childNodes);
                    var stu = xmldom.getElementsByTagName('student');
                    var dv = document.getElementById('dv');
                    var s = "";
                    for(var i = 0; i < stu.length; i++){
                        var username = stu[i].getElementsByTagName('name')[0].innerHTML;
                        var userage = stu[i].getElementsByTagName('age')[0].innerHTML;
                        var useraddr = stu[i].getElementsByTagName('addr')[0].innerHTML;
                        s += "名称：" + username + "--年龄：" + userage + "--地址：" + useraddr + "<br/>";
                    }
                    document.getElementById('dv').innerHTML += s;
                }
            }
            xhr.open('get','./08-xml.xml');
            xhr.send(null);
        }
    </script>
</head>
<body>
    <h2>ajax+JavaScript实现对xml的处理</h2>
    <input type="button" value="处理" onclick="f1()" />
    <div id="dv"></div>
</body>
</html>

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!