【導(dǎo)讀】教學(xué)單位計(jì)算機(jī)與信息科學(xué)學(xué)院。本科畢業(yè)論文（設(shè)計(jì)）。題目基于AJAX的電子相冊(cè)管理系統(tǒng)。專業(yè)名稱計(jì)算機(jī)科學(xué)與技術(shù)。享快樂時(shí)刻的心情也越來越迫切了，而一套基于AJAX的電子相冊(cè)管理系統(tǒng)正好。能給廣大用戶提供一個(gè)擁有良好用戶體驗(yàn)的管理平臺(tái)和分享自己相片的交流平。本系統(tǒng)充分利用了AJAX技術(shù)，能在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)，這。使得WEB應(yīng)用更為迅捷地回應(yīng)用戶動(dòng)作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變。鍵字自動(dòng)補(bǔ)全、相片瀏覽的無刷新切換、用戶評(píng)論的無刷新加載等具體應(yīng)用，這。本文詳細(xì)地?cái)⑹隽艘惶谆贐/S模型的電子相冊(cè)管理系統(tǒng)從需求分析到測(cè)。試與部署的整個(gè)開發(fā)過程。此系統(tǒng)采用了目前最流行的JAVA語言編碼，在架構(gòu)。設(shè)計(jì)上使用了STRUTS2框架對(duì)系統(tǒng)進(jìn)行MVC分層，將數(shù)據(jù)持久層和業(yè)務(wù)邏輯。層以及頁面表示層進(jìn)行了有效解耦，這種做法增強(qiáng)了系統(tǒng)的可擴(kuò)展性。

　　

