利用getElementsByTagName解析 responseXML 返回的值
以下程序在IE6和Firefox/3.1b1 下测试通过
在Ajax返回的responseXML中,需要对其进行解析,而IE6和Firefox是有点小区别的
以下附上完整代码再解释。
XML文件:
HTML:
区别体现在HTML代码中40-51行,IE6中是要创建对象 ActiveXObject("Microsoft.XMLDOM") 对 responseXML对象进行加载后方可用 getElementsByTagName进行解析的。
不知道这点区别而一直在IE6下测试会一头雾水,没报错但也没结果。
为了简单,本程序在 创建XMLHttpRequest对象时只考虑了IE6及以上版本和FF,而如果要考虑老版本的IE,则需要更复杂的创建过程。
在Ajax返回的responseXML中,需要对其进行解析,而IE6和Firefox是有点小区别的
以下附上完整代码再解释。
XML文件:
- <?xml version="1.0"?>
- <options>
- <option>Red</option>
- <option>Green</option>
- <option>Blue</option>
- </options>
- <!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,则需要更复杂的创建过程。