我的第一个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
