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

时间：2022-09-01 19:38:57
<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>

　　

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

结果：

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

总结：
responseXML不能写成responseXml

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

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

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

  1. ajax学习笔记&lpar;原生js的ajax&rpar;

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

  2. Ajax学习笔记之一----------第一个Ajax Demo&lbrack;转载&rsqb;

    原文地址: 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&quot ...

  4. AJax 学习笔记二&lpar;onreadystatechange的作用&rpar;

    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. Jquery ajax 学习笔记

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

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

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

  9. Ajax学习笔记&lpar;二&rpar;

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

随机推荐

  1. Django项目流程&lpar;摘抄整理&rpar;

    1.操作环境 Windows 8.1 Django 1.9 Python 2.7.10 2.创建工程 在cmd中运行后面的所有命令:

  2. SpringBoot常用配置简介

    SpringBoot常用配置简介 1. SpringBoot中几个常用的配置的简单介绍 一个简单的Spring.factories # Bootstrap components org.springf ...

  3. java日期格式的转换

    1.转换指定格式的日期 /** * 日期格式转换 * @throws ParseException */ public String dateformat(String date,String tab ...

  4. 洛谷P2336 喵星球上的点名

    解:SAM + 线段树合并 + DFS序. 姓和名之间插入特殊字符,转化为下题: 给定串集合S,T,问S中每个串包含了T中的几个串?T中每个串被多少个S中的串包含? 解:对S建广义SAM,并线段树合并 ...

  5. Ubuntu安装Sqlite报错&colon;No module named &&num;39&semi;ConfigParser&&num;39&semi;

    安装命令:`sudo apt install sqlite` 原因,我把系统默认的python版本改为了python3 改为python2即可,用update-alternatives命令,见此文(方 ...

  6. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  7. windows下的MySql实现读写分离

    MySql读写分离 1.删除系统服务 sc delete 服务名 2.复制安装好的3380文件夹到3381 3.进入3381\logs目录下将所有文件删除 4.进入3381\data目录,将所有的lo ...

  8. ajax file upload 修改

    先前 写过 JS 判断上传 文件 大小 后来发现一个问题, 就是单页面运行 js 没有问题, 但是基础呢个到项目中 有些时候 obj_img.dynsrc = file.value; 报错说没有 权限 ...

  9. Python hypot&lpar;&rpar; 函数

    描述 hypot() 返回欧几里德范数 sqrt(x*x + y*y). 语法 以下是 hypot() 方法的语法: import math math.hypot(x, y) 注意:hypot()是不 ...

  10. brew安装mysql

    1. 安装mysql5.7版本,不指定版本就默认安装最新的,目前最新是8 brew install mysql@5.7 2. 安装完进入/usr/local/Cellar/mysql@5.7目录,可以 ...

相关文章