<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上没任何问题

Ajax学习笔记2之使用Ajax和XML的更多相关文章

  1. ajax学习笔记(原生js的ajax)

    ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...

  2. Ajax学习笔记之一----------第一个Ajax Demo[转载]

    原文地址: http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html 一.核心推动力:XMLHttpRequest对象XMLHttpR ...

  3. AJAX学习笔记——jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...

  4. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  5. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  6. Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

  7. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  8. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  9. Ajax学习笔记1之第一个Ajax应用程序

    代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...

随机推荐

  1. 微信分享调用 -- c#篇

    微信分享调用JS -- c#篇   1.前端 1.1 导入微信端的JS 如果你的网址是http,则地址为  http://res.wx.qq.com/open/js/jweixin-1.0.0.js ...

  2. Java基础之面向对象以及其他概念

    一.基础知识:1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨平台,jvm不是跨平台的. JR ...

  3. Redis教程(十三)：管线详解

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/141.html 一.请求应答协议和RTT: Redis是一种典型的基于C/ ...

  4. Js~对数组进行分组户数

    在sql里有group by,主要对数据结果集进行分组统计,而对于JS来说,有时我们也需要这种功能,例如一个数据{"dog","cat","dog&q ...

  5. Atitit  深入理解命名空间namespace  java c# php js

    Atitit  深入理解命名空间namespace  java c# php js 1.1. Namespace还是package1 1.2. import同时解决了令人头疼的include1 1.3 ...

  6. GitHub & Bitbucket & GitLab & Coding 的对比分析

    目前基于 Git 做版本控制的代码托管平台有很多种,比较流行的服务有 Github.Bitbucket. GitLab. Coding,他们各自有什么特点,个人使用者和开发团队又该如何选择? 在这篇文 ...

  7. iOS-数据持久化-CoreData

    CoreData详解 介绍: 在Cocoa环境下,如果你想使用数据库(如sqlite),你可以使用sql语句的方式通过相关的工具类进行数据库的直接操作.当然你也可以通过别人封装之后的一些简单框架,使得 ...

  8. 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南

    JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...

  9. cordova添加plugin

    cordova添加plugin #在线安装 cordova create chankoujie com.example.chankoujie ChanKouJie cordova plugin add ...

  10. KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定

    目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的 ...