什么是AJAX
[转载自IT168站.原无署名]
[转者按]
最新的BBSXP2007官方版本,时髦地采用了大量AJAX网络编程技术(其效果相当于Add论坛搞的活动数据缓存,目的是尽量减少无谓重复运算、减轻服务端的负担特别是库查询负担)。那么什么是AJAX也就成了广大站长的应解之谜,本文可使你有一个初步的了解...
AJAX的全称是“Asynchronous JavaScript and XML”(即“异步JavaScript和XML”)。这是一种多项成熟技术的组合,其目的是让Web应用获得与用户快速即时交互的能力。AJAX所组合的技术,包括:
• JavaScript(Java脚本语言)
• DHTML,Dynamic HTML(动态HTML)
• XML,Extensible Markup Language(可扩展标记语言)
• CSS,Cascading Style Sheets(层叠样式表单)
• DOM,Document Object Model(文档对象模型)
• 微软的称为XMLHttpRequest的对象
在AJAX技术下,用户会感觉到网页与普通桌面应用一样,响应迅速,而不是像传统网页那样,任何操作都需要等待页面的刷新。AJAX是如何做到这一点的呢?有两个秘密:第一,其实AJAX也会刷新页面,只不过,AJAX可以只刷新部分页面,而不是整个页面;第二,AJAX的页面刷新是异步的,就是说,用户可以继续他的其他操作,而不必等候刷新完成。
当用户浏览一个基于AJAX的Web应用时,用户的请求被提交给一个称为“AJAX引擎”的代理,这个引擎负责接收用户请求,从Web服务器上获取响应,并更新浏览器内容。形象地说,传统的Web应用中,浏览器是直接和Web服务器打交道的,而在AJAX应用中,浏览器和Web服务器之间出现了一个来回跑腿的“中介”,而且这个 “中介”相当的勤快,所以,能够给浏览器提供更好的服务,从而使用户获得更满意的应用体验。
AJAX应用的例子,Google Map是一个典型。打开Google Map网站(http://maps.google.com),会看到一张地图,对地图进行放大、缩小以及拖动等操作,网页的响应十分迅速,看起来好像浏览器事先加载了整张地图。其实,浏览器只是根据你的操作,向服务器请求你所看到的那些数据,并异步地更新你的浏览器内容,这一切,都拜AJAX所赐。
JavaScript和微软的XMLHttpRequest对象,是AJAX 引擎的两条腿。当与浏览器交互时,AJAX引擎使用JavaScript语言;而当与Web服务器交互时,则使用微软的XMLHttpRequest对象。由于AJAX引擎依赖微软的XMLHttpRequest对象技术,所以,早期只有微软的IE浏览器支持AJAX。现在,随着采用AJAX技术的Web应用的不断涌现,所有主流的浏览器(例如Firefox、Netscape、Opera等)也都支持AJAX了。
[本帖主追加的实际案例]
在BBSXP2007上的AJAX应用──新用户注册时,于表单提交前对所输用户名是否已被注册的实时检查:
①CreateUser.asp文件:
输入用户名行:
<td align="right" width="23%"><b>用户名:</b></td>
<td align="Left" width="77%"><input type="text" name="UserName" size="40" onblur="CheckUserName(this.value)"> <span id="CheckUserName" style="color:#FF0000"></span></td>
*绿色代码负责其事件触发——当用户名输入完成光标焦点离开本行时,立即叫用CheckUserName这个js脚本程序。
*橙色代码负责反馈区预留——在该行末端预留一个能显示检验结果的信息反馈区。
检验用户名的JS脚本:
<script type="text/javascript">
function CheckUserName(UserName) {
...
Ajax_CallBack(false,"CheckUserName","Loading.asp?menu=CheckUserName&UserNameLength="+UserName.length+"&UserName=" + UserName);
...
</script>
*蓝色代码负责发出AJAX请求——叫用服务端Loading.asp来实施数据库查询和结果输出。
②Loading.asp文件:
case "CheckUserName"
UserName=HTMLEncode(Request.QueryString("UserName"))
...
if not Conn.Execute("Select UserID From [BBSXP_Users] where UserName='"&UserName&"'" ).eof Then
Response.write("<img src='images/check_error.gif' align=absmiddle /> "&UserName&" 已经有人使用,请另选一个!")
else
Response.write("<img src='images/check_right.gif' />")
end if
*黄色代码为若库查询已有该用户名,则向检验信息反馈区输出一个×图、并加汉字提示...
*粉色代码为若没有该用户名,则向检验信息反馈区输出一个√图。
──这就是AJAX的所谓“局部提交”或“中途客-服间交互”(在未正式提交全局信息前,就将局部某些咚咚搞定)
AJAX的精髓就在于此!
登录后方可回帖