标签：java javascript xml xmlhttprequest
1.提供好 XML文件的数据源:
<?xml version="1.0" encoding="UTF-8"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> ... </CATALOG>2.编写HTML页面的显示数据的表格
<table border="1px"> <tr> <td> 标题: </td> <td id="title"> </td> </tr> <tr> <td> 艺术家: </td> <td id="artist"> </td> </tr> <tr> <td> 国家: </td> <td id="country"> </td> </tr> <tr> <td> 公司: </td> <td id="company"> </td> </tr> <tr> <td> 价格: </td> <td id="price"> </td> </tr> <tr> <td> 年份: </td> <td id="year"> </td> </tr> <tr> <td colspan="2"> <button onclick="pre()">上一页</button> <button onclick="next()">下一页</button> </td> </tr> </table>
3.编写JavaScript脚本文件
<script type="text/javascript">
//加载XMLHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "NewFile.xml", false);//打开链接
xmlhttp.send();//发送数据
var xmlDoc = xmlhttp.responseXML;//获得xmlDoc的文件
var x = xmlDoc.getElementsByTagName("CD");
var i = 0;
var title = document.getElementById("title");
var artist = document.getElementById("artist");
var country = document.getElementById("country");
var company = document.getElementById("company");
var price = document.getElementById("price");
var year = document.getElementById("year");
//加载数据
function displayCD(){
title.innerHTML = xmlDoc.getElementsByTagName("TITLE")[i].childNodes[0].nodeValue;
artist.innerHTML = xmlDoc.getElementsByTagName("ARTIST")[i].childNodes[0].nodeValue;
country.innerHTML = xmlDoc.getElementsByTagName("COUNTRY")[i].childNodes[0].nodeValue;
company.innerHTML = xmlDoc.getElementsByTagName("COMPANY")[i].childNodes[0].nodeValue;
price.innerHTML = xmlDoc.getElementsByTagName("PRICE")[i].childNodes[0].nodeValue;
year.innerHTML = xmlDoc.getElementsByTagName("YEAR")[i].childNodes[0].nodeValue;
}
//上一页,索引减一,如果小于零就等于零
function pre(){
i--;
if(i < 0){
i = 0;
}
displayCD();
}
//下一页
function next(){
i++;
displayCD();
}
</script>4.在页面加载完成后加载数据
<body onload="displayCD()">
标签：java javascript xml xmlhttprequest
原文地址：http://blog.csdn.net/qq_22605739/article/details/46484519
