Ajax学习笔记2之使用Ajax和XML_H5之家 - 中国HTML5教程资源分享第一站

[摘要]本文是对Ajax学习笔记2之使用Ajax和XML的讲解，对学习JavaScript编程技术有所帮助,与大家分享。

<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">  <option>Select a menu item</option> </select> <br /> <br /> <input type="button" value="Select menu 1" /><input type="button" value="Select menu 2" /> </form> <div> Your lunch selection will appear here</div> </body> </html>

结果：

总结：

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

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