1、<p><b>　　摘 要</b></p><p>　　隨著計算機和數(shù)碼設(shè)備的普及，數(shù)字圖片資源已成為我們?nèi)粘Ｉ钪械囊粋€重要部分，對于日益增多的圖片資源，如何更好的存儲和有效檢索已成為人們面臨的一個新的課題，于是電子相冊應(yīng)運而生。該系統(tǒng)和一般的數(shù)字相冊系統(tǒng)相比，更具有一定的智能性。例如：當(dāng)用戶需要某幅相片時，可以通過簡單的人機交互，或者根據(jù)用戶的使用記錄，自動推薦出用戶可能需要

2、的圖像。</p><p>　　本文介紹基于.NET平臺開發(fā)的基于B/S模式的智能數(shù)字相冊的具體實現(xiàn)。系統(tǒng)的主要開發(fā)語言為C#，應(yīng)用了XML、Ajax等技術(shù)，結(jié)合了目錄管理與SQL Server數(shù)據(jù)庫管理。同時采用基于文件方式的圖像存儲，即圖像文件以文件形式存放于指定的計算機目錄下，在數(shù)據(jù)庫表中只反映圖像數(shù)據(jù)文件的存儲路徑及各種屬性，這種存儲方式縮小了數(shù)據(jù)庫的容量，對圖像的操作和使用都十分方便。對于數(shù)字相片的錄入，

3、檢索等功能的實現(xiàn)，系統(tǒng)采用了當(dāng)今流行的Ajax技術(shù)，其改變了傳統(tǒng)的客戶端與服務(wù)器端交互的方式，使得用戶無需等待數(shù)據(jù)刷新，即可執(zhí)行其他的操作，所有的數(shù)據(jù)處理都在后臺進行，提高了用戶體驗。</p><p>　　系統(tǒng)的主要功能包括：用戶登錄與用戶管理、圖像的導(dǎo)入和顯示，根據(jù)關(guān)鍵字檢索圖像，根據(jù)圖像的分類瀏覽相冊及改變相冊的風(fēng)格。</p><p>　　關(guān)鍵詞： Ajax； .NET； 電子相冊&l

4、t;/p><p><b>　　Abstract</b></p><p>　　With the popularity of computers and numeral devices, the resources of digital photos have become important parts of our daily life. As for the growi

5、ng number of images, how to keep and retrieval them effectively is the facing problem. As a result, e-album came into being. Compared with other e-albums, this new system attend to be more intellect. For example, if you

6、 want to find out one picture from the album, you could choose to contact with your computer. Also, you could wait the system to re</p><p>　　This paper will introduce you the intelligent e-album, which is de

7、veloped with B/S model and is based on .NET platform .The e-album is developed in C# language, applied with XML and Ajax technology, combined with the management of catalogue and SQL Server. Pictures in the e-album are s

8、toraged based on files, that is pictures are storaged at the given catalogue as files not images. At the same time, only the storage location and attributes of pictures are written in the database, which makes the </p

9、><p>　　The e-album includes the login and management of users, the import and display of images, searching images according to some key words. Looking though pictures of diffirent catalogy is also included.<

10、/p><p>　　Key words: Ajax; .NET; E-album</p><p><b>　　目 錄</b></p><p><b>　　1 緒論1</b></p><p>　　1.1 研究的意義及目的1</p><p>　　1.2 國內(nèi)外文獻綜述

11、1</p><p>　　1.3 研究內(nèi)容1</p><p><b>　　2 相關(guān)技術(shù)2</b></p><p>　　2.1 Ajax技術(shù)概述2</p><p>　　2.1.1 Ajax技術(shù)的含義2</p><p>　　2.1.2 Ajax技術(shù)的特點2</p>&l

12、t;p>　　2.1.3 Ajax開發(fā)的關(guān)鍵技術(shù)2</p><p>　　2.2 .NET Framework4</p><p>　　2.2.1 .NET框架結(jié)構(gòu)4</p><p>　　2.2.2 ASP.NET技術(shù)4</p><p>　　2.2.3 ASP.NET命名空間5</p><p>　　

13、2.2.4 ADO.NET技術(shù)6</p><p>　　2.3 本章小結(jié)8</p><p>　　3 智能數(shù)字相冊系統(tǒng)的設(shè)計9</p><p>　　3.1 總的設(shè)計目標(biāo)9</p><p>　　3.2 需要解決的重點問題9</p><p>　　3.3 系統(tǒng)數(shù)據(jù)結(jié)構(gòu)的設(shè)計10</p>&l

14、t;p>　　3.4 系統(tǒng)功能設(shè)計10</p><p>　　3.4.1 圖片管理11</p><p>　　3.4.2 圖片檢索12</p><p>　　3.4.3 圖片瀏覽16</p><p>　　3.5 本章小結(jié)19</p><p>　　4系統(tǒng)實現(xiàn)與測試20</p><

15、p>　　4.1 系統(tǒng)開發(fā)環(huán)境與工具20</p><p>　　4.1.1 Visual Studio 200820</p><p>　　4.1.2 SQL Server 200521</p><p>　　4.2 系統(tǒng)運行環(huán)境21</p><p>　　4.3 實驗結(jié)果22</p><p>　　4.

16、3.1 用戶登錄22</p><p>　　4.3.2 用戶注冊22</p><p>　　4.3.3 更改用戶信息23</p><p>　　4.3.4 瀏覽相片24</p><p>　　4.3.5檢索相片24</p><p>　　4.3.6 上傳相片26</p><p>　

17、　4.4 本章小結(jié)26</p><p><b>　　5 結(jié)論27</b></p><p>　　5.1 總結(jié)27</p><p>　　5.2 展望27</p><p><b>　　參考文獻28</b></p><p><b>　　致 謝29<

18、/b></p><p><b>　　1 緒論</b></p><p>　　1.1 研究的意義及目的</p><p>　　隨著人們生活水平的逐步提高，旅游成了大家必不可少的放松方式，每當(dāng)筆者走到一個美麗的景點，就會忍不住拿起數(shù)碼相機照上幾張留做回憶。雖然照片最后會存入到自己的電腦里，但是時間一長、照片一多，這些有著勾起回憶的資料，就會顯

19、得雜亂無章，即不方便欣賞，也不方便管理。而電子相冊具有欣賞、傳播方便，界面美觀等特點，可以很好的管理所存入的照片，不失為欣賞、保存照片的最佳工具。</p><p>　　1.2 國內(nèi)外文獻綜述</p><p>　　智能數(shù)字相冊是一種應(yīng)用性較強的圖像管理軟件，也是時下最流行的一種網(wǎng)絡(luò)元素，它可以應(yīng)該在很多的領(lǐng)域，例如時下最流行的空間及博客就應(yīng)用到了這一技術(shù)，而且受到大多數(shù)網(wǎng)友的認可和追捧。其

