基于Ajax技术用户登陆系统设计及实现.docVIP

基于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技术快速、交互性强的异