admin 管理员组

文章数量: 1087135


2024年4月13日发(作者：简单构造函数和析构函数)

中南论坛　２００８年第４期　

Ａｊａｘ技术在Ｗｅｂ　２．０中的应用与实现　

何　维　

（武汉科技大学中南分校

摘

信息工程学院，湖北武汉４３０２２３）　

要：本文主要探讨Ａｊａｘ技术在Ｗｅｂ中的应用原理、较传统ｗｅｂ应用的优势等问题，并举例说明用　、　

Ａｊａｘ建立用户登录功能的实现方法。　

关键词ｉ　Ａｊａｘ；Ｊａｖａ，Ｓｃｒｉｐｔ　‘　

中图分类号：ＴＰ３１１　文献标识码：Ａ　

１　概述　

１．通讯采用异步模式，使网页执行的效率大大　

提高。例如，客户端在向服务器端发出了查询操作　

Ａｊａｘ是一种新型的网页交互技术。它允许在客　后，将立刻执行查询语句的下一条代码，无须停下　

户端和服务器之间只传输少量的信息，避免了每次　来等待服务器端的反馈结果。　

点击都要重新下载页面的等待，从而让用户得到更　

２．优化了浏览器和服务器间的传输，减少不必　

快的响应和更及时的反馈。　

要的数据下载　。传统ｗｅｂ应用的基本过程是，先　

在传统的网站程序中，浏览器负责向服务器提　让用户填写表单，在提交表单时向Ｗｅｂ服务器发送　

交用户请求，并处理服务器对请求的响应。这使得　

一

个请求。服务器端接收并处理请求，然后返回一　

用户为了提交一点点数据都需要重新下载网页。而　

个新的网页。这样的过程浪费了很多时间，因为在　

网页的频繁刷新不仅使用户等待响应的时间变长，　

前后两个页面中，网页代码往往大部分是相同的。　

而且更容易导致用户的误操作。　

由于每次交互过程都需要向服务器端发送请求，网　

Ａｊａｘ模型利用中间层来解决这一问题，即Ａｊａｘ　页的响应速度就依赖于服务器的响应速度，这就导　

引擎（Ａｊａｘ　Ｅｎｇｉｎｅ），用它来处理客户端和服务器之　

致了用户的网页界面响应比本地程序的界面响应要　

间的通信。Ａｊａｘ引擎使用ＪａｖａＳｃｒｉｐｔ函数实现，只有　

慢得多。　

当需要处理客户端与服务器间通信的时候才调用它。　

３．Ａｊａｘ引擎在客户端运行，并承担一部分原本　

与传统模型的最大不同是，Ａｊａｘ模型的处理过程是　由服务器端处理的工作，从而减少服务器端的数据　

异步的，不需要等到响应到达后才继续执行后续的　

负载，进一步提升网络交互的效率。Ａｊａｘ应用程序　

代码。　

仅向服务器端发送并获取交互所必需的数据，从而　

２较传统ｗｅｂ应用的优势　

使服务器和浏览器间交换的数据大大减少，用户就　

能看到更快响应的应用过程。另一方面，由于很多　

２．１　Ａｊａｘ技术图示　

的处理工作能在客户端上完成，所以也缩短了服务　

器的处理时间。　

３用Ａｊａｘ实现用户登录功能　

３．１　建立用户信息表　

建立存储用户信息的数据库表ｕｓｅｒｓ表，其中包　

２．２　Ａｊａｘ的技术优势　

含３个属性，分别是序号ｘｕｈａｏ、用户名ｘｉｎｇｍｉｎｇ和　

收稿日期ｔ　２００８—０６—０５　

作者简介：何维（１９８２一），男，湖北武汉人，武汉科技大学中南分校信息工程学院教师。　

２００８年第４期　科技探索　

密码ｍｉｍａ。以下为创建此表的ＳＱＬ语句：　

ｃｒｅａｔｅ　ｔａｂｌｅ　ｕｓｅｒｓ（ｘｕｈａｏ　ｉｎｔ　ｐｒｉｍａｒｙ　ｋｅｙ　ｕｎｉｑｕｅ　ｎｏｔ　

ｎｕｌｌ，ｘｉｎｇｍｉｎｇ　ｖａｒｃｈａｒ（５０）ｎｏｔ　ｎｕｌｌ，ｍｉｍａ　ｖａｒｃｈａｒ　

（５０）ｎｏｔ　ｎｕｌｌ　

３．２服务器端代码　