20、以靜態(tài)照片為素材(獲得源方式為掃描儀掃描、數(shù)碼相機拍攝等)，配合動感的背景、前景和字幕等視頻處理的特殊效果，配上音樂就可制作成電子相冊。</p><p>　　制作好的電子相冊可以在電腦上，各類影碟機上，以及手機和MP4里觀看，這是數(shù)字相冊技術(shù)發(fā)展到今天的一個新的突破，即不再像傳統(tǒng)那樣，只能在電腦上或在影碟機上觀看了。并且還可以通過手機將自己的個性化MTV發(fā)送給遠方的親朋好友們分享。當(dāng)然，如果考慮到長期保存的話，制

21、作成電子相冊光盤那是最好的選擇，它可保存100多年之久，標(biāo)準(zhǔn)VCD、SVCD、DVD格式，兼容性好，通過影碟機即可與家人、朋友、客戶觀賞，若保存在硬盤上，也便于隨時調(diào)閱、欣賞，永久保存。</p><p><b>　　1.3 研究內(nèi)容</b></p><p>　　該系統(tǒng)比一般的數(shù)字相冊系統(tǒng)而言，更具有一定的智能性，例如：當(dāng)用戶需要某幅相片時，可以通過簡單的人機交互，或

22、者根據(jù)用戶使用記錄，自動推薦出用戶可能需要的圖像。該智能數(shù)字相冊系統(tǒng)是一種基于B/S架構(gòu)的系統(tǒng)，它采用ASP.NET開發(fā)，采用Ajax技術(shù)縮短了網(wǎng)絡(luò)的延遲，節(jié)約了用戶的時間。</p><p>　　本系統(tǒng)所研究的是從數(shù)字相冊的管理到相冊的生成等一系列的問題，大致分為：</p><p>　　圖像的導(dǎo)入和顯示、數(shù)據(jù)庫索引的建立、根據(jù)關(guān)鍵字檢索圖像、圖像的分類等。</p><p

23、><b>　　2 相關(guān)技術(shù)</b></p><p>　　2.1 Ajax技術(shù)概述</p><p>　　2.1.1 Ajax技術(shù)的含義</p><p>　　Ajax 技術(shù)是Asynchronous JavaScript And XML（異步 JavaScript和 XML）的英文縮寫，它不是一種單獨的技術(shù)，而是一種融合了多項現(xiàn)有的成熟

24、的技術(shù)集合。這種技術(shù)集合發(fā)揮了其中每一種技術(shù)的獨特之處，糅合起來便形成了一種功能強大的新技術(shù)[1]。Ajax使用通信技術(shù)發(fā)送和接收對服務(wù)器的異步請求/響應(yīng)，然后利用顯示技術(shù)處理響應(yīng)。Ajax技術(shù)主要是一種客戶端技術(shù)，是一種以瀏覽器為中心的開發(fā)框架，是一種新的Web體系結(jié)構(gòu)，是Web 2.0的核心技術(shù)[2]。Ajax的工作原理相當(dāng)于在客戶和服務(wù)器之間加了—個中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負擔(dān)的工作轉(zhuǎn)嫁到客戶端

25、，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負擔(dān)。</p><p>　　2.1.2 Ajax技術(shù)的特點</p><p>　　Ajax技術(shù)的核心理念在于使用XMLHttpRequest對象發(fā)送異步請求。它使XHTML和 CSS實現(xiàn)基于各種標(biāo)準(zhǔn)的頁面呈現(xiàn)，使用文檔對象模型(Document Object Model)實現(xiàn)動態(tài)顯示和交互，使用XML和XSLT操作數(shù)據(jù)和實現(xiàn)數(shù)據(jù)交換，使用

26、XMLHttpRequest實現(xiàn)異步數(shù)據(jù)檢索和讀取，最后使用JavaScript將所有數(shù)據(jù)進行綁定和處理。與傳統(tǒng)Web頁面需刷新的“瘦客戶端”不同，Ajax提供的是無需完全刷新頁面、近乎桌面應(yīng)用、豐富多彩的“富客戶端”用戶體驗。</p><p>　　2.1.3 Ajax開發(fā)的關(guān)鍵技術(shù)</p><p>　　Ajax技術(shù)實際上是由JavaScript、XHTML、CSS、DOM模型、XML、

27、XSLT和XMLHttpRequest對象等七種不同技術(shù)組成的一種技術(shù)集合和綜合應(yīng)用。Ajax技術(shù)開發(fā)者可以使用XHTML和CSS實現(xiàn)數(shù)據(jù)信息的統(tǒng)一化、標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM模型實現(xiàn)瀏覽器端豐富的動態(tài)顯示效果以及與服務(wù)器端的交互，使用XML和XSLT進行瀏覽器端和服務(wù)器端的數(shù)據(jù)信息交換與處理[3]，使用 XMLHttpRequest對象進行瀏覽器端和服務(wù)器端的異步數(shù)據(jù)讀取，使用JavaScript實現(xiàn)對所有數(shù)據(jù)進行整合。XMLHttpR

28、equest對象和JavaScript是實現(xiàn)Ajax應(yīng)用必不可少的核心技術(shù)，其它五項技術(shù)在每一個Ajax應(yīng)用中不一定都會用到，主要依據(jù)開發(fā)的實際需要而定。</p><p>　　下面介紹本系統(tǒng)中應(yīng)用到的Ajax開發(fā)的關(guān)鍵技術(shù)：JavaScript，XMLHttpRequest對象以及CSS層疊樣式表。</p><p>　　JavaScript是一種基于對象(object)和事件驅(qū)動(Even

29、t Driven)并具有安全性能的、可以與HTML標(biāo)記語言混合使用的解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶端，由瀏覽器解釋執(zhí)行，用它編寫的程序可以在瀏覽器的支持下實現(xiàn)跨平臺運行[4]。</p><p>　　JavaScript在編程風(fēng)格上主要具有如下特征：</p><p>　　(1) 引入for和if等控制語句使程序效率化；</p

30、><p>　　(2) 目標(biāo)模塊(Document、Math、Date和文字列模塊等)的導(dǎo)入使程序模塊化；</p><p>　　(3) 網(wǎng)頁、Frame和Window的管理增強了網(wǎng)頁設(shè)計的技巧；</p><p>　　(4) OnClick、OnChange等事件處理的實現(xiàn)使網(wǎng)頁可以在客戶端作動態(tài)響應(yīng)；</p><p>　　(5) Timer處理的實

31、現(xiàn)可以實現(xiàn)動態(tài)網(wǎng)頁；</p><p>　　(6) 對客戶端數(shù)據(jù)輸入輸出對話框的實現(xiàn)；</p><p>　　(7) Image目標(biāo)模塊對應(yīng)的圖像動態(tài)操作。</p><p>　　在Ajax中，JavaScript已經(jīng)從默默無聞的后臺狀態(tài)完全轉(zhuǎn)移到了前臺，發(fā)揮著巨大的作用。JavaScript是整個Ajax的核心部分，它使開發(fā)人員能夠運用編程語言來控制瀏覽器客戶端的行為。

