1.Ajax_数据格式_HTML
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="utf-8"> 5 5 <script type="text/javascript"> 6 6 window.onload = function () { 7 7 var aNodes = document.getElementsByTagName("a"); 8 8 //获取a节点 9 9 for (var i = 0;i< aNodes.length; i++){ 10 10 aNodes[i].onclick = function() { 11 11 12 12 var request = new XMLHttpRequest(); 13 13 var method="GET"; 14 14 var url = this.href; 15 15 16 16 request.open(method, url); 17 17 request.send(null); 18 18 request.onreadystatechange = function () { 19 19 if (request.readyState == 4 ) { 20 20 if (request.status == 200 || request.status ==304) { 21 21 document.getElementById("details").innerHTML = request.responseText; 22 22 23 23 } 24 24 } 25 25 } 26 26 27 27 return false; 28 28 } 29 29 } 30 30 } 31 31 </script> 32 32 </head> 33 33 <body> 34 34 <li><a href="text1.html">aa</a></li> 35 35 <li><a href="text2.html">bb</a></li> 36 36 <li><a href="text3.html">cc</a></li> 37 37 38 38 <div id="details"> 39 39 40 40 </div> 41 41 </body> 42 42 </html> 43
2.Ajax_数据格式_XML
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript"> 6 window.onload = function () { 7 8 var aNodes = document.getElementsByTagName("a"); 9 //获取a节点 10 for (var i = 0;i< aNodes.length; i++){ 11 aNodes[i].onclick = function() { 12 13 var request = new XMLHttpRequest(); 14 var method="GET"; 15 var url = this.href; 16 request.open(method, url); 17 request.send(null); 18 19 request.onreadystatechange = function () { 20 if (request.readyState == 4 ) { 21 if (request.status == 200 || request.status ==304) { 22 //1.结果为XML格式，所以需要使用responseXML来获取 23 var result = request.responseXML; 24 25 //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到 #details 中 26 //目标格式为： 27 /* 28 <h2><a href="mailto:2211735722@qq.com" >Andy Budd</a></h2> 29 <a href="http:www.baidu.com">http:www.baidu.com</a> 30 */ 31 32 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; 33 var website = result.getElementsByTagName("website")[0].firstChild.nodeValue; 34 var email = result.getElementsByTagName("email")[0].firstChild.nodeValue; 35 //alert(name); 36 //alert(website); 37 //alert(email); 38 var aNode = document.createElement("a"); 39 aNode.appendChild(document.createTextNode(name)); 40 aNode.href = "mailto:" + email; 41 42 var h2Node = document.createElement("h2"); 43 h2Node.appendChild(aNode); 44 45 var aNode2 = document.createElement("a"); 46 aNode2.appendChild(document.createTextNode(website)); 47 aNode2.href = website; 48 49 var detailsNode = document.getElementById("details"); 50 // 清理页面内容 51 detailsNode.innerHTML = ""; 52 detailsNode.appendChild(aNode); 53 detailsNode.appendChild(aNode2); 54 55 } 56 } 57 } 58 59 return false; 60 } 61 } 62 } 63 </script> 64 </head> 65 <body> 66 <h1>Peopel</h1> 67 <ul> 68 <li><a href="andy.xml">Andy</a></li> 69 <li><a href="richard.xml">Richard</a></li> 70 <li><a href="jeremy.xml">Jeremy</a></li> 71 </ul> 72 <div id="details"> 73 74 </div> 75 </body> 76 </html>
3.Ajax_数据格式_JSON
1 <script type="text/javascript"> 2 var jsonObject = { 3 "name":"atguigu", 4 "age":12, 5 "address":{"city":"beijing","school":"尚硅谷"}, 6 "teaching":function(){ 7 alert("JavaEE,Android..."); 8 } 9 }; 10 //alert(jsonObject.name); 11 //alert(jsonObject.address.city); 12 //jsonObject.teaching(); 13 14 var jsonStr = "{'name':'atguigu'}"; 15 //alert(jsonStr.name); 16 //把一个字符串转为JSON对象！ 17 18 //使用 eval()方法 19 var testStr = "alert('hello eval')"; 20 //alert(testStr); 21 22 //eval 可以把一个字符串转为本地的 JS 代码来执行 23 eval(testStr); 24 25 //var testObject = eval(jsonStr); 26 //把JSON 字符串转为 JSON 对象。需要加"("+ +")"; 27 var testObject = eval("("+jsonStr+")"); 28 alert(testObject.name); 29 </script>