摘要: 随着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，这样当用户名或者密码无效时，可以在其中显示来自服务器的出错消息。通过将整个表单放在标签p和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.