Ajax学习笔记2之使用Ajax和XML

原文链接： https://www.mk2048.com/blog/blog.php?id=h0chk0jah10j&title=Ajax%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B02%E4%B9%8B%E4%BD%BF%E7%94%A8Ajax%E5%92%8CXML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using Ajax with XML</title>
    <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var menu;

        //XMLHttpRequest对象:初始化为false;
        var XMLHttpRequestObject = false;

        //创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
            //设置下载的数据类型为XML格式
            if (XMLHttpRequestObject.overrideMimeType) {
                XMLHttpRequestObject.overrideMimeType("text/xml");
            }
        }
        else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            //设置下载的数据类型为XML格式
            XMLHttpRequestObject.setRequestHeader("text/xml");
        }

        function getmenu(url) {
            if (XMLHttpRequestObject) {
                //打开XMLHttpRequest对象
                XMLHttpRequestObject.open("GET", url);
                //获取XML数据
                XMLHttpRequestObject.onreadystatechange = function () {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                        var xmlDocument = XMLHttpRequestObject.responseXML;
                        //获得menu1.xml/menu2.xml所有的<mennuitem>标签
                        menu = xmlDocument.getElementsByTagName("menuitem");
                        //alert(menu.length);
                        ListMenu();
                        delete XMLHttpRequestObject;
                        XMLHttpRequest = null;
                    }
                    else {
                        //alert(XMLHttpRequestObject.readyState   " "   XMLHttpRequestObject.status);
                    }
                }

                //真正执行下载的代码
                XMLHttpRequestObject.send(null);
            }
        }

        //绑定下拉框
        function ListMenu() {
            var loopIndex;
            //获取下拉框控件
            var selectControl = document.getElementById("menuList");
            //循环添加选项到下拉框
            for (loopIndex = 0; loopIndex < menu.length; loopIndex  ) {
                selectControl.options[loopIndex] = new Option(menu[loopIndex].firstChild.data);
            }
        }
    </script>
</head>
<body>
    <h1>
        Using Ajax with XML</h1>
    <form>
    <select size="1" id="menuList">
        <!-- onchange="setmenu()"-->
        <option>Select a menu item</option>
    </select>
    <br />
    <br />
    <input type="button" value="Select menu 1" onclick="getmenu('menu1.xml')" /><input
        type="button" value="Select menu 2" onclick="getmenu('menu2.xml')" />
    </form>
    <div id="targetDiv" style="width: 100; height: 100;">
        Your lunch selection will appear here</div>
</body>
</html>

结果：

总结：

responseXML不能写成responseXml
之前调试一直通不过，找了老半天原来问题是在这，浏览器对responseXml也不报没有该属性或者为null

注：在IE浏览器上按F12调试，只有在版本为10以上时才得到正确结果，在360上没任何问题

更多专业前端知识，请上【猿2048】www.mk2048.com

Ajax学习笔记2之使用Ajax和XML

猜你喜欢