index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
// var jsonobject = {
// "name":"tianhai",
// "age":12,
// "address":{"city":"北京","school":"清华"},
// "teaching":function(){
// alert("JavaEE,Android...");
// }
// };
// alert(jsonobject.name);
// alert(jsonobject.address.city);
// jsonobject.teaching();
//var jsonStr = "{'name':'tianhai'}";
//console.log(jsonStr.name);
//var testStr = "alert('hello world!')";
//alert(testStr);
//使用eval()方法,可以把字符串转为本地js方法执行。
// eval(testStr);
//把json字符串转为json对象方法
// var testObject = eval("("+jsonStr+")");
//console.log(("{'name':'tianhai'}"));
// console.log(testObject);
// console.log(testObject.name);
window.onload=function(){
//aNodes a节点 node英文 节点;(计算机网络的)节点;[医]结节;植物的节
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){
var result = request.responseText;
var object = eval("("+result+")");
var name = object.person.name;
var website = object.person.website;
var email = object.person.email;
// alert(name);
// alert(website);
// alert(email);
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href ="mailto" + email;
//aNode.href = website;
//console.log(aNode);
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
//console.log(h2Node);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
//console.log("aNode2是"+aNode2);
var detailsNode = document.getElementById("details");
detailsNode.innerHTML="";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>网址导航</h1>
<ul>
<li><a href="a.js">搜狐</a></li>
<li><a href="b.js">百度</a></li>
<li><a href="c.js">腾讯</a></li>
</ul>
<div id="details"></div>
</body>
</html>
a.js
{
"person": {
"name": "搜狐",
"website": "http://www.sohu.com",
"email": "[email protected]"
}
}
b.js
{
"person": {
"name": "百度",
"website": "https://www.baidu.com",
"email": "[email protected]"
}
}
c.js
{
"person": {
"name": "腾讯",
"website": "http://www.qq.com",
"email": "[email protected]"
}
}