Posted on 2006-12-29 19:27
路易 阅读(349)
评论(0) 编辑 收藏 所属分类:
AJAX
1
XMLHttpRequest是Ajax的基础对象。异步的数据请求是通过这个对象来实现的。下面的代码是建立XMLHttpRequest对象的示例 。
2
3
代码在IE6、FireFox1.
5
、NetScape8.
1
、Opera8.54调试通过。服务器为Window2000
+
IIS5
4
5
1
、创建XMLHTTPREQUEST对象
6
7
var xhr;
8
var requestType
=
""
;
9
10
//
xhr = new XMLHttpRequest();
11
12
function createXMLHttpRequest()
13
{
14
if
(window.ActiveXObject)
//
IE下创建XMLHTTPREQUEST
15
{
16
xhr
=
new
ActiveXObject(
"
Microsoft.XMLHTTP
"
);
17
}
18
else
if
(window.XMLHttpRequest)
//
其他浏览器创建XMLHTTPREQUEST
19
{
20
xhr
=
new
XMLHttpRequest();
21
}
22
}
23
24
这种方法对于低版本的IE不适合。
25
26
2
、XMLHTTPREQUEST对象请求数据
27
28
function startRequest(requestedList)
29
{
30
if
(xhr)
31
{
32
requestType
=
requestedList;
33
createXMLHttpRequest();
34
xhr.onreadystatechange
=
handleStateChange;
35
xhr.open(
"
GET
"
,
"
../ajax/paraseXML.xml
"
,
true
);
36
xhr.send(
null
);
37
}
38
else
39
alert(
"
XMLHTTPREQUEST IS FALSE
"
);
40
}
41
42
这是个处理XML文档的示例,请求的文件是paraseXML.xml文件
43
这里需要说明的是:如果请求的是一个HTML文件,服务器对象会将所有的标签全部返回,包括
<
HTML
>
、
<
head
>
、
<
meta
>
等标签。响应数据如果包含HTML标签,最好把这些标签去掉。
44
45
3
、XMLHTTPREQUEST对象返回数据处理
46
47
function handleStateChange()
48
{
49
if
(xhr.readyState
==
4
)
50
{
51
if
(xhr.status
==
200
)
52
{
53
if
(requestType
==
"
north
"
)
54
{
55
listNorthStates();
56
}
57
if
(requestType
==
"
all
"
)
58
{
59
listAllStates();
60
}
61
}
62
}
63
}
64
65
4
、数据处理函数
66
67
function listNorthStates()
68
{
69
//
xhr 为XMLHTTPREQUEST对象
70
//
xmlDoc为XMLHTTPREQUEST响应的XML文档对象
71
var xmlDoc
=
xhr.responseXML;
//
取得XML文档对象
72
var northNode
=
xmlDoc.getElementsByTagName(
"
north
"
)[
0
];
//
取得所有处于北方的节点
73
var northStates
=
northNode.getElementsByTagName(
"
state
"
);
//
在处于北方的节点中提取省份数据
74
outputList(
"
north States
"
, northStates);
//
输出省份数据
75
}
76
77
function listAllStates()
78
{
79
var xmlDoc
=
xhr.responseXML;
80
var allStates
=
xmlDoc.getElementsByTagName(
"
state
"
);
//
取得所有的省份数据
81
outputList(
"
All States in document
"
,allStates);
//
输出省份的数据
82
}
83
/** */
/**
********************************************************
84
// 输出数据
85
// title: 输出数据的标题
86
// states: 输出数据来源
87
*******************************************************
*/
88
function outputList(title,states)
89
{
90
var out
=
title;
91
var currentState
=
null
;
//
初始化省份对象
92
for
(var i
=
0
; i
<
states.length; i
++
)
//
列出Ststes对象的所有数据,生成输出串
93
{
94
currentState
=
states[i];
//
取得当前的省份
95
//
生成输出HTML字符串
96
out
=
out
+
"
<ul><font face='仿宋_GB2312'><span style='font-size: 9pt'>
"
;
97
out
=
out
+
"
<li>
"
+
currentState.childNodes[
0
].nodeValue
+
"
</li>
"
;
98
out
=
out
+
"
</span></font></ul>
"
;
99
}
100
//
取得输出串的对象,输出生成的字符串
101
var test
=
document.getElementById(
"
test
"
);
102
test.innerHTML
=
out;
103
}
104
105
5
、完整示例文件
106
107
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHML 1.0 Strict//EN
"
"
http://www.w3.org/TR/xHML/DTD/xhtml-strict.dtd
"
>
108
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
109
110
<
head
>
111
<
meta http
-
equiv
=
"
Content-Type
"
CONTENT
=
"
text/html; charset=gb2312
"
>
112
<
meta http
-
equiv
=
"
Cache-Control
"
CONTENT
=
"
no-cache
"
>
113
<
meta http
-
equiv
=
"
Pragma
"
CONTENT
=
"
no-cache
"
>
114
<
meta http
-
equiv
=
"
Expires
"
CONTENT
=
"
0
"
>
115
116
<
title
>
AJAX 测试
</
title
>
117
<
script type
=
"
text/javascript
"
>
118
////
/ 创建XMLHttpRequest对象
119
var xhr;
120
var requestType
=
""
;
121
122
//
xhr = new XMLHttpRequest();
123
124
function createXMLHttpRequest()
125
{
126
if
(window.ActiveXObject)
127
{
128
xhr
=
new
ActiveXObject(
"
Microsoft.XMLHTTP
"
);
129
}
130
else
if
(window.XMLHttpRequest)
131
{
132
xhr
=
new
XMLHttpRequest();
133
}
134
}
135
////
/ XML文档处理
136
function startRequest(requestedList)
137
{
138
if
(xhr)
139
{
140
requestType
=
requestedList;
141
createXMLHttpRequest();
142
xhr.onreadystatechange
=
handleStateChange;
143
xhr.open(
"
GET
"
,
"
../ajax/paraseXML.xml
"
,
true
);
144
xhr.send(
null
);
145
}
146
else
147
alert(
"
XMLHTTPREQUEST IS FALSE
"
);
148
}
149
150
function handleStateChange()
151
{
152
if
(xhr.readyState
==
4
)
153
{
154
if
(xhr.status
==
200
)
155
{
156
if
(requestType
==
"
north
"
)
157
{
158
listNorthStates();
159
}
160
if
(requestType
==
"
all
"
)
161
{
162
listAllStates();
163
}
164
}
165
}
166
}
167
168
function listNorthStates()
169
{
170
var xmlDoc
=
xhr.responseXML;
171
var northNode
=
xmlDoc.getElementsByTagName(
"
north
"
)[
0
];
172
var northStates
=
northNode.getElementsByTagName(
"
state
"
);
173
outputList(
"
north States
"
, northStates);
174
}
175
function listAllStates()
176
{
177
var xmlDoc
=
xhr.responseXML;
178
var allStates
=
xmlDoc.getElementsByTagName(
"
state
"
);
179
outputList(
"
All States in document
"
,allStates);
180
}
181
function outputList(title,states)
182
{
183
var out
=
title;
184
var currentState
=
null
;
185
for
(var i
=
0
; i
<
states.length; i
++
)
186
{
187
currentState
=
states[i];
188
out
=
out
+
"
<ul><font face='仿宋_GB2312'><span style='font-size: 9pt'>
"
;
189
out
=
out
+
"
<li>
"
+
currentState.childNodes[
0
].nodeValue
+
"
</li>
"
;
190
out
=
out
+
"
</span></font></ul>
"
;
191
}
192
var test
=
document.getElementById(
"
test
"
);
193
test.innerHTML
=
out;
194
}
195
</
script
>
196
197
</
head
>
198
199
<
body
>
200
201
<
form action
=
"
#
"
>
202
<!--
XML文档请求
-->
203
<
input type
=
“button
"
value=
"
AJAX Test north
"
onclick=
"
startRequest(
'
north
'
);
"
/>
204
<
input type
=
"
button
"
value
=
"
AJAX Test all
"
onclick
=
"
startRequest('all');
"
/>
205
<!--
SP.Net请求
-->
206
<
input type
=
"
button
"
value
=
"
AJAX Test ASPX
"
onclick
=
"
startRequestFromServer();
"
/>
207
<!--
DOM对象的清除与创建
-->
208
<
input type
=
"
button
"
value
=
"
search
"
onclick
=
"
startRequestFromLanguage()
"
/>
209
</
form
>
210
211
<
div id
=
"
test
"
><
font face
=
"
仿宋_GB2312
"
><
span style
=
"
font-size: 9pt
"
></
span
></
font
>
212
</
div
>
213
</
body
>
214
215
</
html
>
216
217
6
、参考书籍
218
219
《Ajax基础教程》人民邮电出版社
220
221
本程序为该书的一些示例,仅供入门参考
222
223
7
、补充
224
225
忘记XML文件: paraseXml.xml
226
将该文件与上面的HTML文件放在相同的目录下即可
227
228
<?
xml version
=
"
1.0
"
encoding
=
"
UTF-8
"
?>
229
<
states
>
230
<
north
>
231
<
state
>
辽宁
</
state
>
232
<
state
>
吉林
</
state
>
233
<
state
>
黑龙江
</
state
>
234
<
state
>
内蒙古
</
state
>
235
</
north
>
236
<
south
>
237
<
state
>
福建
</
state
>
238
<
state
>
广东
</
state
>
239
<
state
>
云南
</
state
>
240
<
state
>
广西
</
state
>
241
</
south
>
242
<
east
>
243
<
state
>
上海
</
state
>
244
<
state
>
浙江
</
state
>
245
<
state
>
江苏
</
state
>
246
<
state
>
安徽
</
state
>
247
</
east
>
248
<
west
>
249
<
state
>
新疆
</
state
>
250
<
state
>
陕西
</
state
>
251
<
state
>
山西
</
state
>
252
<
state
>
宁夏
</
state
>
253
</
west
>
254
</
states
>
原地址:
http://dev.csdn.net/author/crywolfwang/063be8aeb9e94284871ce597da36d253.html