1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title>Using Ajax with XML</title>
  4.     <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
  5.     <script type="text/javascript">
  6.         var menu;
  7.  
  8.         //XMLHttpRequest对象:初始化为false;
  9.         var XMLHttpRequestObject = false;
  10.  
  11.         //创建XMLHttpRequest对象
  12.         if (window.XMLHttpRequest) {
  13.             XMLHttpRequestObject = new XMLHttpRequest();
  14.             //设置下载的数据类型为XML格式
  15.             if (XMLHttpRequestObject.overrideMimeType) {
  16.                 XMLHttpRequestObject.overrideMimeType("text/xml");
  17.             }
  18.         }
  19.         else if (window.ActiveXObject) {
  20.             XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  21.             //设置下载的数据类型为XML格式
  22.             XMLHttpRequestObject.setRequestHeader("text/xml");
  23.         }
  24.  
  25.         function getmenu(url) {
  26.             if (XMLHttpRequestObject) {
  27.                 //打开XMLHttpRequest对象
  28.                 XMLHttpRequestObject.open("GET", url);
  29.                 //获取XML数据
  30.                 XMLHttpRequestObject.onreadystatechange = function () {
  31.                     if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
  32.                         var xmlDocument = XMLHttpRequestObject.responseXML;
  33.                         //获得menu1.xml/menu2.xml所有的<mennuitem>标签
  34.                         menu = xmlDocument.getElementsByTagName("menuitem");
  35.                         //alert(menu.length);
  36.                         ListMenu();
  37.                         delete XMLHttpRequestObject;
  38.                         XMLHttpRequest = null;
  39.                     }
  40.                     else {
  41.                         //alert(XMLHttpRequestObject.readyState + "+" + XMLHttpRequestObject.status);
  42.                     }
  43.                 }
  44.  
  45.                 //真正执行下载的代码
  46.                 XMLHttpRequestObject.send(null);
  47.             }
  48.         }
  49.  
  50.         //绑定下拉框
  51.         function ListMenu() {
  52.             var loopIndex;
  53.             //获取下拉框控件
  54.             var selectControl = document.getElementById("menuList");
  55.             //循环添加选项到下拉框
  56.             for (loopIndex = 0; loopIndex < menu.length; loopIndex++) {
  57.                 selectControl.options[loopIndex] = new Option(menu[loopIndex].firstChild.data);
  58.             }
  59.         }
  60.     </script>
  61. </head>
  62. <body>
  63.     <h1>
  64.         Using Ajax with XML</h1>
  65.     <form>
  66.     <select size="1" id="menuList">
  67.         <!-- onchange="setmenu()"-->
  68.         <option>Select a menu item</option>
  69.     </select>
  70.     <br />
  71.     <br />
  72.     <input type="button" value="Select menu 1" onclick="getmenu('menu1.xml')" /><input
  73.         type="button" value="Select menu 2" onclick="getmenu('menu2.xml')" />
  74.     </form>
  75.     <div id="targetDiv" style="width: 100; height: 100;">
  76.         Your lunch selection will appear here</div>
  77. </body>
  78. </html>

　　

结果：

  1. 总结：
  1. responseXML不能写成responseXml
  2. 之前调试一直通不过，找了老半天原来问题是在这，浏览器对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. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  2. [nRF51822] 4、 图解nRF51 SDK中的Schedule handling library 和Timer library

    :nRF51822虽然是一个小型的单片机,但是能真正达到任意调用其官方驱动以及BLE协议栈的人还是奇缺的.据我所见,大都拿官方给的一个冗长的蓝牙低功耗心率计工程改的.之前我对于这个工程进行log跟踪, ...

  3. 翻译：AKKA笔记 - 介绍Actors

    任何以前做过多线程的人都不会否认管理多线程程序是困难并且痛苦的. 我说管理是因为它开始很容易而且当你看到性能提升时会很兴奋.但是,当你看到你没法从子线程的错误中恢复 或者 这些僵尸bug很难重现 或者 ...

  4. Visual Studio 2012系统环境变量设置（命令行）

    方法1.运行脚本vsvars32.bat:D:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Tools\vsvars32.bat ...

  5. Maven Myeclipse 搭建项目

    一.maven概述 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具! 简单说Maven 是一个项目管理和构建自动化工具 二.环境搭建 1. ...

  6. 每天一个linux命令（21）：find命令之xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...

  7. 《C与指针》第八章练习

    本章问题 1.根据下面给出的声明和数据,对每个表达式进行求值并写出它的值.在对每个表达式进行求值时使用原先给出的值(也就是说,某个表达式的结果不影响后面的表达式).假定ints数组在内存中的起始位置是 ...

  8. 封装WebAPI客户端，附赠Nuget打包上传VS拓展工具

    一.前言 上篇< WebAPI使用多个xml文件生成帮助文档 >有提到为什么会出现基于多个xml文件生成帮助文档的解决方案,因为定义的模型可能的用处有: 1:单元测试 2:其他项目引用(可 ...

  9. ssh(sturts2_spring_hibernate) 框架搭建之JPA代替hibernate

    一.JPA用来替代hibernate ⒈JPA的全称是JAVA Persistence API.指的是JPA通过注解或者是XML描述对象—关系表的映射关系,并且将运行的实体对象持久化数据库中. ⒉JP ...

  10. Redis基础介绍及安装示例

    1.基本概念 Redis是由Salvatore Sanfilippo(意大利)开发的一个开源的高性能键值存储数据库,于2009年发布第一个版本并与同一年开源,官方站点:http://www.redis ...