ajax读取服务器端的xml数据 (转)
最近比较忙,没有空写东西 ,转一篇文章吧
原文:http://blog.csdn.net/shuzhp/archive/2008/10/10/3049039.aspx
<html>
<body>
<select name="userid" id="userid">
<option value="0">
请选择分类
</option>
</select>
<script>
//此程序必须在服务器上运行
// XMLHTTP是在javascript中直接建立的HTTP请求,
// 它可以实现向服务器发送数据以及接收从服务器返回的数据
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //创建对象(IE)
//打开与服务器端的 服务网页的链接 同步
//MyXml.xml在服务器上 (只请求MyXml)
xmlhttp.open("GET", "MyXml.xml", false);
//向服务器发送请求
xmlhttp.send();
//xmlhttp.responseXML为服务器返回的XML数据
//xmlhttp.responseText为服务器返回的文本字符串信息
alert("XMLHTTP获取从服务器返回的XML数据:"+xmlhttp.responseXML.xml);
//以下为XML的操作对象XMLDOM,它可以操作xml节点,与HTMLDOM操作html类似
//创建XMLDOC对象
function createXMLDOM()
{
var arrVersions= ["MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0","MSXML2.DOMDocument", "Microsoft.XmlDoc"];
for (var i=0; i < arrVersions.length; i++)
{
try
{
var xmlDoc = new ActiveXObject(arrVersions[i]);
return xmlDoc;
}
catch (oError)
{
////忽略,继续创建
}
}
throw new Error("系统没有安装MSXML");
}
var xmlDoc=createXMLDOM();
xmlDoc.async=false; //同步
//如果异步执行以下操作
//xmlDoc.onreadystatechange=function()
//{
// if(xmlDoc.readyState==4) //判断是否已经装载完成 xmlDoc对象
// {
// alert("aaaa");
// }
//}
//还有一个函数:loadXML(string):以字符的形式直接创建XML文档,并把string写入xml中
xmlDoc.load("MyXml.xml"); //从服务器上载入xml文件(不能载入不同服务器的xml)
var str=xmlDoc.xml;
alert("xmlDoc.xml属性:"+str);
var node=xmlDoc.documentElement; //获取根结点
alert("根结点名称:"+node.nodeName); //根结点为items
var str2=node.xml;
alert("根结点为items的xml属性:"+str2);
var node=xmlDoc.getElementsByTagName("item")[0];
var str3=node.xml;
alert("下一结点item的xml属性:"+str3);
// 以上输出:
//<item>
// <id>1</id>
// <name>bb1</name>
//</item>
var node=xmlDoc.getElementsByTagName("id")[0];
var str4=node.xml;
alert("下一结点item的xml属性:"+str4);
// 以上输出:
// <id>1</id>
//用xml中数据给第二个下拉列表赋值,执行后下拉列表有值
var items = xmlDoc.getElementsByTagName("item");
for(i=1;i<items.length+1;i++)
{
//nodeValue取节点的值
var value =items[i-1].getElementsByTagName("id")[0].firstChild.nodeValue;
var text=items[i-1].getElementsByTagName("name")[0].firstChild.nodeValue;
//下拉列表options集合,new Option生成新的option
document.getElementById("userid").options[i] = new Option(text,value);
}
var node2=document.documentElement;
alert("本页信息的根结点document.documentElement:"+node2.nodeName);
</script>
</body>
</html>