您的位置：首页 > 其它

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

2015-09-25 11:29 134 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航