｝　

３．３客户端登录页　

客户端登录页由两部分组成。一部分是动态网　

页的ＨＴＭＬ代码，另一部分是Ａｊａｘ（ＪａｖａＳｃｒｉｐｔ）代　

码，用来把请求发送到服务器端，并且要能处理响　

用户登录门户网站的过程是：客户端代码先向　

应。ＪａｖａＳｃｒｉｐｔ语言中的Ｅｖａｌ（）方法可将传递给它　

的字符串作为ＪａｖａＳｃｒｉｐｔ代码来执行。如果字符串中　

包含一个变量名，它就创建这个变量。如果Ｅｖａｌ（）　

的输人参数包含一个函数调用，它就执行这个函数。　

服务器端发送一个请求，在请求中传递用户的身份　

信息。服务器端获取到这一请求，并要确定此身份　

信息是否正确。如果正确，就开始创建主页；如果　

身份信息不正确，就给客户端页面发回出错消息。　

以Ｊａｖａ语言为例，可用了ｓｅｒｖｌｅｔ程序封装所有　

与服务器端的交互代码。利用一个过滤器来检查ｕｓ—　

ｅｒ对象是否己经保存在会话中。如果是，就接受；　

否则将根据请求中提供的用户名和密码来做身份验　

证。如果接受，请求就会继续传递到ｓｅｒｖｌｅｔ程序中；　

不然就返回一条出错消息。以下代码封装了出错消　

息的ＪａｖａＳｃｒｉｐｔ语句：　

ｐｕｂｌｉｃ　ｓｔａｔｉｃ　Ｓｔｉｒｎｇ　ｇｅｔＩ￣ｇｉｎＥｒｒｏｒ（）｛　

ＳｔｒｉｎｇＢｕｆｆｅｒ　ｊｓＢｕｆ＝ｎｅｗ　ＳｔｒｉｎｇＢｕｆｆｅｒ（）　

．

ａｐｐｅｎｄ（”ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（ｇｐａｎＰｒｏｃ—　

ｅｓｓｉｎｇ＇）＼ｎ”　

．

ａｐｐｅｎｄ（”．ｉｎｎｅｒＨＴＭＬ：”）　

．

ａｐｐｅｎｄ（”姓名和密码不正确！　＼ｎ”）；　

ｒｅｔｕｒｎ　ｊｓＢｕｆ．ｔｏｓｔｒｉｎｇ（）；　

｝　

服务器端从请求中取出用户名和密码，然后访　

问数据库寻找匹配的记录。如果找到匹配此用户信　

息的记录，会返回一个ｕｓｅｒ对象的实例，然后将其　

保存在会话中。当后续再有请求时，就不需要再发　

送用户名和密码了。此方法的优点是，使用户非常　

容易执行注销操作，只需将Ｕｓｅｒ实例从会话中删除　

即可。以下为Ｕｓｅｒ对象的定义代码：　

／／Ｕｓｅｒ．ｊａｖａ　

ｐｕｂｌｉｃ　ｃｌａｓｓ　Ｕｓｅｒ｛　

ｐｒｉｖａｔｅ　ｉｎｔ　ｘｕｈａｏ＝一１：　

ｐｒｉｖａｔｅ　Ｓｔｒｉｎｇ　ｘｉｎｇｍｉｎｇ　ｎｕｌｌ；　

ｐｕｂｌｉｃ　Ｕｓｅｒ（ｉｎｔ　ｘｕｈａｏ，Ｓｔｉｒｎｇ　ｘｉｎｇｍｉｎｇ）｛　

Ｓｕｐｅｒ（）；　

ｔｈｉｓ．ｘｕｈａｏ＝ｘｕｈａｏ；　

ｔｈｉｓ．ｘｉｎｇｍｉｎｇ　ｘｉｎｇｍｉｎｇ；　

｝　

ｐｕｂｌｉｃ　ｉｎｔ　ｇｅｔＸｕｈａｏ（）｛ｒｅｔｕｒｎ　ｘｕｈａｏ；｝　

ｐｕｂｌｉｃ　Ｓｔｉｒｎｇ　ｇｅｔＸｉｎｇｍｉｎｇ（）　｛ｒｅｔｕｒｎ　ｘｉｎｇｍｉｎｇ　

：｝　

需要注意的是，虽然Ｅｖａｌ（）方法功能十分强大，　

但如果要做的操作过于复杂，该方法的性能可能会　

受到影响。以下为网页的ＨＴＭＬ代码：　

