首页 > Web开发 > 详细

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

时间:2015-09-25 13:03:24      阅读:190      评论:0      收藏:0      [点我收藏+]
<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();
                    }
                    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上没任何问题

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

原文:http://www.cnblogs.com/zhyue93/p/Ajax2.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!