[Ａｊａｘ技术在Ｗｅｂ　２．０中的应用与实现]web2.0技术的典型应用

　　摘要：本文主要探讨Ajax技术在Web中的应用原理、较传统web应用的优势等问题，并举例说明用Ajax建立用户登录功能的实现方法。 　　关键词：Ajax；JavaScript
　　中图分类号：TP311 文献标识码：A
　　
　　1 概述
　　
　　Ajax是一种新型的网页交互技术。它允许在客户端和服务器之间只传输少量的信息，避免了每次点击都要重新下载页面的等待，从而让用户得到更快的响应和更及时的反馈。
　　在传统的网站程序中，浏览器负责向服务器提交用户请求，并处理服务器对请求的响应。这使得用户为了提交一点点数据都需要重新下载网页。而网页的频繁刷新不仅使用户等待响应的时间变长，而且更容易导致用户的误操作。
　　Ajax模型利用中间层来解决这一问题，即Ajax引擎（Ajax Engine），用它来处理客户端和服务器之间的通信。Ajax引擎使用JavaScript函数实现，只有当需要处理客户端与服务器间通信的时候才调用它。与传统模型的最大不同是，Ajax模型的处理过程是异步的，不需要等到响应到达后才继续执行后续的代码。
　　
　　2 较传统web应用的优势
　　
　　2.1 Ajax技术图示
　　
　　
　　
　　
　　
　　
　　
　　2.2 Ajax的技术优势
　　1．通讯采用异步模式，使网页执行的效率大大提高。例如，客户端在向服务器端发出了查询操作后，将立刻执行查询语句的下一条代码，无须停下来等待服务器端的反馈结果。
　　2．优化了浏览器和服务器间的传输，减少不必要的数据下载＜sup＞[1]＜/sup＞。传统web应用的基本过程是，先让用户填写表单，在提交表单时向Web服务器发送一个请求。服务器端接收并处理请求，然后返回一个新的网页。这样的过程浪费了很多时间，因为在前后两个页面中，网页代码往往大部分是相同的。由于每次交互过程都需要向服务器端发送请求，网页的响应速度就依赖于服务器的响应速度，这就导致了用户的网页界面响应比本地程序的界面响应要慢得多。
　　3．Ajax引擎在客户端运行，并承担一部分原本由服务器端处理的工作，从而减少服务器端的数据负载，进一步提升网络交互的效率。Ajax应用程序仅向服务器端发送并获取交互所必需的数据，从而使服务器和浏览器间交换的数据大大减少，用户就能看到更快响应的应用过程。另一方面，由于很多的处理工作能在客户端上完成，所以也缩短了服务器的处理时间。
　　
　　3 用Ajax实现用户登录功能
　　
　　3.1 建立用户信息表
　　建立存储用户信息的数据库表users表，其中包含3个属性，分别是序号xuhao、用户名xingming和密码mima。以下为创建此表的SQL语句：
　　create table users （xuhao int primary key unique not null， xingming varchar（50） not null， mima varchar（50） not null
　　3.2 服务器端代码
　　用户登录门户网站的过程是：客户端代码先向服务器端发送一个请求，在请求中传递用户的身份信息。服务器端获取到这一请求，并要确定此身份信息是否正确。如果正确，就开始创建主页；如果身份信息不正确，就给客户端页面发回出错消息。
　　以Java语言为例，可用了servlet程序封装所有与服务器端的交互代码。利用一个过滤器来检查User对象是否己经保存在会话中。如果是，就接受；否则将根据请求中提供的用户名和密码来做身份验证。如果接受，请求就会继续传递到servlet程序中；不然就返回一条出错消息。以下代码封装了出错消息的JavaScript语句：
　　public static String getLoginError （ ） {
　　StringBuffer jsBuf=new StringBuffer （ ）
　　. append（" document.getElementByld （"spanProcessing"） \\n " ）
　　. append （" . innerHTML=" ）
　　. append （" "姓名和密码不正确！"； \\n " ） ；
　　return jsBuf . tostring （ ） ；
　　}
　　服务器端从请求中取出用户名和密码，然后访问数据库寻找匹配的记录。如果找到匹配此用户信息的记录，会返回一个user对象的实例，然后将其保存在会话中。当后续再有请求时，就不需要再发送用户名和密码了。此方法的优点是，使用户非常容易执行注销操作，只需将User 实例从会话中删除即可。以下为User 对象的定义代码：
　　//User.java
　　public class User {
　　private int xuhao=-1 ；
　　private String xingming=null ；
　　public User （ int xuhao ， String xingming ） {
　　Super （ ） ；
　　this.xuhao=xuhao ；
　　this.xingming=xingming ；
　　}
　　public int getXuhao （ ） { return xuhao ； }
　　public String getXingming （ ）｛return xingming ； }
　　}
　　3.3 客户端登录页
　　客户端登录页由两部分组成。一部分是动态网页的HTML代码，另一部分是Ajax（JavaScript）代码，用来把请求发送到服务器端，并且要能处理响应。JavaScript语言中的Eval （ ）方法可将传递给它的字符串作为JavaScript代码来执行。如果字符串中包含一个变量名，它就创建这个变量。如果Eval （ ）的输入参数包含一个函数调用，它就执行这个函数。需要注意的是，虽然Eval （ ）方法功能十分强大，但如果要做的操作过于复杂，该方法的性能可能会受到影响。以下为网页的HTML 代码：
　　＜form name=" Form1 " ＞
　　＜div id =" header " ＞
　　＜span id =" login " ＞
　　姓名：
　　＜input type=" text " name =" xingming " ＞
　　＜br＞密码：
　　＜input type =" mima " name=" mima " ＞
　　＜br＞
　　＜span id =" spanProcessing " ＞＜/span＞
　　＜input type=" submit " name=" btnsub " value =" 登录 " onclick=" loginreqrest（） " ＞
　　＜/span＞
　　＜span id =" sloganText " ＞提示信息＜/span＞
　　＜/div＞
　　＜div id =" defaultContent " ＞
　　＜p＞网页中的其他内容＜/p＞
　　＜/div＞
　　＜div id =" divSettings " class=" hidden " ＞＜/div＞
　　＜/form＞
　　代码中的onclick 事件用来将数据提交到服务器端，通过调用loginreqrest （ ） 函数启动Ajax 请求。为美化页面，可在网页上使用一个CSS规则。例如下列代码，在文档的head 标签中添加一个内嵌的style标签，用来改变表单颜色、字体、大小、位置、边距等样式：
　　＜style type=" text/css " ＞
　　html.body {margin ： 0px ； padding ： 0px ； height ： 100% ； }
　　#header {background-color：#c0c0c0；height：100px；border-bottom：1px solid black； font-weight：bold；}
　　#login { text- align ： right ； float ： right ； margin-top ： 15px ； margin-right ： 15px ； }
　　#sloganText { font-size ： 25px ； margin-left ： 15px ； line-height ： 100px ； }
　　＜/style＞
　　3.4 登录代码
　　Ajax的优势在于：在网页点击时，JavaScript提交代码只发送用户名和密码到服务器，而无须提交整个页面，这样就能加快用户浏览的速度。例如在本例中，引用一个外部的JavaScript文件net.js：
　　＜script type=" text/javascript " src=" net.js " ＞＜/script＞
　　net.js包含三个步骤的代码。首先通知用户：请求正在被处理；然后收集发送的信息；最后将请求信息发送到服务器。最后一步用函数LoginRequest实现，代码如下：
　　function LoginRequest （ ） {
　　document. getElementByld （" spanProcessing " ） . innerHTML=" Verifying Credentials " ；
　　var url =" portalLogin. servlet " ；
　　var strName=document.Forml.xingming.value ；
　　var strPass=document. Forml. mima. value ；
　　var strParams=" user=" +strName+ " &pass=" +strPass
　　var loaderl=new net.ContentLoader（url ， Createscript ， null ， " POST " ， strParams ） ；
　　}
　　在发送信息之前，会显示一条消息，告诉用户点击“登录”按钮的操作正在处理中。这样可以防止用户误以为什么都没发生而重复地点击按钮，造成系统错误。
　　网页中提交的用户名和密码字段值会被放在一个字符串中，然后通过ContentLoader对象提交给服务器。当服务器返回登录成功信息时会调用createscript （ ） 函数，它负责处理由服务器端页面返回的数据：
　　function Createscript （ ） {
　　strText=this . req . responseText ；
　　eval （ strText ） ；
　　}
　　responseText属性中返回了包含JavaScript语句的字符串，然后使用eval （ ）函数执行字符串。字符串中可以包含由LoginFilter产生的出错消息，也可以包含允许用户登录时由SelectServlet返回的窗口创建代码。
　　如果登录成功，上述的请求信息就会被提交给主页面，最后利用HTML创建下一个窗口。
　　
　　4 结论
　　
　　用Ajax技术建立的网站可让用户在访问时体验到浏览本机资源一样的顺畅感，大大减少了重复下载网页资源的等待时间，并且能使网页具有更好的视觉效果。但需要注意的是，使用Ajax技术前一定要有所规划，计划好哪些方面需要用到Ajax，否则会给网站的修改和维护带来麻烦。另一方面，由于JavaScript语言的强大功能和语言缺陷，在编写和调试时一定要多考虑怎样规避潜在的执行错误和病毒入侵。
　　
　　参考文献
　　[1]Ryan Asleson， Nathaniel T.Schutta. Foundation of Ajax [M]. 北京：人民邮电出版社， 2006.

相关热词搜索：技术 Ajax Web Ａｊａｘ技术在Ｗｅｂ　２．０中的应用与实现 web2 0技术的典型应用 web2 0时代的典型应用