＜ｆｏｒｍ　ｎａｌｎｅ：’’Ｆｏｒｍ１”＞　

＜ｄｉｖ　ｉｄ＝”ｈｅａｄｅｒ”＞　

＜ｓｐａｎ　ｉｄ＝”ｌｏｇｉｎ”＞　

姓名：　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｔｅｘｔ”ｎａｍｅ＝”ｘｉｎｇｍｉｎｇ’’＞　

＜ｂｒ＞密码：　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｍｉｍａ”ｎａｍｅ＝’’ｍｉｍａ”＞　

＜ｂｒ＞　

＜ｓｐａｎ　ｉｄ＝”ｓｐａｎＰｒｏｃｅｓｓｉｎｇ’’＞＜／ｓｐａｎ＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｓｕｂｍｉｔ”ｎａｍｅ＝”ｂｔｎｓｕｂ”ｖａｌｕｅ　

＝”登录”ｏｎｃｌｉｃｋ＝”ｌｏｇｉｎｒｅｑｒｅｓｔ（）”＞　

＜／ｓｐａｎ＞　

＜ｓｐａｎ　ｉｄ＝”ｓｌｏｇａｎＴｅｘｔ”＞提示信息＜／ｓｐａｎ＞　

＜／ｄｉｖ＞　

＜ｄｉｖ　ｉｄ＝”ｄｅｆａｕｈＣｏｎｔｅｎｔ”＞　

＜Ｐ＞网页中的其他内容＜／ｐ＞　

＜／ｄｉｖ＞　

＜ｄｉｖ　ｉｄ＝”ｄｉｖＳｅｔｔｉｎｇｓ”ｃｌａｓｓ＝’’ｈｉｄｄｅｎ”＞　

＜／ｄｉｖ＞　

＜／ｆｏｒｍ＞　

代码中的ｏｎｃｌｉｃｋ事件用来将数据提交到服务器　

端，通过调用ｌｏｇｉｎｒｅｑｒｅｓｔ（）函数启动Ａｊａｘ请求。　

为美化页面，可在网页上使用一个ＣＳＳ规则。例如　

下列代码，在文档的ｈｅａｄ标签中添加一个内嵌的　

ｓｔｙｌｅ标签，用来改变表单颜色、字体、大小、位置、　

边距等样式：　

＜ｓｔｙｌｅ　ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”＞　

ｈｔｍ１．ｂｏｄｙ｛ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ：０ｐｘ；ｈｅｉｇｈｔ　

：１００％；｝　

＃ｈｅａｄｅｒ｛ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：＃ｃ０ｃ０ｃ０；ｈｅｉｇｈｔ：　

ｌＯＯｐｘ；ｂｏｒｄｅｒ—ｂｏｔｔｏｍ：１ｐｘ　ｓｏｌｉｄ　ｂｌａｃｋ；ｆｏｎｔ—ｗｅｉｇｈｔ：　

ｂｏｌｄ；｝　

中南论坛　２００８年第４期　

＃１ｏｇｉｎ｛ｔｅｘｔ—ａｌｉｇｎ：ｆｉｇｈｔ；ｆｌｏａｔ：ｒｉｇｈｔ；ｍａｒｇｉｎ　

个字符串中，然后通过ＣｏｎｔｅｎｔＬｏａｄｅｒ对象提交给服　

—

ｔｏｐ：１５ｐｘ；ｍａｒｇｉｎ—ｒｉｇｈｔ：１５ｐｘ；｝　

＃ｓｌｏｇａｎＴｅｘｔ｛ｆｏｎｔ—ｓｉｚｅ：２５ｐｘ；ｍａｒｇｉｎ—ｌｅｆｔ：　

１５ｐｘ；ｌｉｎｅ—ｈｅｉｇｈｔ：ｌＯＯｐｘ；｝　

＜／ｓｔｙｌｅ＞　

３．４登录代码　

Ａｊａｘ的优势在于：在网页点击时，ＪａｖａＳｃｒｉｐｔ提　

交代码只发送用户名和密码到服务器，而无须提交　

整个页面，这样就能加快用户浏览的速度。例如在　

本例中，引用一个外部的ＪａｖａＳｃｒｉｐｔ文件ｎｅｔ．ｊｓ：　

＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ＝”ｎｅｔ．ｊＳ”　

＞＜／ｓｃｒｉｐｔ＞　

ｎｅｔ．ｊＳ包含三个步骤的代码。首先通知用户：请　

