AJAX处理XML文件

最新推荐文章于 2019-04-02 22:16:49 发布

单眼皮的小熊

最新推荐文章于 2019-04-02 22:16:49 发布

阅读量382

点赞数

分类专栏： javascript 文章标签： xml ajax

本文链接：https://blog.csdn.net/z858466/article/details/72152637

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

首先XML文件内容cd.xml：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Hide your heart</TITLE>
		<ARTIST>Bonnie Tyler</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS Records</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
</CATALOG>

然后ajax代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">获取CD的详细信息</button>
		<table border="1px solid #ccc" cellpadding="5" cellspacing="0" align="center">
			<thead>
				<tr>
					<th>TITLE</th>
					<th>ARTIST</th>
					<th>COUNTRY</th>
					<th>COMPANY</th>
					<th>PRICE</th>
					<th>YEAR</th>
				</tr>
			</thead>
			<tbody>
			
			</tbody>
			
		</table>
		<script>
		var oBtn=document.getElementById("btn");
		var tbody=document.getElementsByTagName("tbody")[0];
		
		
		function loadDoc(){
			//第一步创建一个xhr对象
			var xhr;
			var xmlDoc;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject('Microsoft.XMLHTTP"');
			}
			// 第二步 感知AJAX的状态
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4 && xhr.status==200){
				 	  xmlDoc=xhr.responseXML;
				 	//解析xmlDoc
				 	var cd=xmlDoc.getElementsByTagName('CD');
				 	for(var i=0;i<cd.length;i++){
				 		var title=cd[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue;
				 		var artist=cd[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue;
				 		var country=cd[i].getElementsByTagName('COUNTRY')[0].childNodes[0].nodeValue;
				 		var company=cd[i].getElementsByTagName('COMPANY')[0].childNodes[0].nodeValue;
				 		var price=cd[i].getElementsByTagName('PRICE')[0].childNodes[0].nodeValue;
				 		var year=cd[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue;
				 		
				 		tbody.innerHTML +="<tr><td>"+title+"</td><td>"+artist+"</td><td>"+country+"</td><td>"+company+"</td><td>"+price+"</td><td>"+year+"</td></tr>";
				 		
				 	}
				}
			}
			
			//第三步 创建请求 并设置地址
			xhr.open('get','cd.xml',true);
			
			//第四步 发送请求
			xhr.send();
			return xmlDoc;
		}
		oBtn.onclick=function(){
			loadDoc();
		}
		</script>
	</body>
</html>

单眼皮的小熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX处理XML文件

首先XML文件内容cd.xml：<?xml version="1.0" encoding="ISO-8859-1"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <<ARTIST></ARTIST>>Bob Dylan</ARTIST> <
复制链接

扫一扫