AJAX

    AJAX全称为“Asynchronous Javascrīpt and XML”（异步Javascrīpt和XML），是指一种创建交互式网页应用的网页开发技术。51Testing软件测试网#L1p[$Yh5rLP

!bIYcuS7[m'rV0Ajax（Asynchronous Javascrīpt + XML）的定义51Testing软件测试网;NK+ne{
z#R^2~


sB;I4m{+YL6A@h0基于web标准（standards-based presentation）XHTML+CSS的表示；
i&]7M5he3F051Testing软件测试网S(gs&I [8e!Ke
使用 DOM（Document Object Model）进行动态显示及交互；
"l:Is)Z6X*T!a^051Testing软件测试网5]QNe,A U,U2{_
使用 XML 和 XSLT 进行数据交换及相关操作；51Testing软件测试网
\3C I/oN9hJC

8S9L$oR|3A9u4Y1N0使用 XMLHttpRequest 进行异步数据查询、检索；51Testing软件测试网F9G QE.D#w

US:biB{'W.dI0使用 Javascrīpt 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。
0@a;J?K'e;o0
9VYj(~1NV f n0类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
z4I"z-j#T D,u;V
C0
L4}uQ;NZ5`0AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。51Testing软件测试网A egH6mG
51Testing软件测试网f5WJ n$q*N-J
51Testing软件测试网%@U%W)m&|;J M

!X'U)sDg051Testing软件测试网\EN!W ^.G*R'H
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。51Testing软件测试网 kL"TN(?x2t

tp2{"Hi(`X0r0与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用Javascrīpt处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
CJdF#n(yIi%y V r051Testing软件测试网E3Y i }]
Ajax应用程序的优势在于：51Testing软件测试网ju$aL$QcPm

$bvm]ZH"XvI01. 通过异步模式，提升了用户体验
X@D YW1w051Testing软件测试网YH+gn
lP:~x
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用51Testing软件测试网
M(q4b[k

#vD,~[wj,y03. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
6~,F+]0SxC;m!r%q Y-t051Testing软件测试网yG X{5u ~K h

51Testing软件测试网0UWwaa-i`5u
51Testing软件测试网R9YVL7m
　　Ajax的核心是Javascrīpt对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用Javascrīpt向服务器提出请求并处理响应，而不阻塞用户。
1O5njf M-wC0
*E6D!Q6i5yCC9Tv0　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：51Testing软件测试网*hk s3g"ehY

-h;k"u3@%z's!m5T0    动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
8nY oo}s;Z051Testing软件测试网9y_G!g W]qYP
    提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在某购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载整个页面的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
f0^;K&h0YK v&Y0直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
X9uhx
S}0
n|3V {!y-@0　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。
N-A7o0c*F D051Testing软件测试网JqF&Ma8U#Kq
　　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
Y`s0f D+l%}051Testing软件测试网$I:_ Qa,k&T O0?
我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用：
!IR2gI&w UP-h4]0
X/}5p hV3wNfs0(1)用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在；51Testing软件测试网 a8~%ig{.L

B*h|7\RUD v-D"H:U-i0(2)以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在；
dCB3CzC2H/`051Testing软件测试网m6U'G J\-Nl]'o
首先，我们需要用Javascrīpt来创建XMLHttpRequest 类向服务器发送一个HTTP请求， XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。51Testing软件测试网!Bv oyz(x _
D)h

5Y,{owgB0QXr }q0对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：51Testing软件测试网&G-{"b^-g a'~
51Testing软件测试网$FAh L"W$Z4yf
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.051Testing软件测试网h'j@D\.m
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");51Testing软件测试网4Kt9~'i{%r7mX
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
xE6IqV051Testing软件测试网5\;O4D
L(^,Pm.~B
由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。51Testing软件测试网;HARGbE.[.lO

#Iu w |Yn6|7@e0对于Mozilla﹑Netscape﹑Safari等浏览器，创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();
"z T LNX*A051Testing软件测试网+])Rk4BE0V
如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。51Testing软件测试网B!S1U2`O

.D2Y)I&vD0`"a9H0xmlhttp_request = new XMLHttpRequest();
Xk8qy#s H"w?2B0xmlhttp_request.overrideMimeType('text/xml');51Testing软件测试网7]*K"h,GyY V
51Testing软件测试网4A~|.IxaI]
在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：
zd+I/^$AO051Testing软件测试网KTK6U.DO9y7\;J F2g
try{
6H3j4\w.n8w!}9~0if( window.ActiveXObject ){51Testing软件测试网"q{x1c!z
for( var i = 5; i; i-- ){
)ec1qE'O0try{51Testing软件测试网"[9m,Z'F,`
if( i == 2 ){51Testing软件测试网)~"n
B;\2Z3[T
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
Y6rS+`/GF0else{
+s'mq {.|c0xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); }
nvgIs0xmlhttp_request.setRequestHeader("Content-Type","text/xml");
uL e| vZhU0xmlhttp_request.setRequestHeader("Content-Type","gb2312");
yN2v+n+H-u*w0break;}51Testing软件测试网 Ddt:Q*@H$tnp
catch(e){
Z1b z sw]i \0xmlhttp_request = false; } } }
ylm_ { FJv+{:A0else if( window.XMLHttpRequest )
E0r1Irm\/f4GR0{ xmlhttp_request = new XMLHttpRequest();51Testing软件测试网3e7DD K:y2c'B'yn
if (xmlhttp_request.overrideMimeType)51Testing软件测试网[[B
}{x
{ xmlhttp_request.overrideMimeType('text/xml'); } } }51Testing软件测试网$P(bYM;}xq&a
catch(e){ xmlhttp_request = false; }
k D)eVL.Z0i`051Testing软件测试网bM!};y_
在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：51Testing软件测试网 oh.f.wARf2Mf
51Testing软件测试网Rjjg[-k&M
xmlhttp_request.open('GET', URL, true);51Testing软件测试网#AIa6d0| bF,r?Z
xmlhttp_request.send(null);
5u(H,DR4IW)]e051Testing软件测试网gf2zH;j4jM
open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。51Testing软件测试网I8G;o;w,l9^GTi'^z

0jy4\ Em5]WxM0第二个参数是请求页面的URL。
`Hl{5} tW051Testing软件测试网Tx3rJ5S:Sun
第三个参数设置请求是否为异步模式。如果是TRUE，Javascrīpt函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。51Testing软件测试网r,T#bTX;H_X
s
51Testing软件测试网p0Dx.?+o M5W9b#h
用Javascrīpt来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个Javascrīpt函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的Javascrīpt的函数名，如下所示：51Testing软件测试网x"x:eh7X7?a)VW:@
51Testing软件测试网0U#TO&BEi5g3|
xmlhttp_request.onreadystatechange =FunctionName;
(Y"wp%@l/L0
E;CM"_'A`F,Mp#yd0FunctionName是用Javascrīpt创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将Javascrīpt代码创建在onreadystatechange之后，例如：51Testing软件测试网fd;@8\b4V5lDw cA

.r R3W6Y/umH0xmlhttp_request.onreadystatechange = function(){
M+s`9M3IH2Q0// Javascrīpt代码段51Testing软件测试网XC-K lk{
};51Testing软件测试网
Bz_#kFK]

)g6t-b vz4S,k u*s0首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
M&P8uyD6s*_0n\051Testing软件测试网U;wg.m+{#}
readyState的取值如下：51Testing软件测试网,?S9af H+biE+U

^,f9A;oF'| Y5VN00 (未初始化)51Testing软件测试网1i]Q/eQ8k

J;z-};HL01 (正在装载)51Testing软件测试网2nFRm5r!N/m^1{P
51Testing软件测试网];LGDr3B1vT
2 (装载完毕)
0Bc/Ee/}5fzY051Testing软件测试网;l!sW It W
3 (交互中)
I5ku!m
Z#rA)cO^,l051Testing软件测试网*d!g&^r)k3^;[#h
4 (完成)
1Fjjn/K:}6v5{V051Testing软件测试网(i)rOPUJ
所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：51Testing软件测试网\ k0L(}9nx

/jnPSP-N0if (http_request.readyState == 4) { // 收到完整的服务器响应 }51Testing软件测试网!}I `-]8|
else { // 没有收到完整的服务器响应 }51Testing软件测试网E D*R2Y ^

m2e D:u `9R0当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。51Testing软件测试网!LuQO0c!J9L#d&fZA

0\\f2Lc4fZ0在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据：
|G8cYK~;I*D051Testing软件测试网7\:}&NS {I
(1) 以文本字符串的方式返回服务器的响应51Testing软件测试网ogb5g$u"N1\p"Uq'A

Q/dq0oPYB0(2) 以XMLDocument对象方式返回响应
3{_6N6~Z!eRn5b9a0
/[a@"} mZp.XQg0实例一： 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在51Testing软件测试网cQr(s:L+BA
51Testing软件测试网 R&M ~uaa
首先，我们登陆网易通行证注册页面，可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断，格式为：
Wm LF9c!w8zK x0
*b9_*Pg a.G"K0reg.163.com/register/checkssn.jsp?username=用户名
$GWe0{$]4vd0
qL U}dCVk6C0根据上面讲到的方法，我们可以利用AJAX技术对网易通行证用户名进行检测：51Testing软件测试网
sW(N"e/{)z0z1`x
51Testing软件测试网\ `7TR&}$s
第一步：新建一个基于Xhtml标准的网页，在区域插入Javascrīpt函数如下：
7U0AC`6q G&^ i}1}$m051Testing软件测试网,o#~Mfg"I-p N(B'Ny-C
function getXMLRequester( )
(uSiA:u+j%kAz051Testing软件测试网xX`T2z,FGE
{ var xmlhttp_request = false;

l2u6CJ.yL051Testing软件测试网hZnN+I v
try51Testing软件测试网5c.f/cE/QV
51Testing软件测试网l1ni:M tg`"^.Xi
{ if( window.ActiveXObject )51Testing软件测试网1}4Uz3S v,q1h fA

.i-HYMkv Q0{ for( var i = 5; i; i-- ){
_&IYI/n0_$S7[051Testing软件测试网4K2ZV
[c?n}
try{
'o~_zp5R'A}051Testing软件测试网*p8R@KSf)S R
if( i == 2 )51Testing软件测试网0w N7z;h"UE^)I

E"qS~[0k0{ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }51Testing软件测试网FJ1V9Wm%e^3Q
b

u9I2i.j:]EL0@0else51Testing软件测试网7I0Q)PfHvXt#~{
51Testing软件测试网 ALzJb'^6P
{ xmlhttp_request = new ActiveXObject51Testing软件测试网%]{E%vJm/MF

5},_9['g~D_8Jm6^0( "Msxml2.XMLHTTP." + i + ".0" );51Testing软件测试网_u/es Z[n

~6hS8mPw0xmlhttp_request.setRequestHeader("Content-Type","text/xml");51Testing软件测试网u3j%iX\N'C)^
51Testing软件测试网){g%Q]q2y(x
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
k5z)L2Fl6X2{5t"ji8X051Testing软件测试网'M5Sr*z
h Ff
break;}
@4L{8U {|-K@0
4[+Z Y`#N-C#PEiZ0catch(e){ xmlhttp_request = false; } } }
!W'vg2` w(yaX051Testing软件测试网"Sl+y1y9se8X
else if( window.XMLHttpRequest )51Testing软件测试网EGoy6{/U

*M%R^p0{`8s*\ X0{ xmlhttp_request = new XMLHttpRequest();51Testing软件测试网0k3v:G0vUT%v
51Testing软件测试网
C/a?[u9i{
if (xmlhttp_request.overrideMimeType)51Testing软件测试网`OB!y#R)h'e0Ia

Uo'x3[\*[:D'x~@0{ xmlhttp_request.overrideMimeType('text/xml'); } } }51Testing软件测试网L6Xq!jXI

;z3P-T-Ewo.|0catch(e){ xmlhttp_request = false; }51Testing软件测试网:`O8d c;U
51Testing软件测试网K%d0~/IN`j
return xmlhttp_request ; }51Testing软件测试网v@^tk;}_[
51Testing软件测试网C onP8D9Pf}
function IDRequest(n) { //定义收到服务器的响应后需要执行的Javascrīpt函数51Testing软件测试网A#I;lsh bG
51Testing软件测试网Pg$W8MpX ^
url=n+document.getElementById('163id').value;//定义网址参数51Testing软件测试网h2H9[l rmW#i:h7R5h
51Testing软件测试网N7]SO)|
xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数
p.e$D*Mz0
DF.D? O4?I N y(`cb0xmlhttp_request.onreadystatechange = doContents;//调用doContents函数51Testing软件测试网H9nG
IlK1`-N}1H

Ed*j%cLt c._2jm0xmlhttp_request.open('GET', url, true);51Testing软件测试网'LboQ2{"J3Bf


k!E0NEX[AE.A0xmlhttp_request.send(null); }
;w:d/Z m l*Z051Testing软件测试网lz/tE,tA]
function doContents()
"q]'J'My
aE [5P051Testing软件测试网.{ O2o Y,B!VHh
{ if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应51Testing软件测试网-?
w$^1w4?:E

~~ a;au|0if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK51Testing软件测试网['nG:s4t!^
51Testing软件测试网;V6lbx2t`q O
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
8f9i_&MNH3yIKK0
dLN1wp0//将服务器返回的字符串写到页面中ID为message的区域 }
X p
dzP0
^P-]jn ?l0else { alert(http_request.status); } } }
+@5gz Z2dk.NG7a051Testing软件测试网3A.sxeI
在区域建立一个文本框，id为163id，再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascrīpt函数截取一部分字符串显示)：51Testing软件测试网+]Gf2h4Cy%yx
51Testing软件测试网'C)XGGu)t M(Ep
<input type=text id="163id">
$W~5OR|~&hhKi0<span id="message"></span>
!J%x/hGu0
T2{,e&}6xb A0这样，一个基于AJAX技术的用户名检测页面就做好了，不过这个页面将返回服务器响应生成页面的所有字符串，当然还可以对返回的字符串进行一些操作，便于应用到不同的需要当中。51Testing软件测试网tm.S:Cl+O
51Testing软件测试网I\;B.x _+B
实例二： 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在51Testing软件测试网/fc_"K"p5g#Q
51Testing软件测试网lw `J)D#V
在上面的例子中，当服务器对HTTP请求的响应被收到后，我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应，此时将不再需要reponseText属性而使用responseXML属性。51Testing软件测试网H3i:xI [

#u!s ZwG0首先登陆金山通行证注册页面，我们发现金山通行证用户名的检测方式为： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:
.[qU6oub,]m051Testing软件测试网\!U$Ku'z6fA]` e
isExistedUid -2
Bpz_0kHTmf;r$n0
A!{2Zih9_0当result值为-1时表示此用户名已被注册，当result值为-2时表示此用户名尚未注册，因此通过对result值的判断可以知道用户名是否被注册。51Testing软件测试网^tVaGWpn+NJ

.]V#K o"Rx"E0对上例代码进行修改：
jO.BXZ4@051Testing软件测试网D|K:QE,q
首先找到
i5X?
KO](xk051Testing软件测试网R'S6C G/g
_~3v
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
3E#S:AZ$m6}p051Testing软件测试网@e_5uK/sS
改为:
;g(OG.Z$j8]4F/x0
:jS4C[;}0var response = xmlhttp_request.responseXML.documentElement;51Testing软件测试网4E)i;}li#~ v

;a7d,qwn|0var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据
A'hZ3Agk qn0
$x%f:A'bi2BZ#\7V0if(result ==-2){51Testing软件测试网NLagR8@

]]_h5\D0?u8`&d'JN0document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";}
P?7w@(`&k0s7HYRz0
] \.J,j%_DHn0else if(result ==-1){51Testing软件测试网i$c%] Sbt:l
51Testing软件测试网)NbCjHl^JB;UL
document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";}51Testing软件测试网)K"tx:R F#v;u"vHg!o^
51Testing软件测试网{,e-f6DL7U
通过以上两个实例说明了AJAX的客户端基础应用，采用的是网易和金山现成的服务器端程序，当然为了开发合适自己页面的程序，还需要对自己编写服务器端程序，这设计到程序语言及数据库的操作，对于有一定程序基础的读者一定不是很难的事情。
9b4{ c.M2D~4o.w"M051Testing软件测试网;A!T'l Y{*ie

7cd&d6@Bl.W5NO0
3Wb#\A1j*Z5vE1Ko s0补充：
Q'kn
eO/M,tYc01.Ajax：著名希腊史诗伊利亚特中英雄埃阿斯的名字。
I.F ]`:t@f3i;}02.Ajax：荷兰著名足球俱乐部阿贾克斯，以培养青年球员而著称，并多次夺得欧洲冠军杯。