风雨砥砺,岁月如歌—利用AJAX获取XML配置文件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Baronrothschlid/article/details/81868650

我们都知道使用AJAX有很多的好处,但是终究需要用在实践中才能体现出它的妙处,今天我们就来试一试吧。

首先我们建立一个简单的XML文件:

<?xml version="1.0" encoding="utf-8" ?>
<names>
	<name>张二</name>
	<name>张三</name>
	<name>张四</name>
</names>

然后我们就就在HTML获取它的数据:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc() {
            var xmlhttp;
            var txt, x, i;
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    xmlDoc = xmlhttp.responseXML;
                    txt = "";
                    x = xmlDoc.getElementsByTagName("name");
                    for (i = 0; i < x.length; i++) {
                        txt = txt + x[i].childNodes[0].nodeValue + "<br>";
                    }
                    document.getElementById("myDiv").innerHTML = txt;
                }
            }
            xmlhttp.open("GET", "文件/XQ.xml", true);
            xmlhttp.send();
        }
    </script>
</head>

<body>

    <h2>雇员信息:</h2>
    <div id="myDiv"></div>
    <button type="button" onclick="loadXMLDoc()">获取信息</button>

</body>
</html>

那么,我们就成功啦:

猜你喜欢

转载自blog.csdn.net/Baronrothschlid/article/details/81868650
今日推荐