index2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</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.结果为json格式，所以需要使用responseText来获取 var result = request.responseText; //使用eval方法把字符串转化为本地 的JS代码执行 var object = eval("("+ result +")"); //结果不能直接用，必须先创建对应的节点，再把节点加到#details去； 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 = "taobao" + email; var h2node = document.createElement("h2"); h2node.appendChild(anode); var anode2 = document.createElement("a"); anode2.appendChild(document.createTextNode(website)); anode2.href = "taobao" + website; var detailnode = document.getElementById("details"); detailnode.innerHTML=""; detailnode.appendChild(h2node); detailnode.appendChild(anode2); } } } return false; } }}</script></head><body><ul><li><a href="file/1.js"> 购物网站 </a></li><li><a href="file/2.js"> 学习网站 </a></li></ul><div id="details"></div></body></html>1.js
/** * 会报错，但是无关紧要。 */{"person":{ "name":"taobao", "website":"https://www.taobao.com/", "email":"https://www.tmall.com/" } }2.js
/** * */{"person":{ "name":"xuexi", "website":"https://www.w3school.com.cn/", "email":"https://www.runoob.com/" } }结果截图：
