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

我会带着你远行 2023-06-10 10:25 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(); 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">  <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>

![815622-20150925112400694-823685911.jpg][]

结果：

![815622-20150925112500334-740112787.jpg][]

总结：

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

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

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[815622-20150925112400694-823685911.jpg]: /images/20230531/44030bfbe5e34ddcb53b51db19a4e423.png
[815622-20150925112500334-740112787.jpg]: /images/20230531/a0e56dce0aba46b09465a3cf688ec946.png