HTML
andy.html
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
<h2><a href="mailto:jeremy@clearleft.com">Jeremy Keith</a></h2>
<a href="http://adactio.com/">http://adactio.com/</a>
<h2><a href="mailto:richard@clearleft.com">Richard Rutter</a></h2>
<a href="http://clagnut.com/">http://clagnut.com/</a>
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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"></script>
<script>
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) {
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="files/andy.html">Andy</a></li>
<li><a href="files/richard.html">Richard</a></li>
<li><a href="files/jeremy.html">Jeremy</a></li>
</ul>
<div id="details"></div>
</body>
</html>
XML
andy.xml
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>Andy Budd</name>
<website>http://andybudd.com/</website>
<email>andy@clearleft.com</email>
</details>
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>Jeremy Keith</name>
<website>http://adactio.com/</website>
<email>jeremy@clearleft.com</email>
</details>
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>Richard Rutter</name>
<website>http://clagnut.com/</website>
<email>richard@clearleft.com</email>
</details>
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
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) {
//结果为xml格式,所以需要使用responseXML来获取
var result=request.responseXML;
//结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中
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);
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
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>
JSON
andy.js
{"person": {
"name":"Andy Budd",
"website":"http://andybudd.com/",
"email":"andy@clearleft.com"
}
}
{"person": {
"name":"Jeremy Keith",
"website":"http://adactio.com/",
"email":"jeremy@clearleft.com"
}
}
{"person": {
"name":"Richard Rutter",
"website":"http://clagnut.com/",
"email":"richard@clearleft.com"
}
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
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) {
//结果为json格式
var result=request.responseText;
var jsonObj=eval("("+result+")")
//结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中
var name=jsonObj.person.name;
var website=jsonObj.person.website;
var email=jsonObj.person.email;
//alert(name);
//alert(website);
//alert(email);
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
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.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
clearleft.css
body {
background: #fff url("logo.png") fixed no-repeat top left;
color: #321;
font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
line-height: 1.6;
margin: 1em 20%;
}
a {
color: #674;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #896;
text-decoration: underline;
}