32、事實上Ajax的其它組成部分都提供了JavaScript的編程接口，例如，DOM模型將文檔結(jié)點表現(xiàn)為對象，并定義了這些對象具有的方法和屬性；CSS也可以作為節(jié)點的一個屬性由JavaScript進行控制。JavaScript腳本充分發(fā)揮了其腳本語言的特點，使用代碼控制著DOM模型、XML、CSS和XHTML等技術(shù)的行為，因此可以將JavaScript看作是Ajax中的黏合劑，它使Ajax的各個組成部分協(xié)同工作，一起完成需要實現(xiàn)的功能。&l

33、t;/p><p>　　XMLHttpRequest對象是瀏覽器中已定義好的對象,它是Ajax技術(shù)的核心組成部分，JavaScript通過它和服務(wù)器之間進行異步通信，并通過它來解析從服務(wù)器返回的XML文件。</p><p>　　Ajax應(yīng)用的特點之一就是可以通過XMLHttpRequest對象發(fā)送請求向服務(wù)器傳輸或者讀寫數(shù)據(jù)，可以像桌面應(yīng)用程序一樣，只同服務(wù)器進行數(shù)據(jù)層面的交換，而無需刷新頁面，

34、也不用每次都將數(shù)據(jù)處理的工作提交給服務(wù)器來做。這樣既減輕了服務(wù)器的負擔(dān)又加快了響應(yīng)速度、縮短了用戶等待時間。</p><p>　　需要注意的是，在定義XMLHttpRequest對象時，IE瀏覽器和其它瀏覽器的定義方式有所不同。</p><p>　　XMLHttpRequest對象是通信的基礎(chǔ)。是Ajax技術(shù)開發(fā)的關(guān)鍵，它能夠提供異步通信來完成在很多傳統(tǒng)Web開發(fā)中無法完成的工作。XMLH

35、ttpRequest對象由JavaScript創(chuàng)建并使用，客戶端可以從服務(wù)器端獲取需要的信息，通過與DOM和CSS的結(jié)合，實現(xiàn)局部刷新；同時還可以通過XMLHttpRequest對象異步提交信息，將輸入的數(shù)據(jù)在后臺提交到服務(wù)器而無需刷新。</p><p>　　CSS層疊樣式表是為了彌補HTML超文本標(biāo)記語言在格式修飾中的不足，同時也是為了能夠?qū)崿F(xiàn)頁面格式的批量動態(tài)更新[5]。為了進一步豐富頁面的動態(tài)效果，通過使用

36、腳本語言與CSS結(jié)合，動態(tài)控制頁面元素的位置、色彩等屬性。</p><p>　　CSS提供了獨立的手段來控制頁面的表現(xiàn)[6]，因此可以讓Ajax開發(fā)人員更專注于開發(fā)應(yīng)用邏輯的相關(guān)代碼，他們只需提供合理的文檔結(jié)構(gòu)即可，而不必關(guān)注表現(xiàn)，這在一定程度上簡化了Ajax的開發(fā)。同時，CSS還有助于結(jié)合Ajax完成一些特殊的功能，例如，要實現(xiàn)樹狀菜單的折疊功能，一種方法是使用DOM模型在展開時添加所有子結(jié)點，折疊時移除所有子

37、結(jié)點。但這顯然是效率低的做法，使用CSS可以讓其變得非常簡單，只要通過CSS設(shè)置子結(jié)點是否顯示即可。</p><p>　　2.2 .NET Framework</p><p>　　微軟公司將.NET Framework(框架)定義為：支持生成和運行下一代應(yīng)用程序和XML Web Services的內(nèi)部Windows組件[7]。.NET框架旨在實現(xiàn)下列目標(biāo)：提供一個統(tǒng)一的面向?qū)ο蟮拈_發(fā)環(huán)境

38、。這個開發(fā)環(huán)境支持本地代碼的開發(fā)，遠程對象程序的開發(fā)，或者在本地執(zhí)行但分布在Internet上的各種應(yīng)用程序的開發(fā)；更好的解決開發(fā)應(yīng)用的版本和部署版本之間的沖突；通過框架的解決方案，可以調(diào)用未知的或第三方的代碼，實現(xiàn)已有系統(tǒng)的移植以及代碼的可重復(fù)使用；使開發(fā)人員在開發(fā)各種不同類型應(yīng)用的時候，有一樣的開發(fā)體驗，如基于Windows的應(yīng)用程序和基于Web的應(yīng)用程序；按照行業(yè)標(biāo)準(zhǔn)生成所有通信，以保證基于.NET Framework的代碼可與任

39、何其他代碼集成。</p><p>　　2.2.1 .NET框架結(jié)構(gòu)</p><p>　　.NET Framework主要由兩個重要的組件構(gòu)成：公共語言運行庫CLR和.NET類庫。</p><p>　　公共語言運行庫是.NET框架的基礎(chǔ)?？梢詫⑦\行庫看做是一個在執(zhí)行時管理代碼的代理，它提供內(nèi)存管理、線程管理和遠程處理等核心服務(wù)，并且強制實施嚴(yán)格的類型安全，可提高安全

40、性和可靠性的其他形式的代碼準(zhǔn)確性。以運行庫為目標(biāo)的代碼稱為托管代碼，而不以運行庫為目標(biāo)的代碼稱為非托管代碼[8]。</p><p>　　.NET框架的另一個主要組件是類庫，它是一個綜合性的面向?qū)ο蟮目芍赜妙愋图?，可以使用它開發(fā)多種應(yīng)用程序，這些應(yīng)用程序包括傳統(tǒng)的命令行或圖形用戶界面應(yīng)用程序，也包括基于ASP.NET所提供的應(yīng)用程序，如Web窗體和XML Web Services。</p><

41、p>　　2.2.2 ASP.NET技術(shù)</p><p>　　ASP.NET 技術(shù)是.NET框架提供的一個統(tǒng)一Web開發(fā)模型，它使用盡可能少的代碼生成企業(yè)級Web應(yīng)用程序所必須的各種服務(wù)。ASP.NET是.NET框架中的一個重要組成部分。當(dāng)編寫ASP.NET應(yīng)用程序的代碼時，可以訪問.NET Framework中的類，也可以使用公共語言運行庫(CLR)兼容的任何語言來編寫應(yīng)用程序的代碼。</p>

42、<p>　　可以使用ASP.NET網(wǎng)頁作為Web應(yīng)用程序的用戶界面及后臺邏輯部分。ASP.NET網(wǎng)頁在任何時候瀏覽器或者客戶端設(shè)備中向用戶提供信息，并使用服務(wù)器端代碼來實現(xiàn)應(yīng)用程序邏輯。ASP.NET有下列特點[9]：</p><p>　　(1) 基于Microsoft ASP.NET技術(shù)。在該技術(shù)中，服務(wù)器上運行的代碼動態(tài)的生成到瀏覽器或客戶端設(shè)備的網(wǎng)頁輸出；</p><p&g

