您的位置:首页 > 理论基础 > 计算机网络

javascript中XMLHttpRequest对象同步获取XML数据

2016-07-07 11:36 706 查看
XMLHttpRequest对象是一个利器,通过它可以在不重新加载整个页面的情况下实现对网页数据的局部更新,XML是用来存储传输数据的可扩展标记语言,这两个又是AJAX的核心。弄了个小例子捋一捋。new.xml来源于网络。test.html我放在我wamp环境下的www目录下,虽然并不影响运行。在这其中出现了XML数据无法读取的问题,我的这篇博客有具体的解决过程。

<!DOCTYPE HTML>
<html>
<meta charset="utf-8"></meta>
<head>
<script>
if(window.XMLHttpRequest)
{
demo=new XMLHttpRequest(); //IE7以上
}
else
{
demo=new ActiveXObject("Microsoft.XMLHTTP"); //IE7以下
}
//规定请求的类型,URL,不进行异步处理
demo.open("GET","./new.xml",false);
//发送请求到服务器
demo.send();
//对请求的响应,解析为 XML 并作为 Document 对象返回
doc=demo.responseXML;
mess=doc.getElementsByTagName("CD");
//解析信息
function displayCD()
{
artist=(mess[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(mess[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(mess[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
//将解析的对象信息放在在ID为showCD的html元素中显示
document.getElementById("showCD").innerHTML=txt;
}
i=0;
function next()
{
if(i<mess.length-1)
{
i++;
displayCD();
}
}
function previous()
{
if(i>0)
{
i--;
displayCD();
}
}
</script>
</head>
<body onload="displayCD()">
</body>
<div id='showCD'>
</div>
<input type="button" onclick="previous()" value="上一条" style="width:100px height:5px"></input>
<input type="button" onclick="next()" value="下一条" style="width:10px height:5px"></input>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息