XML_index.html-CSDN博客

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>

<script type="text/javascript">
	//alert("test1");
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			//alert("test2");
			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() {
					//alert(request.readyState);
					if (request.readyState == 4) {
						//alert("test2");
						if (request.status == 200 || request.status == 304) {
							// 1.结果为XML格式，所以需要使用responseXML来获取
							
							var result = request.responseXML;
							
							// 2.结果不能直接使用，必须先创建对应的结点，再把结点加入到#details中
							// 目标格式为：
							/**
								html格式
							*/
							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); 
							*/
							
							var aNode = document.createElement("a");
							aNode.appendChild(document.createTextNode(name));
							aNode.href = "mailto" + email;
							
							var h2Node = document.createElement("h2");
							h2Node.appendChild(aNode);
							
							var aNode2 = document.createElement("a");
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href = website;
							
							var detailsNode = document.getElementById("details");
							detailsNode.innerHTML = " ";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
							
						}
					}
				}
				return false;
			}
		}
	}
</script>

</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.xml">Andy</a></li>
		<li><a href="files/richard.xml">Richard</a></li>
		<li><a href="files/jeremy.xml">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>
转载于:https://www.cnblogs.com/anstoner/p/6429079.html