43、t;　　(2) 兼容所有瀏覽器或移動設(shè)備。ASP.NET網(wǎng)頁自動為樣式、布局等功能呈現(xiàn)正確的、符合瀏覽器的HTML。此外，還可以將ASP.NET網(wǎng)頁設(shè)計為在特定瀏覽器（如IE7.0）上運行并利用瀏覽器特定的功能；</p><p>　　(3) 兼容.NET公共語言運行庫所支持的任何語言，其中包括Microsoft Visual Basic、Microsoft Visual C#、Microsoft J#和Micro

44、soft Jscript .NET；</p><p>　　(4) 基于Microsoft .NET Framework平臺，它提供了Framework的所有優(yōu)點，包括托管環(huán)境、類型安全性和繼承；</p><p>　　(5) 具有靈活性，可以在開發(fā)的時候向頁面添加用戶創(chuàng)建的控件和第三方控件。</p><p>　　在ASP.NET網(wǎng)頁中，用戶界面編程分為兩個部分：可視組

45、件和邏輯。可視組件由一個包含靜態(tài)標(biāo)記（如HTML或 ASP.NET服務(wù)器控件或兩者）的文件組成。ASP.NET可視組件用來顯示網(wǎng)頁中的靜態(tài)文本和控件。ASP.NET網(wǎng)頁的邏輯由代碼組成，這些代碼與頁面可視組件進行交互。代碼可以駐留在頁的標(biāo)記腳本塊或者單獨的類中。如果代碼在單獨的類文件中，則該文件稱為“代碼隱藏”文件。代碼隱藏文件中的代碼可以使用Visual Basic、Visual C#、Visual J# 或 Jscript .NET

46、編寫。</p><p>　　在ASP.NET中，改變了ASP的腳本編程的概念，在Web 應(yīng)用的開發(fā)中引入的對象化的概念，使得WebForm的開發(fā)更接近于WinForm的開發(fā)，同時ASP.NET中還提供大量的服務(wù)端控件。各種控件的使用大大的簡化及規(guī)范了各種功能的實現(xiàn)，使得開發(fā)人員得以從腳本的編寫中擺脫出來，去完善Web頁面的業(yè)務(wù)邏輯的開發(fā)。</p><p>　　2.2.3 ASP.NET命

47、名空間</p><p>　　ASP.NET命名空間全部位于System.Web下，它一共包含了七個命名空間。這些命名空間提供了頁面開發(fā)中的頁面對象、緩存、配置、安全以及Web控件等幾方面的類。 </p><p>　　(1) System.Web</p><p>　　該命名空間包含頁面基本操作的類，可以利用這些類完成瀏覽器和Web服務(wù)

48、器之間的通信。</p><p>　　(2) System.Web.UI.HtmlControls</p><p>　　該命名空間包含的類用于使用服務(wù)器代碼控制HTML元素。</p><p>　　(3) System.Web.UI.WebControls</p><p>　　該命名空間下包含的類可用于在網(wǎng)頁上常見Web 服務(wù)器控件。Web控件在

49、服務(wù)器上運行，并包含窗體控件（如按鈕和文本框）以及特殊用途的控件（如Calendar控件）。這些類能夠以編程方式控制網(wǎng)頁上的元素。</p><p>　　(4) System.Web.Caching</p><p>　　該命名空間提供用于在服務(wù)器上緩存常用資源的類。ASP.NET緩存技術(shù)可以將頁面信息存儲到服務(wù)器的內(nèi)存中，無論是數(shù)據(jù)對對象還是頁面的某些部分，通過使用緩存技術(shù)，使得用戶在重新訪

50、問頁面的時候，對這些資源進行重復(fù)使用，從而提供了網(wǎng)站的訪問性能。</p><p>　　(5) System.Web.Configuration</p><p>　　該命名空間包含用于配置ASP.NET的類。配置文件是程序中的一個重要組成部分，它用來描述程序中的一些特定屬性，由于這些屬性的變化性比較強，所以可以通過配置文件的更改來使程序的結(jié)果發(fā)生變化。在.NET框架中，配置文件就是一個XML

51、文件，開發(fā)人員可以通過配置文件接口來獲取相關(guān)的配置文件信息，系統(tǒng)管理員可以通過更改配置文件來改變應(yīng)用程序的控制策略，使用配置文件最根本的好處是它的靈活性，不會因為修改了配置文件而需要重新編譯程序。</p><p>　　(6) System.Web.Security</p><p>　　該命名空間包含的類用于在Web服務(wù)器應(yīng)用程序中實現(xiàn)ASP.NET安全性。</p><p

52、>　　ASP.NET的安全是指保護網(wǎng)站的安全性，防止非法用戶進行惡意的破壞。對于Web開發(fā)人員來說，保護網(wǎng)站的安全是一個關(guān)鍵而又復(fù)雜的問題。</p><p>　　(7) System.Web.Services</p><p>　　該命名空間包含可用于ASP.NET創(chuàng)建XML Web Services 的類。</p><p>　　2.2.4 ADO.NET技術(shù)

53、</p><p>　　ADO.NET是一組向 .NET程序員公開數(shù)據(jù)訪問服務(wù)的類。ADO.NET為創(chuàng)建分布式數(shù)據(jù)共享應(yīng)用程序提供了一組豐富的組件。它提供了對關(guān)系數(shù)據(jù)、XML和應(yīng)用程序數(shù)據(jù)的訪問，因此是 .NET Framework中不可缺少的一部分。ADO.NET支持多種開發(fā)需求，包括創(chuàng)建由應(yīng)用程序、工具、語言或Internet瀏覽器使用的前端數(shù)據(jù)庫客戶端和中間層業(yè)務(wù)對象。</p><p>

54、;　　ADO.NET對Microsoft SQL Server和XML等數(shù)據(jù)源以及通過OLE DB和XML公開的數(shù)據(jù)源提供一致的訪問。數(shù)據(jù)共享使用者應(yīng)用程序可以使用ADO.NET來連接到這些數(shù)據(jù)源，并檢索、處理和更新所包含的數(shù)據(jù)。</p><p>　　ADO.NET通過數(shù)據(jù)處理將數(shù)據(jù)訪問分解為多個可以單獨使用或一前一后使用的不連續(xù)組件。ADO.NET包含用于連接到數(shù)據(jù)庫、執(zhí)行命令和檢索結(jié)果的.NET Framew

55、ork 數(shù)據(jù)提供程序。您可以直接處理檢索到的結(jié)果，或?qū)⑵浞湃階DO.NET DataSet對象，以便與來自多個源的數(shù)據(jù)或在層之間進行遠程處理的數(shù)據(jù)組合在一起，以特殊方式向用戶公開。ADO.NET DataSet對象也可以獨立于.NET Framework數(shù)據(jù)提供程序使用，以管理應(yīng)用程序本地的數(shù)據(jù)或源自XML的數(shù)據(jù)。</p><p>　　ADO.NET類在System.Data.dll中，并且與System.Xml

