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

最新推荐文章于 2024-10-06 12:35:53 发布

ZDX_Y

最新推荐文章于 2024-10-06 12:35:53 发布

阅读量3k

点赞数 2

分类专栏： web开发 javascript HTML XML 文章标签： javascript xml ajax xmlhttprequest

本文链接：https://blog.csdn.net/ZDX_Y/article/details/51849942

版权

web开发同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

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>