【正文】 8） Context 匹配到 URL PATTERN 為 *.jsp 的 servlet，對(duì)應(yīng)于 JspServlet 類 。 （ 9） 構(gòu)造 HttpServletRequest 對(duì)象和 HttpServletResponse 對(duì)象，作為參數(shù)調(diào)用 JspServlet 的 doGet 或 doPost 方法 。 （ 10） Context 把執(zhí)行完了之后的 HttpServletResponse 對(duì)象返回給 Host。 （ 11） Host 把 HttpServletResponse 對(duì)象返回給 Engine。 （ 12） Engine 把 HttpServletResponse 對(duì)象返回給 Connector。 （ 13） Connector 把 HttpServletResponse 對(duì)象返回給客 戶 browser。 本章小結(jié) 在本章中主要介紹了軟件開發(fā)時(shí)所用的開發(fā)工具和相關(guān)的技術(shù)，重點(diǎn)介紹了Java、 J2EE 平臺(tái)和 MVC 結(jié)構(gòu)等相關(guān)知識(shí)以及 AJAX 技術(shù)在系統(tǒng)中的實(shí)際作用和Struts2 框架 的工作機(jī)制。同時(shí)也詳細(xì)介紹了 JSP 的相關(guān)技術(shù)，運(yùn)行環(huán)境及其開發(fā)工具。 16 第 3 章 AJAX技術(shù) 基本原理 及應(yīng)用 AJAX技術(shù)介紹 AJAX即 “Asynchronous JavaScript and XML”（異步 JavaScript和 XML)， AJAX并非縮寫詞，而是由 Jesse James Gaiiett 創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。 AJAX 開發(fā)與傳統(tǒng)的 CS 開發(fā)有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于 AJAX 依賴瀏覽器的 JavaScript 和 XML，瀏覽器的兼容性和支持的標(biāo)準(zhǔn)也變得和 JavaScript 的運(yùn)行時(shí)性能一樣重要了。綜合各種變化的技術(shù)和強(qiáng)耦合的客戶服務(wù)端環(huán)境， AJAX 提出了一種新的開發(fā)方式。 AJAX開發(fā)人員必須理解傳統(tǒng)的 MVC 架構(gòu)，這限制了應(yīng)用層次之間的邊界。同時(shí)，開發(fā)人員還需要考慮 CS 環(huán)境的外部和使用 AJAX 技術(shù)來重定型 MVC 邊界。 最重要的是， AJAX 開發(fā)人員必須禁止以頁面集合的方式來考慮 Web 應(yīng)用而需要將其認(rèn)為是單個(gè)頁面。一旦 UI 設(shè)計(jì)與服務(wù)架構(gòu)之間的范圍被嚴(yán)格區(qū)分開來后，開發(fā)人員就需要更新和變化的技術(shù)集合了。 AJAX 的最大機(jī)遇在于用戶體驗(yàn)。在使應(yīng)用更快響應(yīng)和創(chuàng)新的過程中，定義Web 應(yīng)用的規(guī)則正在被重寫 ； 因此開發(fā)人員必須更注重用戶?，F(xiàn)在用戶已經(jīng)逐漸習(xí)慣如何使用 Web 應(yīng)用了。例如用戶通常希望每一次按鈕點(diǎn)擊會(huì)導(dǎo)致幾秒的延遲和屏幕刷新，但 AJAX 正在打破這種長(zhǎng)時(shí)間的狀況。 在本 系統(tǒng)中有大量 AJAX 特效的應(yīng)用， 不用刷新整個(gè)頁面就可以改變局部 數(shù)據(jù)的顯示，這在大型應(yīng)用中是有很大應(yīng)用價(jià)值的，它不僅可以節(jié)約用戶等待刷新的時(shí)間還可以減輕服務(wù)器端發(fā)送大量重復(fù)數(shù)據(jù)的負(fù)擔(dān)。例如：注冊(cè)用戶名的檢測(cè)是 AJAX 技術(shù)自動(dòng)判斷并顯示用戶名是否可用，增加了注冊(cè)用戶的體驗(yàn)好感度；系統(tǒng)的搜索功能實(shí)現(xiàn)就是仿照 Google 搜索做的智能搜索提示，可以自動(dòng)補(bǔ)全用戶將要搜索的關(guān)鍵字，給用戶帶來了良好的使用體驗(yàn)。還有相片展示頁面，只用點(diǎn)擊當(dāng)前相片就可以切換到下一張，不用等待整個(gè)頁面的刷新。另外用戶評(píng)論、推薦次數(shù)的動(dòng)態(tài)加載都是 AJAX 技術(shù)在系統(tǒng)中的體現(xiàn)。 17 AJAX技術(shù) 相比傳統(tǒng)技術(shù) 的 優(yōu)點(diǎn) 傳統(tǒng)應(yīng)用的特點(diǎn) 在 AJAX 技術(shù)出現(xiàn)之前 ， 傳統(tǒng)的 Web 應(yīng)用允許用戶填寫表單 (Form)，當(dāng)提交表單時(shí)就向 Web 服務(wù)器發(fā)送一個(gè) 具體 的 應(yīng)用 請(qǐng)求。服務(wù)器接收并處理傳來的請(qǐng)求 ， 然后 返回一個(gè)新的網(wǎng)頁 給客戶端，用戶需要等待新頁面的刷新 加載 。這個(gè)做法浪費(fèi)了許多帶寬 和用戶的寶貴時(shí)間 ，因?yàn)樵?前后 兩個(gè)頁面中的大部分 HTML代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求，應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響應(yīng)時(shí)間 ， 這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多 ，從而 降低了用戶體驗(yàn) 。 AJAX 在應(yīng)用中 的優(yōu)點(diǎn) 隨著 AJAX 的出現(xiàn) ， 給傳統(tǒng)應(yīng)用 帶來了新的解決方案 ， AJAX 應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用 SOAP 或其它一些基于 XML 的 Web Service 接口，并在客戶端采用 JavaScript 處理來自服務(wù)器的響應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成，所以 Web 服務(wù)器的處理時(shí)間也減少了。 使用 AJAX 的最大優(yōu)點(diǎn)，就是能在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)。這使得 Web 應(yīng)用程序更為迅捷地回應(yīng)用戶動(dòng)作，并避免了在網(wǎng) 絡(luò)上發(fā)送那些沒有改變過的信息。 AJAX 不需要任何瀏覽器插件，但需要用戶允許 JavaScript 在瀏覽器上執(zhí)行。就像 DHTML 應(yīng)用程序那樣， AJAX 應(yīng)用程序必須在眾多不同的瀏覽器和平臺(tái)上經(jīng)過嚴(yán)格的測(cè)試。隨著 AJAX 的成熟，一些簡(jiǎn)化 AJAX 使用方法的程序庫(kù)也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持 JavaScript的用戶提供替代功能。 開發(fā) AJAX應(yīng)用面臨的問題及解決方案 對(duì)程序員而言，開發(fā) AJAX 應(yīng)用最頭痛的問題莫過于以下幾點(diǎn)： （ 1） AJAX 在本質(zhì)上是一個(gè)瀏覽器端的技術(shù)，首 先面臨無可避免的第一個(gè)問題即是瀏覽器的兼容性問題。各家瀏覽器對(duì)于 JavaScript／ DOM／ CSS 的支持 18 總有部分不太相同或是有 Bug，甚至同一瀏覽器的各個(gè)版本間對(duì)于 JavaScript／DOM／ CSS 的支持也有可能部分不一樣。這導(dǎo)致程序員在寫 AJAX 應(yīng)用時(shí)花大部分的時(shí)間在調(diào)試瀏覽器的兼容性而非在應(yīng)用程序本身。因此，目前大部分的AJAX 鏈接庫(kù)或開發(fā)框架大多以 js 鏈接庫(kù)的形式存在，以定義更高階的 JavaScript API 、 JavaScript 對(duì)象（模板）、或者 JavaScript Widgets 來解決此問 題。如。 （ 2） AJAX 技術(shù)之主要目的在于局部交換客戶端及服務(wù)器之間的數(shù)據(jù)。如同傳統(tǒng)之主從架構(gòu)，無可避免的會(huì)有部分的業(yè)務(wù)邏輯會(huì)實(shí)現(xiàn)在客戶端，或部分在客戶端部分在服務(wù)器。由于業(yè)務(wù)邏輯可能分散在客戶端及服務(wù)器，且以不同之程序語言實(shí)現(xiàn)，這導(dǎo)致 AJAX 應(yīng)用程序極難維護(hù)。如有用戶接口或業(yè)務(wù)邏輯之更動(dòng)需求，再加上前一個(gè) JavaScript/DOM/CSS 之兼容性問題， AJAX 應(yīng)用往往變成程序員的夢(mèng)魘。針對(duì)業(yè)務(wù)邏輯分散的問題， AJAX 開發(fā)框架大致可分為兩類： （ 3）將業(yè)務(wù)邏輯及表現(xiàn)層放在瀏覽器，數(shù) 據(jù)層放在服務(wù)器。因?yàn)樗械某绦蛞?JavaScript 執(zhí)行在客戶端，只有需要數(shù)據(jù)時(shí)才向服務(wù)器要求服務(wù)，此法又稱為胖客戶端（ fat client）架構(gòu)。服務(wù)器在此架構(gòu)下通常僅用于提供及儲(chǔ)存數(shù)據(jù)。此法的好處在于程序員可以充分利用 JavaScript 搭配業(yè)務(wù)邏輯來做出特殊的用戶接口，以符合終端用戶的要求。但是問題也不少，主因在第一， JavaScript 語言本身之能力可能不足以處理復(fù)雜的業(yè)務(wù)邏輯。第二， JavaScript 的執(zhí)行效能一向不好。第三， JavaScript 訪問服務(wù)器數(shù)據(jù)，仍需適當(dāng)?shù)姆?wù)器端程序之配合。第四 ，瀏覽器兼容性的問題又出現(xiàn)。有些 AJAX 開發(fā)框架如 DWR 企圖以自動(dòng)生成JavaScript 之方式來避免兼容的問題，并開立通道使得 JavaScript 可以直接調(diào)用服務(wù)器端的 Java 程序來簡(jiǎn)化數(shù)據(jù)的訪問。但是前述第一及第二兩個(gè)問題仍然存在，程序員必須費(fèi)相當(dāng)?shù)牧獠拍苓_(dá)到應(yīng)用程序之規(guī)格要求，或可能根本無法達(dá)到要求。 （ 4）將表現(xiàn)層、業(yè)務(wù)邏輯、及數(shù)據(jù)層放在服務(wù)器，瀏覽器僅有用戶接口引擎（ User Interface Engine）；此法又稱為瘦客戶端（ Thin Client）架構(gòu)，或中心服務(wù)器（ ServerCentric）架構(gòu)。瀏覽器的用戶接口引擎僅用于反映服務(wù)器的表現(xiàn)層以及傳達(dá)用戶的輸入回到服務(wù)器的表現(xiàn)層。由瀏覽器所觸發(fā)之事件亦送回服務(wù)器處理，根據(jù)業(yè)務(wù)邏輯來更新表現(xiàn)層，然后反映回瀏覽器。因?yàn)樗袘?yīng)用程序完 19 全在服務(wù)器執(zhí)行，數(shù)據(jù)及表現(xiàn)層皆可直接訪問，程序員只需使用服務(wù)器端相對(duì)較成熟之程序語言（如 Java 語言）即可，不需再學(xué)習(xí) JavaScript/DOM/CSS，在開發(fā)應(yīng)用程序時(shí)相對(duì)容易。缺點(diǎn)在于用戶接口引擎以及表現(xiàn)層通常以標(biāo)準(zhǔn)組件的形式存在，如需要特殊組件（用戶接口）時(shí)，往往須待原框架之開發(fā)者提供，緩不濟(jì)急。如開源碼 AJAX 開發(fā)框架 ZK 目前支持 XUL 及 XHTML 組件，尚無 XAML之支持。 （ 5） AJAX 是以異步的方式向服務(wù)器提交需求。對(duì)服務(wù)器而言，其與傳統(tǒng)的提交窗體需求并無不同，而且由于是以異步之方式提交，如果同時(shí)有多個(gè)AJAX 需求及窗體提交需求，將無法保證哪一個(gè)需求先獲得服務(wù)器的響應(yīng)。這會(huì)造成應(yīng)用程序典型的多進(jìn)程（ Process）或多線程（ Thread）的競(jìng)爭(zhēng)（ Racing）問題。程序員因此必須自行處理或在 JavaScript 里面動(dòng)手腳以避免這類競(jìng)爭(zhēng)問題的發(fā)生（如 AJAX 需求未響應(yīng)之前，先 Disable 送出按鈕），這 又不必要的增加了程序員的負(fù)擔(dān)。目前已知有自動(dòng)處理此問題之開發(fā)框架似乎只有 ZK。 AJAX技術(shù) 在本系統(tǒng)中的應(yīng)用 由于篇幅有限， 本節(jié)選取了系統(tǒng)中的一些典型 AJAX 應(yīng)用，從 它們的 實(shí)現(xiàn)原理以及與傳統(tǒng)應(yīng)用的不同點(diǎn)進(jìn)行多角度的 分析 ， 目的就是為了 讓讀者感受到AJAX 技術(shù)的 巨大的魅力所在。 注冊(cè)用戶名 的檢測(cè) 在一個(gè)傳統(tǒng)的 Web 應(yīng)用中，用戶注冊(cè)時(shí)僅僅就在客戶端用 JavaScript 做一些表單字段的長(zhǎng)度或者格式之類的驗(yàn)證。 但是對(duì)于用戶注冊(cè)名的驗(yàn)證這是不夠的，應(yīng)為注冊(cè)名應(yīng)該是 Web 應(yīng)用 中來 區(qū)別用戶的 標(biāo)識(shí)符 ，所 以 它 是不能重復(fù)的 ,而這種 驗(yàn)證涉及到 后臺(tái)數(shù)據(jù)庫(kù)的查詢，所以前臺(tái)的 JavaScript 是無能為力的 ，所以傳統(tǒng) Web 應(yīng)用一般不做用戶名是否存在的驗(yàn)證就提交。 本系統(tǒng)中在注冊(cè)表單的用戶名字段屬性上設(shè)置了失去焦點(diǎn)時(shí)候驗(yàn)證用戶名是否存在，因此當(dāng)用戶名輸入框失去焦點(diǎn)時(shí)客戶端就開始發(fā)起一個(gè)異步請(qǐng)求到后臺(tái)服務(wù)器去驗(yàn)證用戶名是否已經(jīng)存在，然后返回 用戶名是否可以注冊(cè)的 提示給用戶。 用 AJAX 技術(shù)對(duì)用戶名進(jìn)行檢測(cè)時(shí)，不需要用戶 花時(shí)間 去 提交 操作 和刻意的 20 等待用戶名檢測(cè) ， 此過程 不影響用戶填寫 注冊(cè) 表單， 這 與傳統(tǒng)注冊(cè)方式相比避免了 因?yàn)?用戶名 重復(fù) 時(shí) 導(dǎo)致用戶的不斷注冊(cè)行為和等待刷新頁面 浪費(fèi)的時(shí)間 ，有效增強(qiáng)了用戶的使用體驗(yàn)。 相片的切換瀏覽 在 Web 應(yīng)用中，傳統(tǒng)的圖片瀏覽方式是用戶點(diǎn)擊一個(gè)圖片的鏈接后，頁面發(fā)起一個(gè)請(qǐng)求 ，到服務(wù)器 查詢出圖片的相關(guān)信息，然后展示在前臺(tái)頁面。 當(dāng)用戶要繼續(xù)瀏覽下一張圖片時(shí)候，點(diǎn)擊 “ 下一張 “ 的 按鈕 ， 然后應(yīng)用重復(fù)上面的過程一次。 本系統(tǒng)中，相片切換的方式使用了 AJAX 技術(shù)， 實(shí)現(xiàn)的效果是 :用戶 點(diǎn)擊 當(dāng)前瀏覽的 相片 后， 客戶端 就發(fā)起一次異步請(qǐng)求，到后臺(tái)服務(wù)器查詢出當(dāng)前瀏覽的相冊(cè)中下一張 相片 ，然后把 相片 信息返回給 客戶端 ，前 臺(tái)客戶端接收到回饋后就執(zhí)行 JavaScript 定義好 的回調(diào)函數(shù)， 然后回調(diào)函數(shù)就會(huì)對(duì)頁面中的 DOM 操作，改變相片顯示字段的信息，這樣 就切換 到了 下一張相片來，整個(gè)過程并不刷 新 頁面 。 當(dāng)用戶瀏覽到相冊(cè)中的最后一張相片 后 ，就彈出一個(gè)提示框，并不進(jìn)行 當(dāng)前展示 相片的 切換 動(dòng)作。 這樣 的實(shí)現(xiàn)方式可以避免每次切換相片都刷新頁面，然后去后臺(tái)查詢一些每次都會(huì)重復(fù)的前臺(tái)顯示信息，從而能夠降低服后臺(tái)務(wù)器的負(fù)擔(dān)和讓 用戶 感覺 等待的 時(shí)間 也減少了，提高了用戶體驗(yàn) 。 用戶評(píng)論的動(dòng)態(tài)加載 在 AJAX 技術(shù)還沒有開始大面積開始應(yīng)用時(shí)，互聯(lián) 網(wǎng)中 WEB 頁面上評(píng)論加載方式一般都是用戶發(fā)表評(píng)論后，前臺(tái)彈出一個(gè)評(píng)論發(fā)表成功的提示框就完了，頁面并不裝載此用戶剛剛發(fā)表的評(píng)論，而是等下一次有人訪問這個(gè)列表頁面時(shí)候才從數(shù)據(jù)庫(kù)中查詢出那個(gè)評(píng)論。這樣做有一個(gè)很大的弊端就是，有的用戶并不了解 Web 應(yīng)用的整個(gè)響應(yīng)流程，在他們看來評(píng)論列表上沒有自己剛剛發(fā)表的評(píng)論就以為剛才評(píng)論沒有發(fā)表成功，然后就很有可能再重發(fā)一次，這樣既浪費(fèi)了用戶的時(shí)間也浪費(fèi)了有限的服務(wù)器資源 。 傳統(tǒng)的評(píng)論動(dòng)態(tài)加載方式還有一種就是當(dāng)用戶發(fā)表了評(píng)論后就發(fā)起一次客戶端請(qǐng)求，然后從數(shù)據(jù)庫(kù)查詢一次評(píng)論列表和當(dāng)前的頁面上的其他信息，然后刷新一次重新顯示整個(gè)頁面，這樣做無疑會(huì)讓服務(wù)器 21 處理一些無用的重復(fù)查詢，而且也浪費(fèi)了用戶每次等待刷新的寶貴時(shí)間。 本系統(tǒng)中用 AJAX 技術(shù)實(shí)現(xiàn)評(píng)論的動(dòng)態(tài)加載，實(shí)現(xiàn)的效果是 :用戶發(fā)表評(píng)論后，客戶端會(huì)發(fā)起一個(gè) 后臺(tái)的 異步請(qǐng)求， 到 服務(wù)器查詢出剛才 該 用戶發(fā)表的評(píng)論，然后把結(jié)果返回給客戶端，然后客戶端會(huì)調(diào)用 JavaScript 回調(diào)函數(shù) 操作頁面上的DOM，把評(píng)論信息插入列表的最上面。 這里使用 AJAX 傳遞的評(píng)論信息并不是簡(jiǎn)單的文本信息，因?yàn)?用戶 評(píng)論列表項(xiàng)包含 的不僅僅是評(píng)論的內(nèi)容，還有評(píng)論發(fā)表的時(shí)間，發(fā) 表的用戶信息，所以簡(jiǎn)單的線性文本在評(píng)論項(xiàng)的傳輸與解析上十分不方便。但是 本系統(tǒng)中 也沒有使用AJAX(Asyn