56、.dll中的XML類集成。當(dāng)編譯使用System.Data命名空間的代碼時，請引用System.Data.dll和System.Xml.dll。ADO.NET向編寫托管代碼的開發(fā)人員提供了類似于ActiveX數(shù)據(jù)對象(ADO)為本機組件對象模塊(COM)開發(fā)人員提供的功能。</p><p>　　(1) ADO.NET設(shè)計目標(biāo)</p><p>　　隨著應(yīng)用程序開發(fā)的發(fā)展演變，新的應(yīng)用程序越來

57、越松散地耦合，通?；赪eb應(yīng)用程序模型。如今，越來越多的應(yīng)用程序使用XML來編碼要通過網(wǎng)絡(luò)連接傳遞的數(shù)據(jù)。Web應(yīng)用程序?qū)TTP用作在層間進行通信的結(jié)構(gòu)，必須顯式處理請求之間的維護狀態(tài)。這一新模型大大不同于連接、緊耦合的編程風(fēng)格，此風(fēng)格曾是客戶端/服務(wù)器時代的標(biāo)志。在此編程風(fēng)格中，連接會在程序的整個生存期中保持打開，而不需要對狀態(tài)進行特殊處理。</p><p>　　在設(shè)計符合當(dāng)今開發(fā)人員需要的工具和技術(shù)時，M

58、icrosoft認識到需要為數(shù)據(jù)訪問提供全新的編程模型，此模型是基于.NET Framework生成的?；?NET Framework這一點將確保數(shù)據(jù)訪問技術(shù)的一致性，因為組件將共享通用的類型系統(tǒng)、設(shè)計模式和命名約定。</p><p>　　設(shè)計ADO.NET的目的是為了滿足這一新編程模型的以下要求：具有斷開式數(shù)據(jù)結(jié)構(gòu)；能夠與XML緊密集成；具有能夠組合來自多個不同數(shù)據(jù)源的數(shù)據(jù)的通用數(shù)據(jù)表示形式；以及具有為與數(shù)據(jù)

59、庫交互而優(yōu)化的功能，這些要求都是.NET Framework固有的內(nèi)容。</p><p>　　在創(chuàng)建ADO.NET時，Microsoft具有以下設(shè)計目標(biāo)：利用當(dāng)前的ActiveX數(shù)據(jù)類型(ADO)知識；支持N層編程模型；集成XML支持。</p><p>　　(2) 在ADO.NET中連接和檢索數(shù)據(jù)庫</p><p>　　任何數(shù)據(jù)庫應(yīng)用程序的一項主要功能是連接數(shù)據(jù)源并

60、檢索數(shù)據(jù)源中包含的數(shù)據(jù)。ADO.NET 的 .NET Framework數(shù)據(jù)提供程序充當(dāng)應(yīng)用程序和數(shù)據(jù)源之間的橋梁，使您可以執(zhí)行命令以及使用 DataReader 或 DataAdapter檢索數(shù)據(jù)。</p><p>　　在 ADO.NET中，通過在連接字符串中提供必要的身份驗證信息，使用Connection 對象連接到特定的數(shù)據(jù)源。您使用的Connection對象取決于數(shù)據(jù)源的類型。.NET Framework

61、 提供的每個.NET Framework數(shù)據(jù)提供程序包含一個Connection對象：OLE DB .NET Framework 數(shù)據(jù)提供程序包括一個 OleDbConnection對象，SQL Server .NET Framework 數(shù)據(jù)提供程序包括一個SqlConnection對象、ODBC .NET Framework數(shù)據(jù)提供程序包括一個 OdbcConnection對象，Oracle .NET Framework數(shù)據(jù)提供程序

62、包括一個OracleConnection對象。</p><p>　　當(dāng)建立與數(shù)據(jù)源的連接后，可以使用Command對象來執(zhí)行命令并從數(shù)據(jù)源中返回結(jié)果。您可以使用Command構(gòu)造函數(shù)來創(chuàng)建命令，該構(gòu)造函數(shù)采用在數(shù)據(jù)源、Connection對象和Transaction對象中執(zhí)行的SQL語句的可選參數(shù)。也可以使用Connection的 CreateCommand方法來創(chuàng)建用于特定連接的命令。您可以使用CommandT

63、ext屬性來查詢和修改Command對象的SQL語句。</p><p>　　(3) 使用SQL Server .NET Framework數(shù)據(jù)提供程序</p><p>　　通過 SQL Server .NET Framework數(shù)據(jù)提供程序，可以使用自己的內(nèi)部協(xié)議訪問 SQL Server 7.0 版或更高版本的數(shù)據(jù)庫。該數(shù)據(jù)提供程序設(shè)計的功能與OLE DB、ODBC 和 Oracle的.

64、NET Framework數(shù)據(jù)提供程序的功能類似。</p><p>　　需要注意的是，要使用 SQL Server .NET Framework數(shù)據(jù)提供程序，應(yīng)用程序必須引用 System.Data.SqlClient命名空間。</p><p><b>　　2.3 本章小結(jié)</b></p><p>　　本章主要介紹了開發(fā)系統(tǒng)所需了解的背景知識

65、，主要包括Ajax技術(shù)，.NET Framework。它們對下一章系統(tǒng)的整體設(shè)計起到了一定的參考作用，只有在充分熟悉了本章內(nèi)容的基礎(chǔ)上才能輕松地進入下一章的閱讀。</p><p>　　3 智能數(shù)字相冊系統(tǒng)的設(shè)計</p><p>　　3.1 總的設(shè)計目標(biāo)</p><p>　　本次設(shè)計的總體目標(biāo)是用高效、靈活的C#語言設(shè)計出操作性、實用性好的電子相冊軟件，并能夠?qū)崿F(xiàn)

66、圖像的導(dǎo)入和顯示、數(shù)據(jù)庫索引的建立、根據(jù)關(guān)鍵字檢索圖像、圖像的分類等功能。該系統(tǒng)比一般的數(shù)字相冊系統(tǒng)而言，更具有一定的智能性，例如：當(dāng)用戶需要某幅相片時，可以通過簡單的人機交互，或者根據(jù)用戶使用記錄，自動推薦出用戶可能需要的圖像，使得用戶可以獲得一款理想的圖像管理軟件。</p><p>　　3.2 需要解決的重點問題</p><p>　　智能數(shù)字相冊系統(tǒng)的特殊性使得軟件的設(shè)計并不容易，主