求正在被处理；然后收集发送的信息；最后将请求　

信息发送到服务器。最后一步用函数ＬｏｇｉｎＲｅｑｕｅｓｔ　

实现，代码如下：　

ｆｕｎｃｔｉｏｎ　ＬｏｇｉｎＲｅｑｕｅｓｔ（）｛　

ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（”ｓｐａｎＰｒｏｃｅｓｓｉｎｇ”）．　

ｉｎｎｅｒＨＴＭＬ＝”Ｖｅｒｉｆｙｉｎｇ　Ｃｒｅｄｅｎｔｉａｌｓ”：　

ｖａｒ　ｕｒｌ＝”ｐｏｒｔａｌＬｏｇｉｎ．ｓｅｒｖｌｅｔ”：　

ｖａｒ　ｓｔｒＮａｍｅ＝ｄｏｃｕｍｅｎｔ．Ｆｏｒｍ１．ｘｉｎｇｍｉｎｇ．ｖａｌｕｅ：　

ｖａｒ　ｓｔｒＰａｓｓ＝ｄｏｃｕｍｅｎｔ．Ｆｏｒｍ１．ｍｉｍａ．ｖａｌｕｅ：　

ｖａｒ　ｓｔｒＰａｒａｍｓ＝”ｕｓｅｒ＝”＋ｓｔｒＮａｍｅ＋”＆ｐａｓｓ　

＝

”　ｓｔｒＰａｓｓ　

ｖａｒ　ｌｏａｄｅｒｌ＝ｎｅｗ　ｎｅｔ．ＣｏｎｔｅｎｔＬｏａｄｅｒ（ｕｒｌ，Ｃｒｅａｔｅ－　

ｓｃｒｉｐｔ，ｎｕｌｌ，”ＰＯＳＴ”，ｓｔｒＰａｒａｍｓ）；　

｝　

在发送信息之前，会显示一条消息，告诉用户　

点击“登录”按钮的操作正在处理中。这样可以防　

止用户误以为什么都没发生而重复地点击按钮，造　

成系统错误。　

网页中提交的用户名和密码字段值会被放在一　

务器。当服务器返回登录成功信息时会调用ｃｒｅａｔｅ．　

ｓｃｒｉｐｔ（）函数，它负责处理由服务器端页面返回的　

数据：　

ｆｕｎｃｔｉｏｎ　Ｃｒｅａｔｅｓｃｒｉｐｔ（）｛　

ｓｔｒＴｅｘｔ＝ｔｈｉｓ．ｒｅｑ．ｒｅｓｐｏｎｓｅＴｅｘｔ；　

ｅｖａｌ（ｓｔｒＴｅｘｔ）；　

｝　

ｒｅｓｐｏｎｓｅＴｅｘｔ属性中返回了包含ＪａｖａＳｃｒｉｐｔ语句的　

字符串，然后使用ｅｖａｌ（）函数执行字符串。字符　

串中可以包含由ＬｏｇｉｎＦｉｌｔｅｒ产生的出错消息，也可　

以包含允许用户登录时由ＳｅｌｅｃｔＳｅｒｖｌｅｔ返回的窗口创　

建代码。　

如果登录成功，上述的请求信息就会被提交给　

主页面，最后利用ＨＴＭＬ创建下一个窗口。　

４结论　

用Ａｊａｘ技术建立的网站可让用户在访问时体验　

到浏览本机资源一样的顺畅感，大大减少了重复下　

载网页资源的等待时间，并且能使网页具有更好的　

视觉效果。但需要注意的是，使用Ａｊａｘ技术前一定　

要有所规划，计划好哪些方面需要用到Ａｊａｘ，否则　

会给网站的修改和维护带来麻烦。另一方面，由于　

ＪａｖａＳｃｒｉｐｔ语言的强大功能和语言缺陷，在编写和调　

试时一定要多考虑怎样规避潜在的执行错误和病毒　

入侵　

参考文献　

［１］Ｒｙａｎ　Ａｓｌｅｓｏｎ，Ｎａｔｈａｎｉｅｌ　Ｔ．Ｓｃｈｕｔｔａ．Ｆｏｕｎｄａｔｉｏｎ　ｏｆ　Ａｊａｘ［Ｍ］　

北京：人民邮电出版社，２００６．　


本文标签： 用户 请求 服务器端 网页 代码

版权声明：本文标题：Ajax技术在Web2.0中的应用与实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1712969958a614885.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。