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:[email protected]" >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>
时间： 2024-08-08 17:13:23