67、要表現(xiàn)在：</p><p>　　(1) 圖像數(shù)據(jù)的存儲問題</p><p>　　圖片文件不同于文本文件,它以二進制方式存放于電腦中，因此實現(xiàn)圖片管理主要有以下兩種方式：第一種是將圖片直接放入數(shù)據(jù)庫對應(yīng)的表中，這種方式的優(yōu)點是實現(xiàn)了圖庫合一，但這種存儲方式對數(shù)據(jù)庫的容量和性能要求較高；另一種方式是將圖片以文件方式存放到服務(wù)器上，并將與圖片相關(guān)的信息和路徑存入對應(yīng)的數(shù)據(jù)表中，這種方式縮小了表的

68、大小,同時提高數(shù)據(jù)庫操作速度，故通常被基于B/S的系統(tǒng)所廣泛采用[10]。本文以第二種方式為基礎(chǔ)，詳細描述如何使用ASP.NET來構(gòu)建智能數(shù)字相冊系統(tǒng)。</p><p><b>　　(2) 圖像的檢索</b></p><p>　　圖像的檢索包括基于關(guān)鍵詞的檢索和基于內(nèi)容的檢索兩種方式。</p><p>　　基于關(guān)鍵詞的檢索是傳統(tǒng)的圖像檢索方式。

69、對圖像信息用關(guān)鍵詞或文本方式來進行相應(yīng)的描述是不精確的，因為不同的人對同一幅圖像或同一個人在不同的時間對同一幅圖像會有不同的理解，對不同的圖像的描述也很難遵循相同的標(biāo)準(zhǔn)。因此當(dāng)用戶輸入的檢索關(guān)鍵詞與系統(tǒng)中對圖像的描述信息不一致時，就檢索不到需要的圖像，從而導(dǎo)致檢索的失敗，同時隨著圖像信息的劇增，其查找效率也迅速降低。</p><p>　　基于內(nèi)容的檢索式近年來研究的重點，也提出了基于圖像紋理、基于圖像直方圖、基于

70、圖像色彩控件等多種檢索方式。但是，基于內(nèi)容的圖像檢索系統(tǒng)具有相當(dāng)?shù)碾y度，目前還沒有開發(fā)出可以針對任意圖像的，真正實用的基于內(nèi)容的圖像檢索系統(tǒng)，有的基于內(nèi)容的圖像檢索系統(tǒng)只是針對某一類特殊的圖像有效。隨著技術(shù)的進步，基于內(nèi)容的圖像檢索是發(fā)展趨勢[11]。開發(fā)本系統(tǒng)的目的是管理珍貴的歷史資料圖片，每幅圖像的背景資料或相關(guān)信息也是需要保存和進行圖像檢索的重要依據(jù)，而且需要管理的圖像五花八門，各種類別、格式、質(zhì)量、大小的圖像的存在使得在短時間內(nèi)

71、開發(fā)出基于內(nèi)容的圖像檢索系統(tǒng)幾乎是不可能的，所以本系統(tǒng)采用基于關(guān)鍵詞的檢索方式。</p><p>　　3.3 系統(tǒng)數(shù)據(jù)結(jié)構(gòu)的設(shè)計</p><p>　　數(shù)據(jù)庫結(jié)構(gòu)設(shè)計是在完成了描述系統(tǒng)各種數(shù)據(jù)之間的依賴關(guān)系和信息分類的基礎(chǔ)上，將各種信息轉(zhuǎn)換成相應(yīng)的數(shù)據(jù)項定義表。數(shù)據(jù)項定義表的作用主要是定義每個表的表名、表中各字段的名稱、數(shù)據(jù)類型長度和是否允許空，但在不同的數(shù)據(jù)庫，數(shù)據(jù)類型的表示符號和長度有

72、所差別。本系統(tǒng)的數(shù)據(jù)庫建表如下：</p><p>　　(1) 圖片信息表，用于存放與圖片相關(guān)的信息，包括圖片的編號、圖片的上傳用戶、圖片的分類、圖片名稱、圖片的存放路徑、上傳時間以及圖片的描述信息等。</p><p>　　表3.1 圖片信息表</p><p>　　(2) 用戶信息表，用于存放用戶的信息，包括用戶名、用戶密碼、最近一次的登錄時間、允許登錄時間、是否鎖

73、定、聯(lián)系郵箱、是否公開以及身份證號碼（可選字段）。</p><p>　　表3.2 用戶信息表</p><p>　　3.4 系統(tǒng)功能設(shè)計</p><p>　　智能數(shù)字相冊系統(tǒng)需要實現(xiàn)的功能包括用戶的管理，以及圖片的管理和使用等。具體來講，它包含用戶管理中常見的注冊、登錄、修改用戶信息；圖片的管理和使用功能主要包括圖片的上傳、瀏覽、搜索、查看圖片詳細信息等操作。其總

74、體結(jié)構(gòu)如下圖3.1所示。</p><p>　　圖3.1 智能數(shù)字相冊系統(tǒng)功能結(jié)構(gòu)圖</p><p>　　3.4.1 圖片管理</p><p>　　圖片管理實現(xiàn)的關(guān)鍵是將圖片上傳到服務(wù)器，這涉及到原始圖片的上傳、生成原始圖片的縮略圖以及將與圖片相關(guān)的信息保存到數(shù)據(jù)庫等重要細節(jié)。</p><p>　　隨著互聯(lián)網(wǎng)的發(fā)展，各網(wǎng)站特別是一些BBS站

75、點為豐富資源，通常會提供圖像文件的上傳及顯示的功能。由于用戶提供的文件在格式及大小方面都不一致，尤其是圖像的大小。不合適的圖像大小可能會改變網(wǎng)頁的排版格式，使網(wǎng)頁變得不雅觀，而較大的文件長度又會減慢網(wǎng)頁的響應(yīng)。另外，在Web開發(fā)中需要對用戶上傳的圖像文件建立相應(yīng)的縮略圖，這些功能的實現(xiàn)需要對圖像文件進行處理，主要是圖像文件的格式及尺寸的調(diào)整。雖然在HTML標(biāo)記語言中可以在〈img〉標(biāo)記中加入width及height屬性來控制圖像的顯示大

76、小，但HTML語言不能對圖像大小進行判斷，只能將所有的圖像以相對固定的格式來顯示，不能靈活的滿足多方面的要求。傳統(tǒng)方式對于這種情況的判斷處理通常是用JavaScript 或VBScript 來實現(xiàn)，ASP.NET的使用為靈活實現(xiàn)圖像的處理提供了新的途徑。ASP.NET的面向?qū)ο缶幊痰拈_發(fā)方式相對于傳統(tǒng)的腳本編程方式比較適合Web站點功能模塊化的需要[12]。本節(jié)針對在ASP.NET環(huán)境下實現(xiàn)圖像文件上傳進行初步的探討。</p>

