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 οnclick="pre()">上一页</button>
<button οnclick="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 οnlοad="displayCD()">