基于Ａｊａｘ技術(shù)用戶登陸系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

基于Ａｊａｘ技術(shù)用戶登陸系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

摘要:隨著Ajax技術(shù)的不斷發(fā)展與成熟，其優(yōu)點(diǎn)也不斷體現(xiàn)出來。本文簡單介紹了Ajax技術(shù)的組成部分和基本工作原理，并在此基礎(chǔ)上利用Ajax技術(shù)設(shè)計(jì)和實(shí)現(xiàn)一個(gè)門戶網(wǎng)站的用戶登陸系統(tǒng)，驗(yàn)證了Ajax技術(shù)的優(yōu)越性。

關(guān)鍵詞:Ajax;XMLHttpRequest;用戶登陸系統(tǒng)

傳統(tǒng)的Web頁面重載機(jī)制給用戶一種不連貫的體驗(yàn)，因此，關(guān)于頁面載入技術(shù)的研究日益成為Web應(yīng)用程序設(shè)計(jì)的關(guān)鍵[1]。Ajax采用獨(dú)特的遠(yuǎn)程腳本調(diào)用技術(shù)，異步實(shí)現(xiàn)頁面數(shù)據(jù)的更新，使用全新的網(wǎng)頁應(yīng)用程序設(shè)計(jì)模式，解決了傳統(tǒng)頁面的重載問題。

本文在介紹Ajax技術(shù)組成和基本原理的基礎(chǔ)上，給出基于Ajax技術(shù)用戶登陸系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)過程。

1Ajax技術(shù)簡介

1.1Ajax基本組成

Ajax不是一種單一的技術(shù)，而是四種技術(shù)的集合[2]，即CSS、DOM、JavaScript和XMLHttpRequest對象。其中，CSS、DOM和JavaScript被合稱為DHTML，即動態(tài)HTML，XMLHttpRequest對象可以與Web服務(wù)器異步通信，為用戶帶來響應(yīng)速度快、交互感強(qiáng)的體驗(yàn)。

1.2異步通信工作原理

與傳統(tǒng)的Web應(yīng)用不同，Ajax技術(shù)使用XMLHttpRequest對象提供與服務(wù)器異步通信的能力。當(dāng)客戶端的用戶操作觸發(fā)XMLHttpRequest對象后，客戶端向服務(wù)器發(fā)送一個(gè)異步請求。方法非常迅速地返回，只會將客戶端用戶界面阻塞很短的時(shí)間。如果服務(wù)器端處理好客戶端請求，向客戶端發(fā)送響應(yīng)數(shù)據(jù)。客戶端通過一個(gè)回調(diào)函數(shù)解析來自服務(wù)器的響應(yīng)，并根據(jù)響應(yīng)數(shù)據(jù)更新用戶界面。

2用戶登陸系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

現(xiàn)在，B/S結(jié)構(gòu)三層模型占據(jù)Web設(shè)計(jì)的主流[3]

本文闡述的系統(tǒng)利用B/S結(jié)構(gòu)三層模型

2.1服務(wù)器端設(shè)計(jì)

本文使用Apache的Tomcat服務(wù)器，圖1展示了登陸過濾器的設(shè)計(jì)流程。

在上面設(shè)計(jì)中，應(yīng)用一個(gè)過濾器檢查user對象是否保存在會話中。如果是，就允許用戶登陸;否則，就根據(jù)請求中提供的用戶名和密碼來做身份驗(yàn)證，然后訪問數(shù)據(jù)庫尋找一行匹配記錄。如果沒有找到匹配記錄，就會返回一條指令來顯示出錯(cuò)信息;如果找到匹配記錄，則創(chuàng)建一個(gè)新user對象并把它保存在會話中，以便下一次請求能夠通過這個(gè)過濾器。這樣，在后續(xù)的請求通過過濾器的時(shí)候，不再需要在查詢框中提供用戶名和密碼，因?yàn)閡ser對象已經(jīng)在會話中。

2.2客戶端設(shè)計(jì)

客戶端用戶登陸過程由兩個(gè)部分組成。第一部分是可視化界面部分，第二部分是用戶登陸過程部分。如圖2所示。

2.2.1可視化界面設(shè)計(jì)

在表單中放入一個(gè)文本框、一個(gè)密碼字段以及一個(gè)用來將表單提交到服務(wù)器的提交按鈕。創(chuàng)建一個(gè)標(biāo)簽span，這樣當(dāng)用戶名或者密碼無效時(shí)，可以在其中顯示來自服務(wù)器的出錯(cuò)消息。通過將整個(gè)表單放在標(biāo)簽p和span中，對HTML實(shí)現(xiàn)了格式化，以便產(chǎn)生門戶的標(biāo)題。

2.2.2用戶登陸過程設(shè)計(jì)

登陸過程利用Ajax異步通信機(jī)制，允許客戶端只發(fā)送用戶名和密碼到服務(wù)器，這樣，客戶端無需提交整個(gè)頁面，從而減小了傳輸?shù)臄?shù)據(jù)量[4]

登陸過程需要執(zhí)行兩個(gè)操作:第一個(gè)操作收集信息，第二個(gè)操作是發(fā)送請求到服務(wù)器。

在操作收集過程中，用戶輸入用戶名、密碼字段，程序?qū)⒎旁谝粋€(gè)將會提交到服務(wù)器的字符串中。然后將這些值通過AjaxUpdater對象提交到服務(wù)器。

AjaxUpdater對象是本文實(shí)現(xiàn)Ajax異步通信的方法，它可以接受參數(shù)，包括目標(biāo)URL、請求成功時(shí)調(diào)用的函數(shù)、請求失敗時(shí)調(diào)用的函數(shù)、使用HTTP方法以及包含提交參數(shù)的字符串。

AjaxUpdadter對象將會等待服務(wù)器返回一個(gè)XML文檔，當(dāng)數(shù)據(jù)從服務(wù)器正確返回時(shí)，將調(diào)用MakeScrip()函數(shù)，MakeScrip()函數(shù)將利用從服務(wù)器端獲取的數(shù)據(jù)創(chuàng)建登陸后的窗口界面。

3門戶登陸系統(tǒng)實(shí)現(xiàn)效果

通過對服務(wù)器端和客戶端的設(shè)計(jì)和實(shí)現(xiàn)，用戶可以使用這個(gè)門戶登陸系統(tǒng)。如圖3所示，在輸入框中依次輸入姓名和密碼，點(diǎn)擊“登陸”按鈕，此時(shí)輸入框下“正在登陸”信息提示用戶客戶端發(fā)送客戶信息(而不是提交整個(gè)頁面)到服務(wù)器端。

如果服務(wù)器在數(shù)據(jù)庫中找到用戶信息，那么用戶登陸成功。此后，服務(wù)器在數(shù)據(jù)庫中尋找用戶的配置信息和用戶登陸的網(wǎng)站地址，返回給用戶端的回調(diào)函數(shù)?；卣{(diào)函數(shù)根據(jù)返回的信息創(chuàng)建三個(gè)子窗口裝載相關(guān)網(wǎng)站，作為登陸后的窗口界面。如圖4示。

4結(jié)束語