77、;<p>　　在模塊的實現(xiàn)過程中，用戶首先打開文件夾，選擇準(zhǔn)備上傳的圖片文件，系統(tǒng)提供預(yù)覽原始圖片的功能。然后點擊上傳按鈕，系統(tǒng)調(diào)用上傳過程并將生成的縮略圖保存到服務(wù)器上相應(yīng)的目錄中?？s略圖保持原始圖片的縱橫比并設(shè)定最大邊長為100像素。圖片的名稱從URL中提取文件名，圖片的后綴保持原有后綴不變。同時，系統(tǒng)自動將與該圖片相關(guān)的信息保存到數(shù)據(jù)庫中，圖片本身則保存在程序指定的文件夾中。在圖片上傳成功后，圖片的信息(如文件類型、

78、客戶端文件地址、文件名、擴展名) 將會在上傳圖片頁面顯示出來。</p><p>　　在ASP.NET中可以使用HTML控件和標(biāo)準(zhǔn)控件：打開文件按鈕( file類型input ,屬于HtmlInputFile 類) 和提交按鈕（Button類型）來實現(xiàn)文件的上傳功能。</p><p><b>　　具體的用法如下：</b></p><p>　　&l

79、t;input type="file" size="50" name="File" onchange="Preview(this.value)"> </p><p>　　<asp:Button Runat="server" Text="開始上傳" ID="UploadBu

80、tton"></asp:Button></p><p>　　在打開文件按鈕中增加了響應(yīng)事件Preview(this.value)，用來實現(xiàn)上傳圖片的預(yù)覽功能。</p><p>　　在提交按鈕（Button類型）中增加runat =″server″，用以標(biāo)記為在服務(wù)器端運行。</p><p>　　為將上傳的文件在服務(wù)器上進行保存，可以使用：

81、</p><p>　　String fileName = System.IO.Path.GetFileName(postedFile.FileName);</p><p>　　postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("Files/") + fileName);</p>

82、<p>　　HtmlInputFile的成員PostedFile屬于HttpPostedFile類,該成員提供對上傳文件的操作接口，本例使用HttpPostedFile的成員函數(shù)SaveAs對上傳文件進行保存，同時將上傳圖片的信息寫入數(shù)據(jù)庫。</p><p>　　本系統(tǒng)的上傳文件頁面可以實現(xiàn)多個文件同時上傳，</p><p>　　<input type="but

83、ton" value="增加(Add)" onclick="addFile()"></p><p>　　其中addFile()的函數(shù)處理流程如下：</p><p>　　1) 增加打開文件按鈕( file類型input，屬于HtmlInputFile類)和提交按鈕（Button類型）</p><p>　　var

84、str = '<INPUT type="file" size="50" NAME="File">' </p><p><b>　　2) 預(yù)覽圖片</b></p><p>　　onchange="Preview(this.value)"; </p>

85、<p>　　document.getElementById('MyFile').insertAdjacentHTML("beforeEnd", str);</p><p>　　3) 圖片描述部分的內(nèi)容</p><p>　　document.getElementById('txtAlbumDesc').nodeValue=&quo

86、t;";</p><p>　　同時，若在上傳過程中需要臨時改變上傳文件，還可以點擊重置按鈕，即將頁面數(shù)據(jù)恢復(fù)到原始狀態(tài)。</p><p>　　<input onclick="this.form.reset()" type="button" value="重置(ReSet)"></p><p

87、>　　3.4.2 圖片檢索 </p><p>　　本節(jié)將仿照Google Suggest，使用Ajax技術(shù)實現(xiàn)動態(tài)獲取搜索提示的功能。與傳統(tǒng)的搜索相比，使用Ajax技術(shù)的搜索提示，能及時地給用戶提供參考的關(guān)鍵字。對用戶來說，無需提交頁面就可以獲得提示，節(jié)省了大量的時間。</p><p>　　當(dāng)用戶需要查看數(shù)據(jù)庫服務(wù)器中的某些特定圖片時,可以通過圖片檢索模塊快速定位到需要查找的圖片。

88、本模塊提供按圖片名稱作為關(guān)鍵字的圖片查詢，系統(tǒng)在圖片記錄數(shù)據(jù)表中進行關(guān)鍵字模糊匹配檢索，并返回檢索到的所有縮略圖，進行分頁顯示?？紤]到用戶在檢索圖片時更關(guān)注圖片本身的內(nèi)容，系統(tǒng)采用可分頁的DataList控件來顯示查詢結(jié)果(包括縮略圖)，同時使用新頁面來顯示原始圖片及其相關(guān)信息，新頁面中采用的是DetailsView控件綁定數(shù)據(jù)實現(xiàn)的。</p><p>　　(1) 基本原理分析</p><p&

89、gt;　　搜索提示的基本原理是：當(dāng)用戶每輸入完一個關(guān)鍵字時，便向服務(wù)器發(fā)送請求，服務(wù)器端根據(jù)用戶當(dāng)前輸入的關(guān)鍵字，在數(shù)據(jù)庫中搜索相關(guān)的關(guān)鍵字信息，并返回給客戶端[13]。在實現(xiàn)搜索時需要注意以下幾點：</p><p>　　1) 當(dāng)鍵盤釋放時，也就是使觸發(fā)onkeyup事件時，需要向服務(wù)器發(fā)送請求；</p><p>　　2) 需要關(guān)閉文本框瀏覽器自帶的提示，以免影響搜索提示，也就是要將文本框

90、</p><p>　　屬性設(shè)置為：autocomplete=”off”；</p><p>　　3) 當(dāng)出現(xiàn)搜索提示后，將選中的搜索提示突出顯示，以示區(qū)別。這種效果可以通過改變CSS來實現(xiàn)。</p><p>　　圖3.2 搜索提示基本原理示意圖</p><p>　　(2) 客戶端原理分析</p><p>　　在搜索提示

91、的界面文件上，包括一個輸入框和一個提交按鈕。其中輸入框用來輸入關(guān)鍵字。</p><p>　　<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocompl

92、ete="off" /></p><p>　　<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" runat="server" /><

93、;/p><p>　　在以上的方法中可以發(fā)現(xiàn)，當(dāng)輸入框觸發(fā)onkeyup事件時會調(diào)用searchSuggest()方法，該方法取回所需要的數(shù)據(jù)，客戶端獲取數(shù)據(jù)的流程如圖3.3所示。</p><p>　　圖3.3 客戶端處理數(shù)據(jù)流程圖</p><p>　　searchSuggest()方法的作用是向服務(wù)器發(fā)送請求。使用該方法前，要先定義一個XMLHttpRequest對象

94、，然后創(chuàng)建該對象。需要注意的是，該方法要根據(jù)不同瀏覽器返回不同的XMLHttpRequest對象。</p><p>　　返回后的數(shù)據(jù)通過handleSearchSuggest()方法來處理。該方法首先將返回的數(shù)據(jù)分割成數(shù)組，然后將數(shù)組中的數(shù)據(jù)組織成HTML代碼的格式，最后顯示到搜索結(jié)果的圖層中。整個方法的邏輯處理流程如圖3.4所示。</p><p>　　圖3.4 handleSearch

