hnxxwyq 2007-5-14 20:11
实例解析PHP 结合AJAX 开发
发布时间: 2006-12-18 15:28 作者: feifengxlq 信息来源: PHPchina
Y1r A b-Q;y p&p H
在当前互联网上最火热的一个技术词语，非AJAX莫属。那么AJAX到底是何物呢？对我们广大的PHP开发人员来说，我们又如何结合AJAX开发出更加人性化、更加互动的应用软件呢？在本文中，我将结合一个简单的实例详细的一一解答，希望能起到抛砖引玉的效果。-Bg$c I B8T+h3S
%i@s8i)u m|\
AJAX定义
Y;dP-j-G'x/x
很多开发人员可能认为AJAX是一种新的技术，这是一种误区。事实上AJAX不是一种新的技术，而是对现有的几种成熟技术的再封装。正如大家所说“AJAX是一个旧瓶装新酒的东西”，但正是这样一个旧瓶把新酒装得芬香扑鼻。AJAX改变了传统B/S应用程序的一向弊端：对用户反应不灵敏，用户总是处于提交=>等待=>响应的不友好的过程中，也就是说“用户的动作总是在和服务器思考时间的同步”。而AJAX提供了与服务器异步通信的能力，从根本上让用户从请求=>等待=>响应的循环中解脱出来。 B%f)WmP ^LV
那么，到底什么是AJAX呢？Adaptive Path公司的Jesse James Garrett是这样定义Ajax：
k \2[jb(g
Ajax是由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：n@m4D y4B R0u)g
[quote]基于CSS标准的表示；
8E)A]3_ i qYQ t
使用Document Object Model进行动态显示和交互；
;ng$g:M@y D
使用XMLHttpRequest与服务器进行异步通信；
7b4i%gJ
z` P
使用JavaScript绑定一切。[/quote]
.J4A7PLt
Y+[H9?
事实上AJAX就是“Asynchronous JavaScript + XML的简写”。)Q'{ }({!Byc
!`7NZ n5a-L K
AJAX的工作原理+G+K_O"\w o
AJAX的核心是XMLHttpRequest，该对象首先在IE5中引入，随后在其他浏览器上都得到了不同形式的支持。XMLHttpRequest提供了与服务器异步通信的能力，从而让用户在请求的时候不受到阻塞。
z6v)d v"wv
AJAX工作的大致流程是这样的：首先由用户user在客户端browser页面端触发一个事件，比如说onblur事件，这个事件是能被Javascript捕获到的。然后Javascript相应的创建一个XMLHttpRequest请求，并通过XMLHttpRequest异步的把请求发送到服务器端，同时等待服务器端的响应。服务器端程序在接受请求后，着手处理并把结果返回，返回的结果被XMLHttpRequest捕获到并返回给Javascript，再由Javascript调用相应的DOM进行显示层的控制。图一详细的描述了AJAX工作的原理。,J `2z)f
OvN L
[attach]476[/attach]
1q8?B'bk&b!J
图一、AJAX的工作原理图6N~ ~lm`F4L
m dj G@n.o:Z5s
PHP结合AJAX开发实例,d8?Wi J(R
前面讲解了些AJAX的基本的概念性的东西，那么实际开发中如何具体结合PHP来开发呢？目前在AJAX的开发中已经有很多不同的框架，比如纯JS的prototype，结合PHP的有SAJAX，结合.net的有Alts等等，这些框架都各有其可取之处。我个人是比较推荐纯JS的prototype，这样一方面能更好的提高程序的性能，另一方面也有利于美工和程序的一种分离。
#tt Wz"]
下面这个例子——使用AJAX操作文本文件，实现了AJAX最常用的两种传递数据方式post和get。为了具体的讲解清楚AJAX开发和工作的流程，在这个简单的实例中，我并没有采用任何框架。详细的效果演示及代码下载请访问：[url]http://www.phpobject.net/demo/ajax/[/url]。"w8l
N
J S
下面是这个例子的部分演示图，方便大家更好的理解这个过程4wT^Z*w3TW
[attach]477[/attach]
M5ue{o#t5L3d0A
o F
图二、AJAX演示Demo—读取文本文件界面'S P N1bH
Ta)U V^!Q8~;Ecn
[attach]478[/attach]
3~ t,?2s1}0~$p
o,e:UKK
图三、AJAX演示Demo—显示读取出的数据8T?}k%] { ?9y
V~IgYi2k
[attach]479[/attach]
&m'E/C"~-i;_*d9B
图四、AJAX演示Demo—编辑文本文件中的数据
b nEV T]
K/h ^9M&Nm
M%g
[attach]480[/attach]
)Z1v/w/dn
图五、AJAX演示Demo—保存编辑后的数据
5V+^? ^1Q7HP
下面我们具体来解析下实现的原理，首先是客户端的JS，这也是实现AJAX的核心代码。$Gk6\p!d&P
+aq'gY,RoNN
创建XMLHttpRequest请求
:M^[g gq1a
C
不同的浏览器对XMLHttpRequest的支持形式不一样，为了达到在所有的客户端中都能有同样的效果，我们需要一个函数来产生XMLHttpRequest请求。代码具体如下图所示：._lH5G|ki
` C#j?-p%i
;r&NZN!SyCyVq
[attach]481[/attach] *mx
u Jx3RJ$N6^
图六、创建XMLHttpRequest
.V+Kt? _6E"s6Q6C1Z2C
%[ N"W%{)?
O$`O"T
V2a.G ]"};e4}5K
!B4Ha
w-j
异步发送GET请求
(zj.aRoT6_3Q/U;~C zy
[attach]482[/attach]
8a;F%F+Y[ Q2Q
图七、使用GET方式发送异步请求h }&z.\G rBj"V
l&H
使用XMLHttpRequest与服务端进行异步通信，常用的有两种方式：POST和GET。一般来说POST用来传送大数据到服务器，而GET方法主要用于请求服务器的一些资源。当然实际中这两种方法是没有很严格的区分的。
l(x!eP7k3uP8\7`9T
在图七的代码中，我对其中比较关键的几句进行说明下。/hO&} r6K$N_B1|4k4K
Xmlhttp.open(‘GET’,url,true) 是使客户端采用GET方式和服务器的url地址建立异步通信的连接。
4?Y
\ Jq#s+~
Xmlhttp.send(null) 指XMLHttpRequest向刚开始建立的连接发送数据，这里没有传递数据，所以参数为null，如果有，你相应的send(data)。
b Sv
P4i
Xmlhttp.onreadystatechange=function(){} 这里应该使异步通信的一个关键。它的意思是“当xmlhttp的readystate属性发生改变的时候就触发一个JS事件”。其中readystate为XMLHttpRequest中的一个属性，其不同的值对应异步通信中不同的状态。XMLHttpRequest中readystate的值对应的含义分别如下：0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法），1 (初始化) 对象已建立，尚未调用send方法，2 (发送数据) send方法已调用，但是当前的状态及http头未知，3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据。
*m5a[ M]F6\
x9Py B{ bX
异步发送POST请求
gZ#U aK]%aY2U
S&M#N&y\"wF
!k/X4RW}$g,n5V[
[attach]483[/attach](G'bp/Z&d@?H
图八、使用POST方式发送异步请求
#PCF)y_3K;j U
比较图七和图八的代码，我们不难发现：使用POST方式和使用GET方式在客户端的实现上区别不大，只要在xmlhttp.open的时候相应的把GET改成POST就好了。当然这对服务端的处理就不一样了。下面我们看看服务器端的PHP代码。
c4|n fV-F/Ri
"rf]lVOC g
服务端的PHP代码^5DC/c5{#P0v m*D,L
提示：由于这个是简单的demo，所以服务端的代码并没有进行一些安全性的过滤检测，这并不代码使用AJAX后就不需要过滤了，因此希望读者在实际开发能够注意到一些基本的安全问题。
,g1uOI`'ZP4o
服务端的PHP脚本很简单，主要是两个操作，写入文件和读取文件。由于我这个demo的测试环境是在php5下，如果不是PHP5，请相应的修改程序（主要是PHP5以下不支持file_get_contents和file_put_contents两个函数）。
Bk'koq3Hwl
(h6O+N0q#bC0C
6U@3@$o%FQS-t h
ip*UF6|j_
)f%w$A |2b F.m!E+a
[attach]484[/attach]-H L [5a1C gs4~7h
图九、服务端的PHP脚本
u f }L(On'x
仔细研究图九中的代码，我们要特别注意以下两句：
+_\ ze?]&^!I
header("Cache-Control: no-cache, must-revalidate");x)X&QA `V)g.Np
header('Content-type: text/html;charset=utf-8'); k"?8e!C7P^?Wo
N D
m$rF ob&C
这两句很重要，一句是使得输出数据不缓存到客户端，这样能避免AJAX在通信时采用缓存数据，当然还有另外一种方法就是在AJAX建立连接的URL后面加上时间戳，第二次是指定输出数据的编码格式。这主要是为了确保AJAX中不出现乱码现象。由于XMLHttpRequest在传递数据时，是采用utf-8来传递的，所以我也推荐大家使用utf-8的编码格式输出数据。 I8@ TR.k8LR r
)x!k)g;Z1]1NO
这样，我们就完成了一个简单的AJAX程序开发，详细的效果演示及代码下载请访问：[url]http://www.phpobject.net/demo/ajax/[/url]。;Z(i/I/[,d OEVA
AJAX的功能是强大的，利用AJAX异步通信、局部刷新的优点，我们可以创建更多更强大的B/S应用程序，本文简单介绍了AJAX和如何使用PHP结合AJAX开发，希望能起到抛砖引玉的效果。
/c]_4q)i l(?}x
(K-Gy0E)P%K)n
[quote]a;B|
zZ|
作者：feifengxlq<许立强>y
v U? G9K u0k R
说明：华南理工大学计算机科学与工程学院智能计算研究所研究生。 [/quote]
"m'Qz8`y
vl)|
t9H)oN4A!gV
[[i] 本帖最后由 hnxxwyq 于 2007-5-14 20:14 编辑 [/i]]
