我爱电脑技术论坛 » 编程语言 » 关于快速简便的使用AJAX技术操作的介绍

白雪公主 发表于 2008-4-17 09:06

关于快速简便的使用AJAX技术操作的介绍

其实AJAX并不复杂，自从AJAX技术出来后，天花乱坠的框架纷纷出台，搞得技术开发人员无从下手，baidu google里也有很多例子，大都是非常复杂。 1h8gjT%k#s

pNqie$|#x )Qu r^5g'V

q G"PCoz8p 其实就web开发而言，AJAX技术只是一个配合，完全没有必要本末倒置，是一种页面优化的技术，也就是说，如何去优化我们的web页面才是AJAX的重头戏。下面我举个很简单的例子，可以满足大部分的业务需求。（当然，如果是很专业的页面要求，可以去参考那些复杂的框架）
O4o%W1Cg`0i MOd l+Y*x"|K
.gT4@#X8\QO

"zTB,n+Sf!z.q 第一步：
t7M/}i9m"Z#\ \"B
by `0\)]8EN
~*T
BAU|

G5CcNZA,[8C9Xa 写一个后台的“接口”，这个可以用任何语言来实现，只要能返回http报文就可以了，我这里以webwork后台代码举个例子
)|0o*Nz*A] Y8p4Qy;?'d2tLtb


n\3|
w4x(q4_:E%F$| ,?5C7@R^q P
public String hotWeek() throws Exception{
\Y5E:H'k5Q/g z-J
m*F7@$H/Z+z Yg|F'vqd
HttpServletResponse response = ServletActionContext.getResponse();
1Z L(a4Mf)P
Y
Uky~MVI response.setContentType("text/xml; charset=gb2312");
6d#O1US b:H `-i2_
` xYen/R.e7a PrintWriter out = response.getWriter();
v5t/I#C,F:} 3h5u2iS/oe7^.~_q*h

uHK+@
V StringBuffer insertHotHtml = new StringBuffer(); N"a!DZ6Q A

2n[M)@HJ ?q insertHotHtml.append(" cellspacing=0> ");
%H"M iN2wj gZ
eHx ({#ed8f7d_7R
insertHotHtml.append("
k7]8xV6C8U ");
(J*\:s:xQ9X;[ insertHotHtml.append("

fM4c8} o   ");
[ST q$b7d,B"I insertHotHtml.append("!s6nZv kx_(o
2].l+lSGmp:o%D
"); J~q`[I'P
!Gwx5lX.F
insertHotHtml.append("

ciheA~a4h ");
qu/@"kn n
RfQ GO-u M^v0N'DOo i
out.print(insertHotHtml.toString()); //返回一个有表格的HTTP报文
x0R~D9}TYo9K
;juz-@@U
Stc/G/sfD8i return null;
:v3kV*JuH"Q:YOI
5y{ N-{ctDyUT } 'P ZH)lm

s%i]%S*Y!e'x 'j'TFV S
v]E(A6j%W
\
不用java的朋友根本不用管这些，只要记住，能返回一个HTTP报文，比如一个静态网页也可以。 'PK4eK I.mZ

PGaO(gd
Ty:B \ ag;L [nV
)|CZ @)k:Tx 第二步 ： 4k.E
w U_O

'}'aO_$]1f.h$ZI ^ j /T;Q1W,M/lG'C$|*d

Z*n(}bz%OAq%gZR 在页面里加入下面这段javascript代码 1|"y6U+]]6y
(Uq3@5\[6kmw%r

"v{{2u;@/Q;D -v3g"ETP ?R
-b*Iv @Z:B
var xmlHttp; )dD fb+SEU

x5Sg!O/PzD+h @Q D/{@"L\0x
function createXMLHttpRequest(){
jr;\,vsav4n H q h sZS*Yl)H6c`e
if (window.ActiveXObject){
Yb"V%P8PLN
,eAZXm8Nc
Gi r0i xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
AoizFeh,M}
YLlH}8e/Qp1H,H [ }
j3h A/rJ0Ks ({Wep5k d-u7ku L
else if (window.XMLHttpRequest){ v3wK7i/G3C/{$c\
F"QR?.?-M/B
xmlHttp = new XMLHttpRequest(); 6j VQS aK_4}x

8a!LL)S%e } 4gc*e~4e

&x.}A5zPw__n } j5w;?1WuVP b'T

\g
|(je7mEoX?A function startAjaxRequest(method,async,actionUrl,data, invokeMethod){
v/do0H5a[| { Fr*h9mr2O
createXMLHttpRequest(); a k}$Z(L$G

BZ"}1J N5Z xmlHttp.open(method, actionUrl, async); 2l6\Un+MV

z*NY
z(\ QS xmlHttp.onreadystatechange = handleStateChange;
3Q*l&n/^]A6K6@6^
#s,A
?[x$q4| xmlHttp.send(data); ?(xD0lfmP:V

Z!c)Vp!}i@ ^!z$r4q|"qW
function handleStateChange(){ R eu L
G6`
$T+E#_w"n}+v4J[S
if(xmlHttp.readyState == 4){ (Oo7mo/n+|6xu6R,[
9s X-Wk6t,q
if(xmlHttp.status == 200){
aeW1UpL7Tr['I Z1{
)a.y)Uz6y!N var nodeId = xmlHttp.responseText; 0B+~y3g!m4t#T0Z1_+J

H/N3~:m@|1y'a if (nodeId=='noPermission'){
-@w,{^G\@nz
!nPc4i2j?Y,Om alert('你没有权限访问此操作!'); "VRp&izTO"n

dlSGlC%n }else if( (falseIndex = nodeId.indexOf("false||"))!= -1 ){
C)hW9n N sHD/AxcI$o
alert('操作失败，可能的原因为:' + nodeId.substring(
8oQ6W3P/DL -D
MT3SlHG
falseIndex+7, nodeId.length) + "!"); ?H7g#{
BL

m9qGgI]/j%y }else if(nodeId=='false'){
~4z]zfrl }u)W9o!a
2kX.D7o?[ H7_ alert('操作失败，请和管理员联系！'); d ]sIf
X,Fxij,e
}else ...{
c zo`MC
T.gz[nU-sZ if (invokeMethod == undefined){
P}7D+X!S6O9SJDEs
r,N7p`JE!j
x getResult(nodeId); })~y[,Dq)s
$Xoi%i-x6jN
} else { -C6tB0M qk$eu

A1x:oW-Se invokeMethod(nodeId);
K h)C9]x KJ{y
s0m7F]#S:V0X@2_8} } 5UJq{@%RjL3IA6q

