基于Ａｊａｘ技术用户登陆系统的设计与实现

基于Ａｊａｘ技术用户登陆系统的设计与实现

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

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

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

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

1Ajax技术简介

1.1Ajax基本组成

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，这样当用户名或者密码无效时，可以在其中显示来自服务器的出错消息。通过将整个表单放在标签p和span中，对HTML实现了格式化，以便产生门户的标题。

2.2.2用户登陆过程设计

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

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

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

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

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

3门户登陆系统实现效果

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

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

4结束语