基于Ajax技术用户登陆系统的设计与实现

时间:2022-08-11 09:27:48

基于Ajax技术用户登陆系统的设计与实现

摘要: 随着Ajax技术的不断发展与成熟,其优点也不断体现出来。本文简单介绍了Ajax技术的组成部分和基本工作原理,并在此基础上利用Ajax技术设计和实现一个门户网站的用户登陆系统,验证了Ajax技术的优越性。

关键词: Ajax;XMLHttpRequest;用户登陆系统

传统的Web页面重载机制给用户一种不连贯的体验,因此,关于页面载入技术的研究日益成为Web应用程序设计的关键[1]。Ajax采用独特的远程脚本调用技术,异步实现页面数据的更新,使用全新的网页应用程序设计模式,解决了传统页面的重载问题。

本文在介绍Ajax技术组成和基本原理的基础上,给出基于Ajax技术用户登陆系统的设计和实现过程。

1 Ajax技术简介

1.1 Ajax基本组成

Ajax不是一种单一的技术,而是四种技术的集合[2],即CSS、DOM、JavaScript和XMLHttpRequest对象。其中,CSS、DOM和JavaScript被合称为DHTML,即动态HTML, XMLHttpRequest对象可以与Web服务器异步通信,为用户带来响应速度快、交互感强的体验。

1.2 异步通信工作原理

与传统的Web应用不同,Ajax技术使用XMLHttpRequest对象提供与服务器异步通信的能力。当客户端的用户操作触发XMLHttpRequest对象后,客户端向服务器发送一个异步请求。方法非常迅速地返回,只会将客户端用户界面阻塞很短的时间。如果服务器端处理好客户端请求,向客户端发送响应数据。客户端通过一个回调函数解析来自服务器的响应,并根据响应数据更新用户界面。

2用户登陆系统设计与实现

现在,B/S结构三层模型占据Web设计的主流[3]

本文阐述的系统利用B/S结构三层模型

2.1 服务器端设计

本文使用Apache的Tomcat服务器,图1展示了登陆过滤器的设计流程。

在上面设计中,应用一个过滤器检查user对象是否保存在会话中。如果是,就允许用户登陆;否则,就根据请求中提供的用户名和密码来做身份验证,然后访问数据库寻找一行匹配记录。如果没有找到匹配记录,就会返回一条指令来显示出错信息;如果找到匹配记录,则创建一个新user对象并把它保存在会话中,以便下一次请求能够通过这个过滤器。这样,在后续的请求通过过滤器的时候,不再需要在查询框中提供用户名和密码,因为user对象已经在会话中。

2.2 客户端设计

客户端用户登陆过程由两个部分组成。第一部分是可视化界面部分,第二部分是用户登陆过程部分。 如图2所示。

2.2.1可视化界面设计

在表单中放入一个文本框、一个密码字段以及一个用来将表单提交到服务器的提交按钮。创建一个标签span,这样当用户名或者密码无效时,可以在其中显示来自服务器的出错消息。通过将整个表单放在标签div和span中,对HTML实现了格式化,以便产生门户的标题。

2.2.2用户登陆过程设计

登陆过程利用Ajax异步通信机制,允许客户端只发送用户名和密码到服务器,这样,客户端无需提交整个页面,从而减小了传输的数据量[4]

登陆过程需要执行两个操作:第一个操作收集信息,第二个操作是发送请求到服务器。

在操作收集过程中,用户输入用户名、密码字段,程序将放在一个将会提交到服务器的字符串中。然后将这些值通过AjaxUpdater对象提交到服务器。

AjaxUpdater对象是本文实现Ajax异步通信的方法,它可以接受参数,包括目标URL、请求成功时调用的函数、请求失败时调用的函数、使用HTTP方法以及包含提交参数的字符串。

AjaxUpdadter对象将会等待服务器返回一个XML文档,当数据从服务器正确返回时,将调用MakeScrip()函数,MakeScrip()函数将利用从服务器端获取的数据创建登陆后的窗口界面。

3门户登陆系统实现效果

通过对服务器端和客户端的设计和实现,用户可以使用这个门户登陆系统。如图3所示,在输入框中依次输入姓名和密码,点击“登陆”按钮,此时输入框下“正在登陆”信息提示用户客户端发送客户信息(而不是提交整个页面)到服务器端。

如果服务器在数据库中找到用户信息,那么用户登陆成功。此后,服务器在数据库中寻找用户的配置信息和用户登陆的网站地址,返回给用户端的回调函数。回调函数根据返回的信息创建三个子窗口装载相关网站,作为登陆后的窗口界面。如图4示。

4结束语

本文首先简单介绍了Ajax技术的概念和基本工作原理,然后利用Ajax技术设计并实现了一个简单的门户登陆系统,从而验证了Ajax技术快速、交互性强的异步通信的优点,并且为Web应用程序的研究深化奠定了基础。

参考文献:

[1] 杨国瑞, 张思博. 基于Ajax的Web应用架构设计[J]现代电子技术,2006,15 (230):95-98.

[2] Ryan Asleson , Nathaniel T Schutta. Foundations of Ajax[M]. 第1版,北京:人民邮电出版社,2006.24-36..

[3] Philip McCarthy. 面向Java 开发人员的Ajax :构建动态的Java 应用程序[ EO/ OL ] . http :/ / www 128. ibm. com/ developerworks/ cn/ java/ jajax1. 2005. 10. 20.

[4] 崔瑶,钱小江.基于Ajax 的动态搜索功能设计和应用[J].网络安全与技术应用,2007,12(5):61-64.

上一篇:关于NGN网络与智能业务网络的互通浅析 下一篇:浅析动态网站建设之后台数据库的选择