AJAX数据格式之XML

1、在Eclipse中创建项目目录视图如下：

2、代码及注解如下

andy.xml文件代码如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<details>
	<name>Hello,I am Alice.</name>
	<website>http://adactio.com</website>
	<email>Alice@qq.com</email>
</details>

index.html文件代码及注解如下所示：

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>AJAX--XML数据格式</title>
<script type="text/javascript">
	
	window.onload = function() {
		
		var aNodes = document.getElementsByTagName('a');
		
		for (var i = 0; i < aNodes.length; i++) {
			
			aNodes[i].onclick = function() {
				
				var request = new XMLHttpRequest();
				var method = 'GET';
				var url = this.href;
				
				request.open(method,url);
				request.send(null);
				
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200 || request.status == 304) {
							// 1、结果为XML格式，所以需要使用responseXML来获取
							var result = request.responseXML;
							
							// 2、结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
							// 目标格式为：
							/*
								<h2><a href="mailto:Alice@qq.com">Hello,I am Alice.</a></h2>
								<a href="http://andybudd.com">http://andybudd.com</a>
							*/
							var name = result.getElementsByTagName('name')[0].firstChild.nodeValue;
							var website = result.getElementsByTagName('website')[0].firstChild.nodeValue;
							var email = result.getElementsByTagName('email')[0].firstChild.nodeValue;
							
							/* 
								alert(name);
								alert(website);
								alert(email); 
							*/
							
							// 3.1、创建<a>标签
							var aNode = document.createElement('a');
							aNode.appendChild(document.createTextNode(name));
							aNode.href = 'mailto:' + email;
							
							// 3.2、创建h2标签
							var h2Node = document.createElement('h2');
							h2Node.appendChild(aNode);
							
							// 3.3、创建第2个<a>标签
							var aNode2 = document.createElement('a');
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href = website;
							
							// 4、将拼写得到的xml数据信息添加到"id = 'detail'"中
							var detailsNode = document.getElementById('details');
							detailsNode.innerHTML = "";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
							
						}
						
					}  // if (request.readyState == 4)
				}  // request.onreadystatechange = function()
				
				return false;
			}  // aNodes[i].onclick = function()
		}  // for (var i = 0; i < aNodes.length; i++)
	}  // window.onload = function() 
	
</script>

</head>
<body>
	
	<h2>Person</h2>
	<ul>
		<li><a href="files/andy.xml">Andy</a></li>
		<li><a href="files/jeremy.xml">Jeremy</a></li>
		<li><a href="files/richard.xml">Richard</a></li>
	</ul>
	
	<div id="details"></div>
	
</body>
</html>

3、运行结果如下所示：

AJAX数据格式之XML

相关文章