这篇文章将带您浏览整个AJAX的基本概貌,并展示两个简单的例子让您轻松上路.
1N5`,]-}3]TechWeb-技术社区
+L8@:A0O(G/g%p程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛什么是 AJAX? tech.techweb.com.cn&w0r2N7E,a+t1Z:o2g
AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google Suggest和Google Maps的横空出世才使人们开始意识到其重要性. ,F.w!E%z-K-]
1L-q8F9V5v4v
这两项被忽视的性能是: tech.techweb.com.cn+_1A9u+A1X.v;a;Y#h
‘I6K%}({+W,l程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛无需重新装载整个页面便能向服务器发送请求. *F”[7f+R'm.V7v5x8b
对XML文档的解析和处理
9N8`1r/Z7_-?+B程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛"q5J"s-E&f2_4~2d(_
步骤 1 – "请!" --- 如何发送一个HTTP请求"v,Q0{8C;O
9g2t7s6B3\"?"\1E5G H9c
为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性. TechWeb-技术社区3S!b1Y S!N%w
+P)R&L-z:v,u:V
因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用如下代码:
3x!_;B9y-]
&I/I2s8W)Q+h;E’a3Eif (window.XMLHttpRequest) { // Mozilla, Safari, …
7\5y9P0a8w6Q:zTechWeb-技术社区 http_request = new XMLHttpRequest();
,x)D-P7I2Q!G)t3_#I} else if (window.ActiveXObject) { // IE
7X.O”@.c”D6| http_request = new ActiveXObject(”Microsoft.XMLHTTP”);1X7F6V#Y:n
}
)N:r:^ J2s程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛#@!B3Z!W0z*I
上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例. 实际的代码实例可参阅本篇步骤3.)
)l1@1v7F3D8]1z3rtech.techweb.com.cn程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛&Q0x*R’X$^,w6Y/f0F)k
如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.
#b!|.W$b,m#](z$P e.`(Etech.techweb.com.cn(G1d9W7S.f6p0n#A
http_request = new XMLHttpRequest();/s5p$}%p0g9`9j.P!R8B
http_request.overrideMimeType(’text/xml’);,s5W8~4×0w)Q-}3H8a.t6F
‘i6c#{2P%d6^&G
接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:
3^/m$j!h”[
6m X-s5b*U7c!Ktech.techweb.com.cnhttp_request.onreadystatechange = nameOfTheFunction; tech.techweb.com.cn-x7V:F N2a-T;}
&}5W#i;@1F)f&R注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:
7^#G3v$z;N,T-S(}3S,z-i$r3f H'B
http_request.onreadystatechange = function(){
6@2E"i9U6v2k#y%I%u;W程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 // do the thingtech.techweb.com.cn/o6B:P4E"D-x.W&O)a
};%I%Q4U!D+B/s4F"L$}
-_8^(v.F6G:k
在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 如下所示:
&B-?8x9t;Q7C-ahttp_request.open('GET', 'http://www.example.org/some.file', true);TechWeb-技术社区1z+?8y7S-e&F/S
http_request.send(null);TechWeb-技术社区3E2h*g#e9z7R"B.o
open()的第一个参数是HTTP请求方式 – GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.有关HTTP请求方法的详细信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
!m0D&O2p7N6U第二个参数是请求页面的URL.由于自身安 全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到"permission denied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld. ,N!T1R0~9S"V1m$U
第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A". 4L!n6x k0n'i-[
如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:
H5w/q,F9P's.Z3z)Pname=value&anothername=othervalue&so=on
(T#J;\!c:V&n-E)y.]TechWeb-技术社区0N0a8M7y’Q)b
步骤 2 – “收到!” — 处理服务器的响应
2O2v”f(y1Z0C;T+~”s
!q#A9F7d+Rtech.techweb.com.cn当发送请求时,要提供指定处理响应的JavaScript函数名. tech.techweb.com.cn1q,t#x#w:`
TechWeb-技术社区:y!j*} a/m5x/C
http_request.onreadystatechange = nameOfTheFunction; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛:v’^.k&M”T0Q#~”x1~/J&_
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛*H.A$}+^2b:g6Y }*n
我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.
“Q2|1~(Y$r&`6L!_&[6N/a7o&^3w
if (http_request.readyState == 4) {tech.techweb.com.cn)o-G)w.{'{#[,w0s1q
// everything is good, the response is received6y(Z0e!Z%t8u'{
} else {
2C6Z)A!f9D5QTechWeb-技术社区 // still not ready:U)H:A"~:}-c/t
};T(m!l&^7f:I'_;c,R
4o%y-t0|#o;R(Z6@readyState的取值如下:
'r$i5y6N$z
7N+p9d2c0i/r4a+ftech.techweb.com.cn0 (未初始化)
%I s7Q4X1{)jtech.techweb.com.cn1 (正在装载) TechWeb-技术社区2h4u'^$E2_
2 (装载完毕) /N+C$n8I%u&I.l*R8f6O
3 (交互中) &S6E)L%n5r0I#K4e#P
4 (完成) 6P#T/V8~.R*X/`9B/n:U.P
8C&c1P%X:s*H#q(^
接着,函数会检查HTTP服务器响应的状态值. 完整的状态取值可参见http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
/x&O2P"?(n:~*Etech.techweb.com.cn我们着重看值为200 OK的响应.
0H*q.O*D,j#e9i#U1p)|程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛
#w g5c,L n9[8m$aif (http_request.status == 200) {
0y#Y%?1m4Q程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 // perfect!
9b7L2y#z!z8y!z} else {+h#[/O.J"I7W
// there was a problem with the request, l+K1s*U4v(O3E.z0w*c)Y0y
// for example the response may be a 404 (Not Found)
.l2r9@9P8X"Vtech.techweb.com.cn // or 500 (Internal Server Error) response codes程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛6^$M0q.u/~"j'C.d
}程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛!^*m.\,u0l#H4y
在检查完请求的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:
:S1H2j0B5e7O8E4G
)t)B!C*R"{)k'c+l'|*p Zhttp_request.responseText – 以文本字符串的方式返回服务器的响应
(s-N5B#w8y$V6Ihttp_request.responseXML – 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数
;W7W+n+S2j,Y0p)d.s7];wTechWeb-技术社区程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛3\!z3]5_ g#d”Z3S%{.q
步骤 3 – “万事俱备!” - 简单实例.o(U V/y*b9n3M
.B0X/Z3}’M.P8d$i我们现在将整个过程完整地做一次,发送一个简单的HTTP请求. 我们用JavaScript请求一个HTML文件, test.html, 文件的文本内容为”I’m a test.”.然后我们”alert()”test.html文件的内容.
/@%m%q#?*b$U/Wtech.techweb.com.cn#s+c9^!w%F#L:o
<script type=”text/javascript” language=”javascript”>
&]9F%P3G,_3z
&m1~*Y%B-FTechWeb-技术社区 var http_request = false; C-S7s2T&p
d,W _*i.K*N1f4B
function makeRequest(url) {程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛9b.T9W7a%X!L*?1}+~(X
7n+z$P#w%X*? http_request = false;TechWeb-技术社区5g*B)g5p+M!o,B(I.K
(`7f(u7Z)W!V4H1h if (window.XMLHttpRequest) { // Mozilla, Safari,…
:^#P$?4B:{5`8F2a http_request = new XMLHttpRequest();
H!b6l1x-V,Z9^3{2itech.techweb.com.cn if (http_request.overrideMimeType) {
+P+v/[)v.[(X3o http_request.overrideMimeType('text/xml');
%{3n&H;T$E Ctech.techweb.com.cn }
(w4C#T c"v%x)?tech.techweb.com.cn } else if (window.ActiveXObject) { // IE;U)K)y9w;L2\,h5x#P;X
try {tech.techweb.com.cn)M&h,h:s#E)o
http_request = new ActiveXObject("Msxml2.XMLHTTP");程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛+R1W)F7Z.r5V8G'|
} catch (e) {$[!K*I,y*}!R)M/P
try {7G+z;j6V/s'F2P9G
http_request = new ActiveXObject("Microsoft.XMLHTTP");
/n1K4u b(N0S2b } catch (e) 
-h"f(j.c8U0P0a
}TechWeb-技术社区:q0J(T2P#z#[8?5y)D
}$^%p"W+X!S%E(\5k
&e;N8b%s!_-U+?1P if (!http_request) {程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛2{-C)E8S'?:h2o(m
alert('Giving up 
Cannot create an XMLHTTP instance');程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛5S$i2^8t:[.W*?)A9c
return false;#k(z8C+i$z9H
}
2P j"w&Z3VTechWeb-技术社区 http_request.onreadystatechange = alertContents;
)l8m-b'a$D http_request.open('GET', url, true);
8\7b%C*x6|5|TechWeb-技术社区 http_request.send(null);
"X;};J)Q'w4@.b8h%d
"i7j5i#w.w)j0f }$O W$M;O1e+X7C5m
+})`#}8h:{&U function alertContents() {TechWeb-技术社区-T"X w$B3T1O%g8j#z(r,s3b
L3E(G,g4}:o:X3Q
if (http_request.readyState == 4) {
1G0X3r)k!E2n if (http_request.status == 200) {程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛0|*U3i%K&d;S"r
alert(http_request.responseText);
+?+v#g9Z,E*u+N } else {
~7m4e&}%A2M1S n;O/F*CTechWeb-技术社区 alert('There was a problem with the request.');
5H+~6A/I:K2Ntech.techweb.com.cn }
-W4N R7m/S.x,~%M"y程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 }4R.^"t#P&B%m"B
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛2T+T7b:\/d5u'`
}!Y C'Z2h F!J&S
</script>
&]$i0y*R/Z”qtech.techweb.com.cn<span
*H3Q1g%y;F t”\ style=”cursor: pointer; text-decoration: underline”:?%R!o!A:]5×5m2V
>5M(\6}*b9|0\,W+s,M6`
Make a request程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛(W-_3V”G2G P’B
</span>
-L0T%C6w*G4}本例中: ,i u)l4^-S1S4E%p
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛)I0W4Z#f1?3A,M(L3r
用户点击浏览器上的”请求”链接;
(k0v.K1D5j:F-p%f接着函数makeRequest()将被调用.其参数 – HTML文件test.html在同一目录下;
;M%?9L8~$x o#v W’r#m1H这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents();
(_1p6](r2A1K&`,p4JTechWeb-技术社区alertContents()将检查服务器的响应是否成功地收到,如果是,就会”alert()”test.html文件的内容.
#T;{&B$n;ZTechWeb-技术社区
3_6{&N$H&A*]tech.techweb.com.cn步骤 4 – “X-档案” — 处理XML响应
:|3T$n#h1D)i(R5`
9M,e’c!y/XTechWeb-技术社区在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性.
2R4a)f,E4e({.aTechWeb-技术社区
)g4f4Q*K,S#A#n首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示: “r2k#z.K1B:U
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛-Z0G’c9i#P+j5k4X$J
<?xml version=”1.0″ ?>
1d2d”|(d(D0C’@1V*a<root>
8W8q:Q,w1P(F!A+v4y’@2N(t I’m a test.
*I&_’m;[9n&f$s/C4K程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛</root>tech.techweb.com.cn,\+A4s*A#?/|8N&G2x
在该脚本中,我们只需修改请求部分:
(~6s1V5n:o;w g!K
,q/j6G0Z)`7y,H/[tech.techweb.com.cn...
$O!C;l.l.L/M8C8v>
:j,f$D!w&O,]/p…程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛7[2[0U0@ p"| G9P
接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成: ,M'F3O&I+Q/`9J,u,w(Q
8\-k/j7w6q(e/t1O/q0O5jTechWeb-技术社区var xmldoc = http_request.responseXML;
4N3z)c.a1k'Q7_0p)m(eTechWeb-技术社区var root_node = xmldoc.getElementsByTagName('root').item(0);
!R:i9u8m&G'@%Utech.techweb.com.cnalert(root_node.firstChild.data);
"P1q!b'p)k(\%zTechWeb-技术社区
,X#w.i&T:\:]这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.