基于Ａｊａｘ技術用戶登陸系統的設計與實現

摘要: 隨著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，這樣當用戶名或者密碼無效時，可以在其中顯示來自服務器的出錯消息。通過將整個表單放在標簽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.