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

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

1Ajax技術(shù)簡(jiǎn)介

1.1Ajax基本組成

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

1.2異步通信工作原理

與傳統(tǒng)的Web應(yīng)用不同，Ajax技術(shù)使用XMLHttpRequest對(duì)象提供與服務(wù)器異步通信的能力。當(dāng)客戶端的用戶操作觸發(fā)XMLHttpRequest對(duì)象后，客戶端向服務(wù)器發(fā)送一個(gè)異步請(qǐng)求。方法非常迅速地返回，只會(huì)將客戶端用戶界面阻塞很短的時(shí)間。如果服務(wù)器端處理好客戶端請(qǐng)求，向客戶端發(fā)送響應(yīng)數(shù)據(jù)?？蛻舳送ㄟ^(guò)一個(gè)回調(diào)函數(shù)解析來(lái)自服務(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展示了登陸過(guò)濾器的設(shè)計(jì)流程。

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

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

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

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

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

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

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

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

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

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

AjaxUpdadter對(duì)象將會(huì)等待服務(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)效果

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

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

4結(jié)束語(yǔ)