JavaScript统制XML文件数据

JavaScript控制XML文件数据

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()">

JavaScript统制XML文件数据

相关推荐