itD,Un6O }
V,Z7v0Ao6R] s1cJ
!P6\8}bb+NEc } q)r5O+NwT

[Qi.dWV-X ^3]e } j_,Jh_w$A^/BN w
({i@9Yk;V#D-DK/c
} fgs,\_b

5Zo-Qo4U#ND?2\ }
L:PAr5UFV ]1`sPpvQ

)B
jGW3r,j]E
~s+g.v(\M9Ly
我们要用的就是startAjaxRequest(method,async,actionUrl,data, invokeMethod) 这个方法，具体实现，也不可以不用理会，对于IE和firefox都可以兼容，method 要么是GET，要么是POST，async我们一般都设置为true就可以了，data用来传数据给后台，invokeMethod是指后台返回数据后，前台自动调用什么方法，如果为空，那么就默认调用 invokeMethod(nodeId)这个方法。
-nQ`Pn
}-t~"n} Esx3Z9|)wdR[

[mRpbcWEt$L+s
{k;Kg(SD"w 4N B+]|y!Ug
$(document).ready(function(){
4z/},z6C@!ml:|y q7G CFgm
var actionUrl = "./provider!hotWeek.action";
J:|pb:nb/F
B$O
1T,pEA,YS!w $('body').html("页面加载中...");
/\fzz"^t `
u[U3L_ BVD^ startAjaxRequest("GET",true,actionUrl,'');
pz#}5`3T Co0m6`{R h+]r$C(faV
{%lC fk6d0U-G*|~#a3g
});
"Vz-i9en?
XW]&IUa
L"Av1l
['IoW 'Kj IR#TQ'?
这里我是用jQuery的，一个很好用的javascript框架。 _6|2c.T;_(HqC? l
u.T U$P,h4EN
]M0v+ngHo
"./provider!hotWeek.action" 就是我们获取HTTP报文的地址，大家完全可以用 比如 myTable.asp myTable.php只要返回的HTTP报文是符合XML规则的HTML语言就可以了。
S6va}8R#fw\2c
(o4b2GjJ(jKz2R
I2P]P-o
j7@-?9V
!Wznx^4e!i eU+p+z9n8e
第三步： G3@3Es
E
#Eg0w1`!K8k+U,g"R"Z.~

5DhE0O8x
Y$A(z8Eu5HUIG6zR 后台返回后的处理方法 :B@J6|1Ih.w

ci.zQ[1xj+n"Z!GU(x
+UlA1N&j}4e/\JY"_a
2tjS8J&l%`H-c
b*g%B;vf+u jX+q
function getResult(nodeId){
c1|7u\0@ 5a5iuS&KHR
$('body').html(nodeId); U$xSxD(@ U
2z2X_}5`1~-^)l
} ;g4C2t#@)b

7];bk8p%~+F
G p)ER0Mj
$](g'x BE#gLI !W+qtj\ i%r"[h{7A
总结起来，其实只要 startAjaxRequest("GET",true,actionUrl,'') 这么一个方法就可以去满足大部分AJAX的业务需求了，根本没有必要弄得那么复杂。

查看完整版本: 关于快速简便的使用AJAX技术操作的介绍