我的第一个Ajax程序
该例子主要是服务器向浏览器返回xml文档内容
1
<!--parseXML.xml文件-->
2<?xml version ="1.0" encoding="utf-8"?>
3<states>
4 <north>
5 <state>Minnesota</state>
6 <state>Iowa</state>
7 <state>North Dakota</state>
8 </north>
9 <south>
10 <state>Texas</state>
11 <state>Oklahoma</state>
12 <state>Louisiana</state>
13 </south>
14 <east>
15 <state>New York</state>
16 <state>North Carolina</state>
17 <state>Massachusetts</state>
18 </east>
19 <west>
20 <state>California</state>
21 <state>Oregon</state>
22 <state>Nevada</state>
23 </west>
24</states>
<!--parseXML.xml文件-->2
<?xml version ="1.0" encoding="utf-8"?>3
<states>4
<north>5
<state>Minnesota</state>6
<state>Iowa</state>7
<state>North Dakota</state>8
</north>9
<south>10
<state>Texas</state>11
<state>Oklahoma</state>12
<state>Louisiana</state>13
</south>14
<east>15
<state>New York</state>16
<state>North Carolina</state>17
<state>Massachusetts</state>18
</east>19
<west>20
<state>California</state>21
<state>Oregon</state>22
<state>Nevada</state>23
</west>24
</states>静态页面如下：
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3 <HEAD>
4 <TITLE>Parsing XML Responses with the W3C DOM </TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9
<script type=text/javascript>
10
//XMLHttpRequest对象
11 var xmlHttp;
12 //用来保存客户端传过来的参数
13 var requestType="";
14 //新建XMLHttpRequest对象实例
15
function createXMLHttpRequest(){
16 if(window.ActiveXObject){
17 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
18
}
19 else if(window.XMLHttpRequest){
20 xmlHttp = new XMLHttpRequest();
21 }
22 }
23 //执行请求
24 function startRequest(requestedList)
25 {
26 requestType = requestedList;
27 createXMLHttpRequest();
28 //回跳函数
29 xmlHttp.onreadystatechange = handleStateChange;
30 xmlHttp.open("GET","parseXML.xml",true);
31 xmlHttp.send(null);
32 }
33 //回跳函数
34 function handleStateChange(){
35 if(xmlHttp.readystate==4)
36 {
37 if(xmlHttp.status==200)
38 {
39 if(requestType=="north")
40 {
41 listNorthStates();
42 }
43 else if(requestType=="all")
44 {
45 listAllStates();
46 }
47 }
48 }
49 }
50 //处理北部地区
51 function listNorthStates()
52 {
53 var xmlDoc = xmlHttp.responseXML;
54 var northNode = xmlDoc.getElementsByTagName("north")[0];
55 var out="Northern States";
56 var northStates = northNode.getElementsByTagName("state");
57 outputList("Norther States",northStates);
58 }
59 function listAllStates()
60 {
61 var xmlDoc = xmlHttp.responseXML;
62 var allStates = xmlDoc.getElementsByTagName("state");
63 outputList("All States in Document",allStates);
64 }
65 function outputList(title,states)
66 {
67 var out = title;
68 var currentState = null;
69 for(var i = 0;i<states.length;i++)
70 {
71 currentState = states[i];
72 out = out +"\n"+currentState.childNodes[0].nodeValue;
73 }
74 alert(out);
75 }
76
</script>
77 </HEAD>
78
79 <BODY>
80 <h1>process xml document of U.S States</h1>
81 <br>
82 <form action="#">
83 <input type="button" value="View All Listed States" onClick="startRequest('all');"/>
84 <br>
85 <input type="button" value="View All Listed Northern States" onClick="startRequest('north');"/>
86 </form>
87 </BODY>
88</HTML>
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2
<HTML>3
<HEAD>4
<TITLE>Parsing XML Responses with the W3C DOM </TITLE>5
<META NAME="Generator" CONTENT="EditPlus">6
<META NAME="Author" CONTENT="">7
<META NAME="Keywords" CONTENT="">8
<META NAME="Description" CONTENT="">9
<script type=text/javascript>
10
//XMLHttpRequest对象11
var xmlHttp;12
//用来保存客户端传过来的参数13
var requestType="";14
//新建XMLHttpRequest对象实例15
function createXMLHttpRequest(){
16
if(window.ActiveXObject){17
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");18
}19
else if(window.XMLHttpRequest){20
xmlHttp = new XMLHttpRequest();21
}22
}23
//执行请求24
function startRequest(requestedList)25
{26
requestType = requestedList;27
createXMLHttpRequest();28
//回跳函数29
xmlHttp.onreadystatechange = handleStateChange;30
xmlHttp.open("GET","parseXML.xml",true);31
xmlHttp.send(null);32
}33
//回跳函数34
function handleStateChange(){35
if(xmlHttp.readystate==4)36
{37
if(xmlHttp.status==200)38
{39
if(requestType=="north")40
{41
listNorthStates();42
}43
else if(requestType=="all")44
{45
listAllStates();46
}47
}48
}49
}50
//处理北部地区51
function listNorthStates()52
{53
var xmlDoc = xmlHttp.responseXML;54
var northNode = xmlDoc.getElementsByTagName("north")[0];55
var out="Northern States";56
var northStates = northNode.getElementsByTagName("state");57
outputList("Norther States",northStates);58
}59
function listAllStates()60
{61
var xmlDoc = xmlHttp.responseXML;62
var allStates = xmlDoc.getElementsByTagName("state");63
outputList("All States in Document",allStates);64
}65
function outputList(title,states)66
{67
var out = title;68
var currentState = null;69
for(var i = 0;i<states.length;i++)70
{71
currentState = states[i];72
out = out +"\n"+currentState.childNodes[0].nodeValue;73
}74
alert(out);75
}76
</script>77
</HEAD>78
79
<BODY>80
<h1>process xml document of U.S States</h1>81
<br>82
<form action="#">83
<input type="button" value="View All Listed States" onClick="startRequest('all');"/>84
<br>85
<input type="button" value="View All Listed Northern States" onClick="startRequest('north');"/>86
</form>87
</BODY>88
</HTML>89
