您的位置：首页 > 其它

利用getElementsByTagName解析 responseXML 返回的值

2008-11-11 11:50 555 查看

以下程序在IE6和Firefox/3.1b1 下测试通过

在Ajax返回的responseXML中，需要对其进行解析，而IE6和Firefox是有点小区别的
以下附上完整代码再解释。
XML文件：
<?xml version="1.0"?>
<options>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</options>
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<script type="text/javascript">
var options = false;

//创建XMLHttpRequest对象
function CreateRequest()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else
return false;
}
function GetDataFromXML(filename)
{
var request = CreateRequest();
if (!request)
return;

var result = document.getElementById("result");
var txts = document.getElementById("txts");

request.open("GET", filename);
request.onreadystatechange = function()
{
if (request.readyState==4)
{
//由于是本地测试,有时会出现 request.status=0 的情况
if (request.status==200)
{
var xmlDoc;
//IE6
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(request.responseXML);//不可以是 responseText
}
//Firefox
else
{
xmlDoc = request.responseXML;
}
options = xmlDoc.getElementsByTagName("option");
txts.value = options.length;
ListOptions();
}
}
}
request.send(null);
}
//为select添加选项
function ListOptions()
{
var select = document.getElementById("select");

for (var i=0; i<options.length; i++)
{
select.options[i+1] = new Option(options[i].firstChild.data, options[i].firstChild.data);
}
}
function SelectChange()
{
var txts = document.getElementById("show");
var select = document.getElementById("select");
txts.style.color = select.value;
}
</script>

</head>

<body>
<div>
<input type="button" id="btn" onclick="GetDataFromXML('test.xml');" value="Submit" />
</div>

<div id="result">

<select id="select" onchange="SelectChange();">
<option>==请选择颜色==</option>
</select>

</div>

<div>
<textarea cols="10" rows="10" id="txts" style="width:500px; height:300px;" ></textarea>
</div>
<div id="show">
this is show...
</div>

</body>

</html>

区别体现在HTML代码中40－51行，IE6中是要创建对象 ActiveXObject("Microsoft.XMLDOM") 对responseXML对象进行加载后方可用getElementsByTagName进行解析的。
不知道这点区别而一直在IE6下测试会一头雾水，没报错但也没结果。

为了简单，本程序在创建XMLHttpRequest对象时只考虑了IE6及以上版本和FF，而如果要考虑老版本的IE，则需要更复杂的创建过程。

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

标签：

相关文章推荐

新的分享

章节导航