95、Suggest()方法邏輯處理流程圖</p><p>　　suggestOver()和suggestOut()方法是改變鼠標(biāo)移動和移出該選項時的CSS樣式表。當(dāng)用戶輸入“L”時，客戶端如下圖所示：</p><p>　　圖3.5 輸入關(guān)鍵字后的客戶端</p><p>　　服務(wù)器端返回的字符串如下：</p><p>　　Landscape fi

96、ve|Landscape four|Landscape one|Landscape six|Landscape three|Landscape two|landscape14a.jpg|</p><p>　　然后，將上述字符串以“|”將其分割成若干子串，存入數(shù)組中，循環(huán)該數(shù)組，將數(shù)組中的內(nèi)容顯示到前臺的div層中。</p><p>　　由于服務(wù)器端可以實現(xiàn)模糊搜索，于是當(dāng)用戶輸入“L”后，

97、點擊Search按鈕，數(shù)據(jù)庫圖片關(guān)鍵字中所有以字母“L”開頭的圖片將會顯示在頁面上。</p><p>　　(3) 服務(wù)器端原理分析</p><p>　　客戶端發(fā)送查詢關(guān)鍵字的請求后，服務(wù)器端使用doPost()方法處理該請求，注意需要在服務(wù)端頁面設(shè)置AutoEventWireup="false"，否則服務(wù)器端會處理兩次客戶端的請求。</p><p&g

98、t;　　服務(wù)器端接收到該請求后，首先獲得用戶輸入的關(guān)鍵字，然后查詢數(shù)據(jù)庫，并將查詢結(jié)果保存到ArrayList中，最后將ArrayList中的數(shù)據(jù)組織成客戶端所需要的格式，返回給客戶端[14]。doPost()方法處理的邏輯流程如下圖所示。</p><p>　　圖3.6 圖像檢索服務(wù)器端處理邏輯流程圖</p><p>　　當(dāng)點擊某一幅圖片時或其名字說明時，將進入另一頁面，該頁面顯示圖片在

99、數(shù)據(jù)庫中的詳細信息。圖片搜索頁面運行后的效果如第四章圖4.5，圖4.6所示。</p><p>　　3.4.3 圖片瀏覽</p><p>　　本節(jié)將使用Ajax技術(shù)實現(xiàn)無刷新即可瀏覽圖片。瀏覽圖片時，自動向服務(wù)器端發(fā)送請求，查詢該類別下的照片，并顯示到客戶端。用戶也可以根據(jù)喜好隨時改變相冊的風(fēng)格。瀏覽相片的整個過程無需刷新頁面。第四章圖4.4所示為相冊瀏覽頁面的示意圖。</p>

100、<p>　?。ㄒ唬?基本原理分析</p><p>　　(1) 界面設(shè)計分析</p><p>　　在圖4.4所示的的頁面中，每個選項卡對應(yīng)相片的一個分類，單擊該選項卡時可以獲得該分類的所有圖片。當(dāng)單擊某個圖片時，圖片將放大顯示。選項卡是由無序列表<ul>元素來實現(xiàn)的，每個選項卡中的圖片是由嵌套的<ul>元素顯示的。</p><p>

101、;　　以選項卡的第二個選項為例：</p><p>　　<li><a class="hide" onmouseover="getPictures('tree')">Trees</a></p><p><b>　　<ul></b></p><p>

102、;　　<li id="tree"> </li><!- - 顯示圖片區(qū)- -></p><p><b>　　</ul></b></p><p><b>　　</li></b></p><p>　　圖3.7為未單擊選項卡時的效果，圖3.8為單擊了T

103、rees選項卡時的效果，如圖所示。</p><p>　　圖3.7 單擊之前的選項卡</p><p>　　圖3.8 單擊Trees后的選項卡</p><p>　　每一個選項卡是一個<li>元素，設(shè)置該元素的CSS可以使之呈現(xiàn)上圖中的效果。</p><p>　　當(dāng)鼠標(biāo)移動到Trees選項時，調(diào)用getPictures('t

104、ree')方法。該方法的作用是，創(chuàng)建一個XMLHttpRequest對象，并向服務(wù)器發(fā)送該請求。該方法的處理流程如下：</p><p>　　1) 首先需要定義全局變量ajaxObject，保存XMLHttpRequest對象；</p><p>　　2) 創(chuàng)建XMLHttpRequest請求：ajaxObject = createAjaxObj()；</p><p

105、>　　3) 當(dāng)請求狀態(tài)變化時調(diào)用changeStateFunction方法：changStateFunction(category); 4) 將客戶端的請求發(fā)送到服務(wù)器的地址：</p><p>　　var submitURL="PhotoService.aspx?cate=" + category; </p><p>　　5) 調(diào)用XMLHttpRequest對

106、象的open方法建立連接：</p><p>　　ajaxObject.open("GET", submitURL, true)；</p><p>　　6) 調(diào)用XMLHttpRequest對象的send方法發(fā)送請求：</p><p>　　ajaxObject.send(null); </p><p>　　7) 請求未完

107、成時顯示loading狀態(tài)： </p><p>　　var elmt = document.getElementById(category)；</p><p>　　elmt.innerHTML = "Loading"；</p><p>　　(2) 圖片放大原理分析</p><p>　　當(dāng)用戶單擊某個圖片時，該圖片會自動

108、放大。其原理很簡單，是通過設(shè)置圖片的CSS外觀來實現(xiàn)的。當(dāng)鼠標(biāo)移動到該圖片上時，改變圖片的大小和位置，從而呈現(xiàn)出放大的動態(tài)效果。</p><p><b>　　動態(tài)更換皮膚</b></p><p>　　當(dāng)單擊界面中的更改外觀風(fēng)格選項時，調(diào)用switchStyle方法來更改頁面的CSS外觀。該方法的原理是：首先設(shè)置好兩個不同風(fēng)格的CSS文件，當(dāng)調(diào)用該方法時，查找HTML代

109、碼內(nèi)<head>元素中有關(guān)CSS樣式表的文件，然后更改該樣式表文件的鏈接地址，使之采用另一個樣式表文件的風(fēng)格。</p><p>　　該方法的處理流程如下：</p><p>　　獲得<head>元素<link>元素：var cssfile = document.getElementsByTagName("link&quo

110、t;)[0]; </p><p>　　如果該樣式表的鏈接地址為file1，則改為file2的地址：</p><p>　　if (cssfile.getAttribute("href") == file1)</p><p>　　cssfile.setAttribute("href", file2);</p><

111、;p>　　3) 否則直接設(shè)置為file1的地址：cssfile.setAttribute("href", file1); </p><p>　?。ǘ?客戶端原理分析</p><p>　　如何獲取圖片并顯示在客戶端呢？這里使用了XMLHttpRequest對象來向服務(wù)器發(fā)送請求，在取回該分類下的圖片數(shù)據(jù)后，將其顯示到客戶端[15]。這是一種動態(tài)的獲取數(shù)據(jù)方法，整個