基于Ajax技術和jQuery的SNS交友網(wǎng)站前端設計與實現(xiàn)

目錄第一章緒論 11.1課題研究背景 1的興起 1時代的SNS網(wǎng)站 2時代的前端開發(fā) 31.2研究內(nèi)容和技術 51.3論文結構 6第二章系統(tǒng)框架與技術 72.1Ajax和Javascript 72.2jQuery簡介 82.3SSH框架簡介 10第三章SNS網(wǎng)站系統(tǒng)概述 113.1系統(tǒng)簡介 113.2系統(tǒng)功能概述 113.2.1功能圖示和描述 113.2.2系統(tǒng)界面展示 133.2.3用戶接口 153.2.4軟件接口 153.2.5系統(tǒng)用例圖 153.3系統(tǒng)核心技術 15第四章Ajax技術和jQuery在SNS網(wǎng)站前端設計與實現(xiàn)中的運用 174.1好友狀態(tài)回復功能 174.1.1狀態(tài)回復功能模塊實現(xiàn)思路 174.1.2狀態(tài)回復功能模塊具體實現(xiàn) 174.1.3功能模塊的界面設計評價 194.2注冊驗證 194.2.1注冊驗證實現(xiàn)思路 204.2.2注冊驗證具體實現(xiàn) 20功能模塊的界面設計評價 224.3日歷控件 224.3.1jQueryUI介紹 224.3.2日歷控件具體使用 234.3.3功能模塊的界面設計評價 254.4照片展示特效 25第五章總結與展望 285.1總結 285.2展望 29參考文獻 30附錄A：各功能模塊核心代碼 32第一章緒論本章主要介紹Web2.0時代，SNS網(wǎng)站的發(fā)展，以及本課題將要研究的內(nèi)容和采用的技術。1.1課題研究背景的興起我們現(xiàn)在所了解的Web2.0的概念最初進入人們的視野是2004年。在此之前，由于瀏覽器得到了普及，萬維網(wǎng)得到快速的增長，人們將網(wǎng)站視為如同電視、報紙、雜志等傳統(tǒng)媒體一樣的發(fā)布信息的媒介，雖然這段時期用戶也可以和站點進行一些簡單的交互，比如用戶登錄，數(shù)據(jù)查詢，提交數(shù)據(jù)等，但這些網(wǎng)站總體來說還是一種信息提供/瀏覽的模式。這段時期的WEB應用被稱之為Webl.0。在2004年，在O’Reilly和MediaLive公司的一次頭腦風暴會議上，DaleDougherty提出了的概念，他指出不再將網(wǎng)站視為一種簡單的信息發(fā)布的手段。而是將網(wǎng)站看作是一個平臺，強調(diào)用戶與網(wǎng)站之間的互動，由用戶來提供內(nèi)容，為網(wǎng)站增加價值。他們還指出網(wǎng)站的一些關鍵原則：1．將Web站點視為平臺。2．充分利用群體智能。3．數(shù)據(jù)是站點的“IntelInside”。4．豐富的用戶體驗。5．快速的反應能力.的應用主要包括：博客（BLOG）、RSS、百科全書(Wiki)、網(wǎng)摘、社會網(wǎng)絡（SNS）、P2P、即時通訊（IM）等。中國互聯(lián)網(wǎng)的Web2.0時代到來后，這些應用都有較為普及的例子，門戶網(wǎng)站的博客系統(tǒng)，百度百科，人人網(wǎng)，騰訊QQ，包括現(xiàn)在風頭正勁的微博。經(jīng)過多年發(fā)展，Web2.0已經(jīng)存在于互聯(lián)網(wǎng)生活的各個角落，極大地改變了人們上網(wǎng)的習慣。由上述網(wǎng)站的關鍵原則可以看到，系統(tǒng)能否實現(xiàn)用戶和網(wǎng)站的交互以及系統(tǒng)能否提供良好的用戶體驗在網(wǎng)站中具有關鍵的作用。這要求前端開發(fā)人員對web2.0用戶體驗有了解和研究，并通過前端技術達到最佳效果。SNS，全稱SocialNetworkingServices，即社會性網(wǎng)絡服務，專指旨在幫助人們建立社會性網(wǎng)絡的互聯(lián)網(wǎng)應用服務，在國內(nèi)以人人網(wǎng)（校內(nèi)網(wǎng)）、開心網(wǎng)、白社會SNS平臺為代表。在Danahm.Boyd和NicoleB．Ellison的論文中給出了SNS網(wǎng)站的定義，他們指出SNS包含如下兩個功能特征：1)每一個用戶都擁有一個一個公開或半公開的個人檔案文件，2)用戶之間互相共享好友列表，用戶可以遍歷查看由這些好友關系組織形成的網(wǎng)絡。在中國，SNS的發(fā)展可以分為三個時期。1.1999-2006年：1999年，被認為是SNS概念最早的倡導者——周云帆、陳一舟和楊寧共同創(chuàng)辦ChinaRen校友錄。當時中國互聯(lián)網(wǎng)處于萌芽階段，網(wǎng)民總數(shù)在1000萬人左右。2003年博客逐漸興起后，Web2.0理念與多種應用產(chǎn)品開始流行。2005年，8月，龐升東創(chuàng)立51，是中國最大的博客社區(qū)，以交友為主；12月，來自清華大學和天津大學的王興、王慧文等幾位大學生創(chuàng)立校內(nèi)網(wǎng)(xiaonei），是中國最早的校園SNS社區(qū)。這一階段SNS概念處于被認知和等待普及階段，SNS服務單一，更多被當作一種降低聯(lián)絡成本的工具來使用。2.2006-2008年5月：2006年，陳一舟創(chuàng)立千橡集團，10月收購校內(nèi)網(wǎng)，其他SNS第一目標依然鎖定校園市場。2007年10月，曾創(chuàng)建校內(nèi)網(wǎng)和飯否網(wǎng)的王興推出真實社交網(wǎng)絡海內(nèi)網(wǎng)（），是最早模仿全球最大SNS服務提供商facebook（2004年創(chuàng)立）的商務類SNS社區(qū)。這一時期校園SNS較有影響的主要是：校內(nèi)網(wǎng)、億聚網(wǎng)、占座網(wǎng)、Chinay、Chinaren校內(nèi)、優(yōu)點網(wǎng)。這一時期資本市場高度關注SNS市場，風投不斷注入；SNS理念、經(jīng)營思路、產(chǎn)品嚴重同質化，即以校內(nèi)用戶為主，更模仿facebook，但沒有facebook豐富的應用開發(fā)平臺，如音樂、視頻等。3.2008年5月以后：2008年5月，開心網(wǎng)（kaixin001）創(chuàng)立，流行于白領，游戲結合邀請模式是其快速發(fā)展的根本。同一時間，日本軟銀注資3.4億美元于千橡集團。而Facebook從微軟和李嘉誠基金會獲得巨額融資，國際主流資本市場對于SNS關注達到頂點。資本市場的行動隨之引發(fā)連鎖效應，到目前為止，國內(nèi)SNS服務提供商超過100家。這一時期具有代表性的SNS網(wǎng)站為校內(nèi)網(wǎng)、開心網(wǎng)、51等。這一時期的SNS網(wǎng)站用戶用戶身份主要集中于企業(yè)白領，用戶需求呈現(xiàn)出多樣性和現(xiàn)實性；另外，SNS應用和服務在商業(yè)化方面開始超越校內(nèi)網(wǎng)等第二階段。從國內(nèi)SNS網(wǎng)站發(fā)展脈絡中，可以看出，一個SNS網(wǎng)站要要想能夠更有活力的生存，想要活的更久，不僅要學會與用戶之間互動，更為重要的就是要架構出社區(qū)這個意義，形成一個個的“圈子”，從而制造出良好的用戶體驗。依托圈子的力量將用戶粘住，提高用戶的活躍性，從而反作用于“圈子”，這樣所形成的良性的循環(huán)式發(fā)展，比一味靠炒作的噱頭而短期增加用戶的手段要長遠得多。。雜亂無章的內(nèi)容與人群通過SNS社區(qū)變得有序Web2.0時代的前端開發(fā)前端開發(fā)是互聯(lián)網(wǎng)產(chǎn)品開發(fā)工作逐漸細分的產(chǎn)物，前端開發(fā)工程師的職責用一句精煉的話表述即為：運用前端技術，實現(xiàn)體驗的良好傳達?！绑w驗”即前端設計部分，在這里指的是設計師對互聯(lián)網(wǎng)產(chǎn)品所做的交互設計和視覺設計，實現(xiàn)人員采用相關技術，將其實現(xiàn)為產(chǎn)品，通常，將PSD設計稿轉化為HTML+CSS+JS就是一種實現(xiàn)過程。web產(chǎn)品交互越來越復雜，用戶使用體驗和網(wǎng)站前端性能優(yōu)化，這些都需要專業(yè)的前端工程師來解決。另外，在項目中還要彌補設計師在交互設計上的不足，前端工程師在開發(fā)過程中起著重要的承上啟下的作用。一兩個前端工程師就可以讓整個開發(fā)并行起來，讓設計到實現(xiàn)的轉換更順利。在前端開發(fā)過程中，如何進行合理的界面設計，是開發(fā)人員必須考慮的問題。在人機交互的工業(yè)設計領域，任何機器的交互產(chǎn)生的部分被稱為用戶界面（UserInterface）。廣義上的人機交互包括硬件和軟件兩種。大多數(shù)系統(tǒng)的用戶界面都提供輸入和輸出，輸入使用戶得以操作一個系統(tǒng)，輸出則是系統(tǒng)對用戶的控制所作出的反應。為了更好地完成人機交互過程，用戶界面的設計顯得尤為重要。設計的目的是使得系統(tǒng)能簡單而高效地完成用戶的需求。一個友好而美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離。關注于軟件戰(zhàn)略咨詢服務的獨立研究機構InfoTrends在其近期的研究中發(fā)現(xiàn),企業(yè)對于用戶體驗的關注成為新的熱潮,用戶體驗把握度的提升將成為新一輪企業(yè)市場競爭的拐點。界面設計并不僅僅停留在美工層面，而是心理學，美學，甚至社會學等多種知識的綜合運用，目前在國內(nèi)，用戶界面設計還是個相對陌生的詞，用戶界面設計也大多被視為網(wǎng)頁設計的同義詞，然而，即使是網(wǎng)頁設計，也并非僅僅停留在視覺層面或者技術層面。用戶界面設計主要遵循以下七大原則：方便用戶完成操作（suitabilityforthetask）：人機對交互應盡量有利于用戶有效且高效地完成操作。一目了然（Self-descriptiveness）：人機的每一次交互應通過系統(tǒng)提示或解釋性提示使用戶能立即了解交互目的?？煽匦裕╟ontrollability）：在交互完成前，用戶應當可以預先定制交互方式和節(jié)奏。和用戶期望保持一致（conformitywithuserexpectations）：交互過程應和用戶特征，如知識結構，教育北京，經(jīng)歷，以及被廣泛接受的習慣保持一致。允許用戶犯錯（errortolerance）:當遇到錯誤輸入時，用戶不需或只需采取最少的行動以達到想要的目的。方便個性化設置（suitabilityforindividualization）：用戶界面軟件應當為不同需求，用戶偏好以及用戶水平提供相應調(diào)整。方便用戶學習（suitabilityforlearning）：為用戶提供學習使用系統(tǒng)的途徑。SNS網(wǎng)站中，用戶的參與和用戶粘度是網(wǎng)站發(fā)展的關鍵因素，一個優(yōu)秀的用戶界面設計在帶來好的用戶體驗的同時，無疑增加了用戶對網(wǎng)站的好感度，為他繼續(xù)使用增加了籌碼。本系統(tǒng)在進行頁面設計時，努力以上述七條原則為參考，希望給目標用戶提供優(yōu)質的用戶體驗。1.2研究內(nèi)容和技術本系統(tǒng)具備SNS社區(qū)的主要功能模塊，為用戶提供網(wǎng)絡交流平臺，通過瀏覽和分享好友的資源，查看好友最新動態(tài)，給好友留言等方式增強聯(lián)系，達到社交目的。本系統(tǒng)區(qū)別于一般SNS社區(qū)的特點在于：用戶設定為武漢大學的學生，利用其現(xiàn)實生活中的聯(lián)系，為其提供生活資訊和實用信息，如問答求助，校園活動，舊物交換，資源共享等，利用SNS網(wǎng)站六度分割原理，通過系統(tǒng)內(nèi)的“轉發(fā)”和“分享”功能，將用戶發(fā)布的信息傳播到所有可能達到的地方，實現(xiàn)最大化傳播。社區(qū)內(nèi)成員大多具有現(xiàn)實生活聯(lián)系，用戶通過已有的信任關系作為傳遞媒介建立起新的社會關系，這使那些具有較強的群體性的信息傳播更為快捷，朋友之間的人脈關系資源分享因為社交網(wǎng)絡的存在更為方便。這突破了傳統(tǒng)SNS社區(qū)單純交友的功能，體現(xiàn)了互聯(lián)網(wǎng)應用對實際生活的巨大影響，使網(wǎng)絡變成一種生活方式。用戶通過相同的愛好，需求，形成一個一個的圈子，互相影響，形成對交流平臺的依賴性。本系統(tǒng)功能的實現(xiàn)主要采用Ajax技術和SSH（Struts+Spring+Hibernate）框架，并使用HTML+CSS+jQuery作為前端技術，使網(wǎng)頁的框架結構設計、網(wǎng)頁的樣式設計、實現(xiàn)網(wǎng)頁動態(tài)效果的腳本設計三者成功分離，前端和后端的工作并行，提高了團隊工作效率。正如前文所說，前端設計與實現(xiàn)在產(chǎn)品開發(fā)過程中占有重要地位，選用Ajax技術，也是為了保證前端開發(fā)的合理和高效。Ajax與傳統(tǒng)的Web對比,Ajax可以通過在用戶操作頁面的同時無刷新的更新用戶界面。這樣的處理在某些情況下能夠給用戶帶來較好的用戶體驗。Ajax與傳統(tǒng)的Web相比,在操作性和展現(xiàn)力及交互性方面會給用戶不同體驗。在操作性和展現(xiàn)力方面，相對于桌面應用程序,Web應用程序在操作性和展現(xiàn)力上明顯缺乏,如果一個復雜一點的應用,在Web上可能需要十幾個頁面來處理。而事實上我們需要交換的數(shù)據(jù)僅僅是網(wǎng)頁中的一部分內(nèi)容,而不需要將整個頁面提交。Ajax可以彌補這種操作性上的缺失。其次是交互性的問題。傳統(tǒng)的Web由于協(xié)議本身的缺陷,頁面上的每一個功能都需要進行頁面刷新和下載,大到提交數(shù)據(jù)、數(shù)據(jù)查詢、數(shù)據(jù)可視打印,小到取一個變量。這個正是Ajax模型最擅長的地方。按需更新頁面,我們不再需要去刷新整個頁面,哪里需要刷新就刷新哪里,大大降低傳輸?shù)臄?shù)據(jù)量,增強交互性。1.3論文結構本文的主要工作分為三部分：首先，對本系統(tǒng)的互聯(lián)網(wǎng)背景以及前端開發(fā)的行業(yè)發(fā)展做一個總的介紹，并陳述本系統(tǒng)在內(nèi)容和技術方面的特點和意義。然后，對系統(tǒng)實現(xiàn)過程中所采用的框架和技術做詳細介紹，包括Ajax各部分的功能和關系，Javascript語言的特點及其在Ajax中的作用，并對SSH框架做一定介紹。另外，本系統(tǒng)所用到的Javascript框架jQuery在這一部分也將作介紹。接下來，將介紹本系統(tǒng)的功能以及開發(fā)環(huán)境，并進一步介紹核心技術。其后，以本系統(tǒng)各功能模塊為例，介紹jQuery在實現(xiàn)前端功能方面的具體方法。最后，對系統(tǒng)及本文做出總結，并提出本系統(tǒng)現(xiàn)階段的不足和需要改進的地方。

第二章系統(tǒng)框架與技術Ajax和JavascriptAjax（AsynchronousJavaScriptAndXML，異步JavaScript和XML)，它在2005年由JesseJamesGarrett首先提出，它是一種客戶端的技術。然而Ajax并不是一種新的技術，而是一些傳統(tǒng)技術的組合，每種技術都有其獨特之處。Ajax的出現(xiàn)，揭開了頁面無刷新技術的開始，并逐漸取代傳統(tǒng)的Web交互方式以及通過隱藏的框架來實現(xiàn)異步提交，它使用XMLResqust實現(xiàn)異步數(shù)據(jù)讀取，XML和XSLT進行數(shù)據(jù)交換與處理，并使用DOM實現(xiàn)動態(tài)顯示和交互，已經(jīng)成為Web開發(fā)的一個里程碑。它的核心技術包括：1．XMLRequest:AJAX的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面)，這一特點主要得益于XML組件XMLRequest對象。這樣就可以向再發(fā)桌面應用程序只同服務器進行數(shù)據(jù)層面的交換，而不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給服務器來做，這樣即減輕了服務器的負擔又加快了響應速度、縮短了用戶等候時間。2．JavaScript:是一種基于對象(object)和事件驅動并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java腳本語言(Java小程序)一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應用程序等。它是通過嵌入或調(diào)入在標準的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇。3.DOM(DoemueniobjectModel):DOM是給HTML和XML文件使用的一組API。它提供了文件的結構表述，讓你可以改變其中的內(nèi)容及可見物。其本質是建立網(wǎng)頁與Script或程序語言溝通的橋梁。所有Web開發(fā)人員可操作及建立文件的屬性、方法及事件都以對象來展現(xiàn)(例如，Docmunet就代表“文件本身”這個對象，Table對象則代表HTML的表格對象等等)。這些對象可以由當今大多數(shù)的瀏覽器以Script來取用。4.CSS:CSS是Web設計沿用已久的部分，無論是在傳統(tǒng)的Wbe應用還是在AJAX應用中，CSS都是一種頻繁使用的技術。樣式表提供了集中定義各種視覺樣式的方法，并且可以非常方便地設置在頁面的元素上。樣式表可以定義一些明顯的樣式元素，例如顏色、邊框、背景圖片、透明度和大小等。此外，樣式表還可以定義元素相互之間的布局以及簡單的用戶交互功能。。圖2.2Ajax關鍵元素圖示由此可以看出，JavaScript就像膠水將各個部分粘合在一起，定義應用的工作流和業(yè)務邏輯。Javascript在Ajax中的作用具體體現(xiàn)在以下幾個方面：2.用Javascript的DOM組織視圖。3.用Javascript中XML技術異步加載數(shù)據(jù)。2.2jQuery簡介前文中已經(jīng)提到，Ajax和傳統(tǒng)的Web交互方式相比，具有無刷新更新數(shù)據(jù)，使用戶操作與服務器響應異步化等優(yōu)勢，但它也有著一些不足：首先，Ajax對瀏覽器兼容性存在差別，實現(xiàn)Ajax時，需要解決瀏覽器兼容性問題，加大開發(fā)成本；其次，缺乏開發(fā)與調(diào)試工具，使得開發(fā)Ajax程序更加困難。此時，JQuery框架應運而生，展現(xiàn)了其在無刷新技術上的優(yōu)勢。jQuery是一個優(yōu)秀的JavaScript庫．是一個由JohnResig創(chuàng)建于2006年1月的開源項目。iQuery憑借簡潔的語法和跨平臺的兼容性。極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax的操作。其獨特而又優(yōu)雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。利用iQuery豐富的函數(shù)庫，可以減少代碼的重復編寫及DOM腳本庫的調(diào)用。而只關注程序邏輯的實現(xiàn)，利用盡可能少的代碼實現(xiàn)想要實現(xiàn)的功能。在Ajax中引入jQuery具有這樣一些優(yōu)勢：（1）代碼簡練、語義易懂、學習快速、文檔豐富；（2）jQuery是一個輕量級的腳本，其代碼非常小巧，最新版的JavaScript包只有20K左右；（3）jQuery支持CSS1-CSS3,以及基本的xPath；（4）jQuery是跨瀏覽器的，它支持的瀏覽器包括IE6.0+,FF1.5+,Safari2.0+,Opera9.0+；（5）可以很容易的為jQuery擴展其他功能；（6）能將JS代碼和HTML代碼完全分離，便于代碼和維護和修改；（7）插件豐富，除了jQuery本身帶有的一些特效外，可以通過插件實現(xiàn)更多功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等。jQuery的使用方法非常簡單。首先到jQuery官方網(wǎng)站（jquery）下載jQuery的最先版本。然后再頁面標簽<head></head>之間加入下面的代碼：<scriptlanguage="javascript"type="text/javascript"src="……/jquery-.min.js"></script>其中，可以替換為不同的jQuery版本（是截至2011年5月16日的最新版本），這樣jQuery在該頁面中就可以使用了。2.3SSH框架簡介Struts2+Spring+Hibernate是目前JavaWeb開發(fā)業(yè)界流行的開源框架技術。為提高系統(tǒng)的開發(fā)效率，使開發(fā)人員更注重于業(yè)務邏輯設計，本系統(tǒng)采用J2EE輕量級框架技術．即Struts，Hibernate和Spring的框架組合。Struts框架是基于MVC(modelvieweontroller)模式的框架，是Apache軟件基金會旗下的Jakarta項目組的一部分，是一個免費開源的Web層的應用框架，在傳統(tǒng)的開發(fā)巾主要采用JSP與Servlet技術實現(xiàn)，把Servlet，JSP及自定義標簽和信息資源整合到一個統(tǒng)一的框架中，關注于控制器的流程而開發(fā)人員只需開發(fā)相應的Action類、ActionFormBean和JSP組件，就可以套用Struts框架，進行項目的開發(fā)。Hibernate框架是一個優(yōu)秀的Java持久層解決方案。是一個對象/關系映射框架。它把對象模型表示的對象映射到基于SQL的關系模型基礎上。在JDBC的方式上進行輕量級對象封裝。同時Hibemate還提供數(shù)據(jù)查詢和獲取數(shù)據(jù)的方法，減少使用SQL和JDBC訪問數(shù)據(jù)庫的時間。Spring框架是在J2EE的基礎上實現(xiàn)的一個輕量級J2EE框架。它服務于所有層面的應用程序，提供了Bean的配置基礎、AOP的支持、JDBC提取框架、抽象事務支持等，它還有效地組織了系統(tǒng)中的中間層對象。消除了組件對象創(chuàng)建與使用耦合緊密的問題。SSH中各層的作用以及相互間的關系如圖2.1所示：圖2.1SSH結構圖第三章SNS網(wǎng)站系統(tǒng)概述SNS交友平臺包括前臺界面和后臺管理兩大模塊，對應互聯(lián)網(wǎng)用戶和系統(tǒng)管理員兩種類型的用戶。前臺包括用戶登錄，注冊，首頁，個人主頁，還有對日志，個人狀態(tài)，相冊，個人收藏，個人資料和好友的管理操作。后臺包括對用戶發(fā)布的內(nèi)容進行查找，刪除等操作，維護和管理系統(tǒng)。產(chǎn)品環(huán)境介紹如圖3.1所示：圖3.1產(chǎn)品環(huán)境拓撲圖3.2系統(tǒng)功能概述功能圖示和描述該系統(tǒng)的軟件功能框架如圖所示：用戶特征：注冊用戶：登錄前臺系統(tǒng)，根據(jù)不同的用戶權限，進行相關的操作。管理員：登錄后臺管理系統(tǒng)，可以對內(nèi)容進行添加、刪除、修改、查找等基本功能，管理、維護網(wǎng)站。（1）用戶通過輸入用戶名、密碼、真實姓名、性別、生日、電子郵箱、驗證碼注冊。這些項目為必填項目，其他的用戶信息可以在注冊登錄以后，從個人資料圖3.2系統(tǒng)功能圖管理模塊中修改。系統(tǒng)檢驗用戶的各項輸入是否合法，如果不合法，彈出提示信息，要求重新填寫。（2）用戶通過輸入用戶名和密碼登陸系統(tǒng)，如果不正確，彈出提示信息，要求重新輸入，如果正確，登錄成功。（1）個人狀態(tài)：用戶可以發(fā)表自己的個人狀態(tài)，顯示在個人主頁上。個人狀態(tài)的格式為中英文、常用字符、可選表情，長度限度為140個字符。（2）個人資料：用戶可以查看、修改個人資料。個人資料包括昵稱、真實姓名、性別、生日、學院、專業(yè)、郵箱、、QQ、愛好、頭像、星座、省份、城市等。（3）留言板：用戶可以查看留言板，在留言板上留言、回復留言。（4）站內(nèi)信：用戶可以寫站內(nèi)信給所有人（包括好友和非好友），也可以以站內(nèi)信的形式回復自己收到的站內(nèi)信。（5）賬號管理：用戶可以在賬號管理功能中修改密碼和停用賬號、恢復使用賬號。3.日志管理：用戶可以發(fā)表日志，編輯日志，查看和刪除日志。4.相冊管理：用戶可以創(chuàng)建、刪除、編輯、查看、分享相冊，管理員可以查看、刪除相冊，創(chuàng)建相冊的目的在于便于統(tǒng)一管理照片資源。5.照片管理：所有照片統(tǒng)一組織在相冊下，用戶可以上傳、刪除、編輯、查看、分享照片，管理員可以查看、刪除照片。6.收藏管理：收藏功能主要展示用戶用于交易的物品，可以為實物用品或者虛擬用品。交易雙方在線上聯(lián)系，線下交易。7.群組管理：群組的目的在于讓興趣愛好相同的用戶能有一個交流的平臺，群組的形式相當于簡化版的論壇。用戶可以創(chuàng)建、解散群組，管理員可以解散群組。8.好友管理：用戶可以向其他用戶申請加為好友，也可以同意別人發(fā)給自己的好友申請。A向B申請加為好友，B同意好友申請，則A和B互相成為對方的好友。9.評論管理：用戶可以評論日志、照片、收藏、帖子，回復評論，也可以刪除自己的評論，管理員可以刪除任何人的評論。10：分享管理：用戶可以分享瀏覽的日志、相冊、照片、收藏、帖子，分享的信息出現(xiàn)在自己以及所有好友的新鮮事中。用戶也可以在我的分享中查看、刪除自己分享過的所有信息。系統(tǒng)界面展示圖3.3系統(tǒng)登錄界面圖3.4系統(tǒng)首頁3.2.3用戶接口本系統(tǒng)基于B/S模式，提供給用戶的操作界面主要有：用戶登錄、注冊頁面（系統(tǒng)首頁），用戶首頁，個人主頁，日志頁面，相冊頁面，收藏頁面，群組頁面，好友頁面。界面能在1024*768的分辨率下很好地顯示，并自動適應其它分辨率的顯示。3.2.4軟件接口操作系統(tǒng)：windowsxp/NT/2000以及以上版本、Linux系統(tǒng)；數(shù)據(jù)庫：MySql；瀏覽器：IE6.0，推薦使用IE6.0或以上版本，或Firefox，chrome等；Web服務器：Tomcat；分辨率：最佳效果1024*768分辨率；開發(fā)工具：MyEclipse+Tomcat+MySql，DreamweaverCS5；開發(fā)語言：JAVA，Javascript；建模工具：RationalRose；圖片處理：AdobePhotoShopCS5。3.2.5系統(tǒng)用例圖系統(tǒng)用例圖如圖3.5所示。3.3系統(tǒng)核心技術系統(tǒng)的前端開發(fā)部分主要采用jQuery框架實現(xiàn)頁面的動態(tài)效果，并采用Ajax技術與服務器進行交互，提供良好的用戶體驗。各子系統(tǒng)中，用戶對好友內(nèi)容的回復，表情插入采用jQuery實現(xiàn)；注冊時，使用引入了jQuery的Ajax技術實現(xiàn)驗證功能；另外，采用jQueryUI中的日歷控件，為用戶提供可視化操作界面，同時方便系統(tǒng)讀取標準的日期格式；在登錄頁面中，使用jQuery實現(xiàn)豐富的動畫效果。下一章將對這些技術的具體實現(xiàn)進行詳細講解。圖3.5系統(tǒng)用例圖

第四章Ajax技術和jQuery在SNS網(wǎng)站前端設計與實現(xiàn)中的運用4.1好友狀態(tài)回復功能在SNS交友平臺中，用戶可以隨時發(fā)布個人狀態(tài)，并顯示在該用戶好友的首頁，好友對其狀態(tài)進行回復，達到和用戶交流的目的。為了提供更活潑的交流方式，回復中可添加表情。這部分功能主要通過JQuery來實現(xiàn)。狀態(tài)回復功能模塊實現(xiàn)思路為了節(jié)省頁面空間，狀態(tài)的回復框在用戶點擊之前為收起狀態(tài)，用戶點擊后展開，根據(jù)用戶的輸入情況顯示已輸入字數(shù)和最大輸入字數(shù)，用戶通過點擊表情按鈕，插入表情，點擊回復按鈕，輸入框中的內(nèi)容即顯示在頁面上。這些功能的實現(xiàn)大致思路為：控制DOM對象中的<textarea>，通過focus()函數(shù)實現(xiàn)展開和收起，通過keyup()事件判斷輸入字數(shù)；通過表情按鈕的onclick()事件，繪制表情面板，將選擇的表情顯示在textarea中；通過submit()函數(shù)將textarea中的內(nèi)容顯示在頁面中。狀態(tài)回復功能模塊具體實現(xiàn)這一功能模塊將box和fb兩個元素放進layout這個塊級元素中，方便迭代，具體每個元素的類名如圖4.1所示：（a）（b）（c）圖4.1狀態(tài)回復功能模塊圖示在圖4.1（a）中可以看到，當用戶尚未點擊輸入框時，恢復按鈕，表情按鈕等均未顯示，而是通過預先顯示“添加回復”字樣對用戶進行提示。當用戶點擊輸入框時，觸發(fā)textarea的focus事件，調(diào)用函數(shù)，將div.box和span.fb顯示出來。核心代碼見附A1。當focus事件被觸發(fā)后，用next（）方法返回textlimit之后的，用show（）函數(shù)將其顯示，再通過，這樣，回復面板就徹底展開了。當用戶點擊回復框時，如果當前textlimit的值為默認title值，則自動清空。如果textlimit失去焦點并且其中沒有內(nèi)容，則用類似的方法調(diào)用blur（）函數(shù)收起回復面板。2.最大字數(shù)的判斷系統(tǒng)對用戶輸入的內(nèi)容限制在140字以內(nèi)，用戶輸入時，系統(tǒng)自動顯示當前輸入字數(shù)。這部分的核心代碼見附A2。每次textlimit的keyup事件被觸發(fā)，則調(diào)用maxLimit函數(shù)。該函數(shù)將輸入框中的字數(shù)顯示在textlimit的下一個同輩節(jié)點的標簽為span的子節(jié)點中。3.插入表情用戶點擊表情按鈕，onclick事件被觸發(fā)，調(diào)用show（）函數(shù)，創(chuàng)建DOM元素，并定義其樣式，繪制出表情面板，再用append函數(shù)將其追加至html文檔中，與此同時用相關函數(shù)控制表情面板的顯示位置。單個表情圖片的顯示，利用for循環(huán)將指定文件夾中的表情樣式添加至表情面板中。值得一提的是，需要用replace函數(shù)將html頁面的表情代碼替換為圖片，以方便顯示在網(wǎng)頁上。functionconvertImg(val){returnval.replace(/\[@/g,"<imgsrc="+faceUrl+"").replace(/\@]/g,".gif/>");;}最后點擊提交按鈕觸發(fā)submit事件，將textlimit中的內(nèi)容通過DOM操作，顯示在頁面上。詳細代碼參見附A3。功能模塊的界面設計評價系統(tǒng)對用戶的輸入控制在140字以內(nèi)，span#textCount的設計對用戶進行實時的提醒，顯示剩余字數(shù)，方便用戶控制輸入，和UI設計原則的suitabilityforthetask和Self-descriptiveness的內(nèi)涵符合。4.2注冊驗證用戶注冊時，需要填寫注冊郵箱，真實姓名，出生年月等信息，這些數(shù)據(jù)屬于必填項目，并需要用戶進行合法輸入。系統(tǒng)實現(xiàn)用戶輸入時的提示和輸入后的驗證。圖4.2展示了注冊部分的順序圖。注冊驗證實現(xiàn)思路當用于鼠標移動到每個輸入框時，通過編寫hover（handlerIn，handlerOut）事件的兩個參數(shù)，即鼠標移動到控件，和移出控件時引發(fā)的函數(shù)，顯示輸入提示。用戶鼠標點擊輸入框外的區(qū)域時，blur事件被觸發(fā)，調(diào)用相關函數(shù)，判斷輸入框中的內(nèi)容是否合法，這里可以采用正則表達式來判斷，如果不合法，通過改變輸入框的樣式進行提示。樣式如圖4.3所示。注冊驗證具體實現(xiàn)在頁面元素input中添加兩個屬性reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"tip="郵箱地址，如wangking717@qq"，reg的值為正則表達式，用來表示該輸入框中的合法輸入，tip屬性的值為輸入提示的內(nèi)容，這兩個參數(shù)在js文件中將被調(diào)用。詳細代碼如附A4所示。圖4.2用戶注冊順序圖通過定位鼠標當前的X軸Y軸位置，得到提示框<p#vtip>的top和left值，用append（）函數(shù)將提示框追加到頁面相應位置。bgiframe（）是jQuery一款插件中提供的函數(shù)，用來解決IE6z-index的問題，如果網(wǎng)頁上有浮動區(qū)塊和下拉選單重疊時，在IE6會看到下拉選框總是把浮動區(qū)塊覆蓋住，無論怎么調(diào)整z-index都是沒用的，而用bgiframe就可以輕松解決這個問題。這樣，無論在那種瀏覽器下，提示總會顯示在最頂層。HandlerOut觸發(fā)的函數(shù)較為簡單，將p#vtip用removeClass函數(shù)去掉即可。圖4.3注冊驗證功能模塊圖示用戶的鼠標在輸入框之外的區(qū)域點擊時，輸入框的blur事件被觸發(fā)，調(diào)用validate函數(shù)，具體代碼見附A4。RegExp是JS的正則表達式對象，有pattern和attribute兩個參數(shù)，參數(shù)

pattern

是一個字符串，指定了正則表達式的模式或其他正則表達式。參數(shù)

attributes

是一個可選的字符串，包含屬性"g"、"i"和"m"，分別用于指定全局匹配、區(qū)分大小寫的匹配和多行匹配。new一個正則表達式對象，傳到pattern參數(shù)中的是輸入框中定義的reg屬性的值，objVallue則是用戶輸入的內(nèi)容，通過test（）函數(shù)判斷二者是否匹配，以此決定change_error_style（obj,msg,action_type）和change_tip（obj,action_type）的action_type參數(shù)的值。這兩個函數(shù)通過判斷action_type的值對obj進行屬性和類的設定和刪除，達到顯示不同效果的目的。在管理員子系統(tǒng)中，添加管理員時系統(tǒng)會檢測新加的管理員的用戶名是否已被占用。新加管理員的form表單的action定義為addAdminAction，通過檢測數(shù)據(jù)庫，判斷用戶輸入是否已經(jīng)存在于數(shù)據(jù)庫中，如果不存在，則將新加的用戶添加到數(shù)據(jù)庫中，實現(xiàn)了和后臺的交互。如圖4.4所示：圖4.4添加管理員功能模塊的界面設計評價在注冊功能模塊中，根據(jù)鼠標停留的區(qū)域給用戶響應的提示，用戶輸入錯誤時，系統(tǒng)給出紅色輸入框的提示，用戶只需再次輸入即可，與errortolerance原則相符合。同時，也避免了系統(tǒng)因為不合法的輸入造成的不可預期的錯誤，降低了系統(tǒng)處理出錯信息的成本。4.3日歷控件系統(tǒng)中有多處地方需要用戶輸入日期，日期的格式多種多樣，為了避免因為格式或者其他誤輸而對后臺處理數(shù)據(jù)所造成影響，本系統(tǒng)提供日歷控件，用戶只用點擊日期，輸入框中即自動填進標準格式的內(nèi)容。本系統(tǒng)采用jQueryUI的datepicker控件，方便快捷地實現(xiàn)了該功能。jQueryUI介紹jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。這套插件具有這樣一些特點：1.簡單易用，繼承jQuery簡易的特性，提供高度抽象接口；2.兼容各主流桌面瀏覽器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+。3.組件間相對獨立，可按需加載，避免浪費帶寬拖慢網(wǎng)頁打開速度。4.提供近20種預設主題，并可自定義多達60項可配置樣式規(guī)則，提供24種背景紋理選擇。使用時，首先在網(wǎng)頁中加載開發(fā)包中jQuery核心庫文件，再按需加載ui.core.js、effects.core.js及各組件代碼文件，如設置可視組件外觀需同時加載CSS主題文件。日歷控件具體使用jQueryUI中這一控件有多種樣式，適應不同需求。例如，年份月份的選擇有默認的逐月選擇模式，適合選擇靠近當前日期的時間，還提供了以下拉方式選擇年份和月份的模式，方便用戶選擇較大范圍內(nèi)的日期，本系統(tǒng)視實際需求使用不同樣式。注冊頁面中，由于用戶需要選擇出生日期，一般距離當前日期時間較久，應采用相應的模式，如圖4.5所示：在頁面的<header>頭部中，添加jquery-.js，，，這些庫文件即可使用datepicker插件。另外，為了使日歷控件的風格和網(wǎng)站整體風格一致，還需引用主題包，在開發(fā)包中加入redmond這一主題包，再引用其css即可：<linkrel="stylesheet"href="./themes/redmond/jquery.ui.all.css"/>使用時，將生日的輸入框id設為datepicker，并在<header>添加如下代碼，即可顯示下拉模式的日歷控件：$(function(){ $("#datepicker").datepicker({ changeMonth:true, changeYear:true }); })圖4.5登陸頁面日歷控件效果默認的datepicker控件可供選擇的年份范圍是10年，在實際運用中不能滿足要求，需要對文件做相應修改。在該文件用來顯示年月下拉框的_generateMonthYearHeader函數(shù)中，將10相應地改為50，下拉框中可供選擇的年份即從1961年開始，基本可以滿足系統(tǒng)目標群體的需求。用戶發(fā)起活動的時候，需要填寫活動開始時間和結束時間，供報名的同學參考，這需要避免用戶誤填導致的錯誤，如結束時間早于開始時間，使用datepicker控件可以很好地避免這一問題。效果如圖4.6所示：圖4.6活動發(fā)起頁面的日歷控件效果控件對當前日期后的三個月給出了展示，方便用戶查看，用戶填寫了開始時間后，選擇結束時間時，開始時間之前的內(nèi)容自動設為不可選狀態(tài)，有效避免了不合法輸入。頁面使用該控件的方法與注冊頁面類似，將開始時間輸入框的id設為from，結束時間的id設為to，并在頭部文件中加入設置顯示月份個數(shù)等的Jquery函數(shù)即可。功能模塊的界面設計評價日歷控件避免了用戶進行錯誤輸入，并且將本來依靠鍵盤輸入的內(nèi)容轉換成可視化的鼠標點擊，更易于使用，并且方便系統(tǒng)數(shù)據(jù)庫錄入數(shù)據(jù)采取統(tǒng)一的格式。時間段選擇的控件可以清晰方便地查看將來日期，這個設計靈感來源于現(xiàn)實生活，用戶在制定計劃時經(jīng)常需要查看日歷，使用系統(tǒng)內(nèi)自帶的日歷無疑比使用系統(tǒng)外如桌面日歷方便許多，在實際使用中具有較大價值。照片展示特效隨著前端技術的快速發(fā)展，網(wǎng)站的風格漸漸多樣化，特別是針對年輕人的網(wǎng)站，更是越來越追求視覺上的美感。jQuery的特點之一就是它提供了豐富的插件，可實現(xiàn)多種功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等，甚至一些許多類似flash的效果都可以實現(xiàn)，又避免了flash需要長時間載入的問題。在SNS社區(qū)中，頭像是展示一個用戶個人風采最直接的手段，用戶在社區(qū)中活動時，也常常通過頭像來辨認好友。為了吸引新用戶注冊，本系統(tǒng)在登陸頁面隨機選取了若干用戶的頭像，用照片墻的形式展示，這樣，尚未注冊的用戶也能領略到系統(tǒng)內(nèi)用戶的風采，增強了注冊的欲望。照片墻采用jQuery插件來實現(xiàn)，效果如圖4.7所示。(a)(b)圖4.7登陸頁面照片墻展示當鼠標移動到照片區(qū)域時，圖片放大，并突出顯示，下方提供用戶名字。照片墻右邊的圖片是一幅空白頭像，等候新用戶注冊，鼠標移動到上面以后，提示“馬上注冊”，點擊即進入注冊頁面，如圖（b）所示。插件中提供zoomer.css和zoomer.js這兩個文件，實現(xiàn)這一效果需要對插件中的代碼做一些修改，以適合本頁面的大小和樣式。所有照片被放在div#container中，用<ul>元素以列表形式展現(xiàn)，通過設置<ul>中<li>元素的float屬性，使其并排排列，通過定義container和每張圖片的尺寸，決定每行顯示的圖片數(shù)量。對尺寸做修改后，每行顯示6張圖片，每張大小為60*60像素。css文件中對圖片定義了一個hover類，決定鼠標懸停時的樣式，js代碼中，采用addClass（）函數(shù)將hover類添加到圖片中，圖片即放大。照片下的用戶名顯示效果通過js中的prepend（）函數(shù)將span#title添加到圖片下方，這一元素的樣式在css文件中已經(jīng)定義。由于對圖片大小進行了修改，對圖片的動畫效果函數(shù)animate（params,[duration],[easing],[callback])）中的相應參數(shù)也應做修改。params這一參數(shù)為一組包含作為動畫屬性和終值的樣式屬性和及其值的集合，如top，width等css常見屬性。在本例中，對照片滑動效果起作用的參數(shù)是marginTop，marginLeft，top，left，width，height和padding七個屬性，通過設定合適的值，實現(xiàn)了較為理想的效果。“YOU”圖片的實現(xiàn)原理和其他照片類似，然而需要注意的是，緊鄰的登陸信息輸入模塊的float值設定為left，會隨著“YOU”圖片的伸縮而浮動，這顯然不是我們預期的效果，解決方法是將“YOU”圖片所在的div#join的寬度設置為定值，稍大于圖片在變化過程中的最大寬度即可。最后，可以通過speedView和speedRemove兩個函數(shù)對圖片的運動速度進行控制。這部分詳細代碼見附A5。第五章總結與展望5.1總結本系統(tǒng)總體框架為Ajax+SSH，Ajax主要用來實現(xiàn)前臺和后臺的交互，在前端的設計和實現(xiàn)方面，主要采用HTML+CSS，使用Javascript作為連接Ajax各部分的腳本語言。具體實現(xiàn)過程中，選取簡潔的輕量級框架jQuery，并利用其豐富的插件，實現(xiàn)美觀大方的視覺效果。前端界面設計方面，本系統(tǒng)努力遵循UI設計的理念，重視UI設計的七個原則，為用戶提供最好的用戶體驗。本文的主要工作為以下幾個方面：1.對項目的互聯(lián)網(wǎng)時代背景做了綜述，重視用戶，突出群體智慧的理念和技術方面的特性，和博客，微博，SNS等應用。接下來簡要概括了SNS網(wǎng)站的功能特點，即自我展示和與好友的互動。然后，本文對web2.0時代前端開發(fā)的作用及其在軟件開發(fā)中的地位做了闡述，前端開發(fā)在整個軟件開發(fā)過程中扮演了重要角色，前端設計應遵循用戶界面設計的基本原則，而實現(xiàn)過程應采用合理而高效的技術。2.重點闡述了本系統(tǒng)不同于其他SNS的性質：以武漢大學學生為主要對象的社區(qū)，利用其現(xiàn)實聯(lián)系，為其提供生活資訊。依托同學的力量將用戶粘住，提高用戶的活躍性，從而反作用于“圈子”，這樣所形成的良性的循環(huán)式發(fā)展。介紹了本系統(tǒng)前端所采用的主要技術，HTML+CSS+JQuery實現(xiàn)頁面布局和視覺效果。另外，本系統(tǒng)采用Ajax技術實現(xiàn)異步數(shù)據(jù)讀取和動態(tài)顯示交互。為了使開發(fā)人員更注重于業(yè)務邏輯設計，系統(tǒng)在后端技術方面采用J2EE輕量級框架技術SSH框架。3.接下來，對本系統(tǒng)的核心技術，如Ajax，jQuery，SSH框架做了闡述。3.本文以系統(tǒng)中各功能模塊為例，對實際效果做了展示詳細，描述了留言回復，表單驗證，日歷控件，特效插件的設計思路和具體實現(xiàn)方法，并結合用戶界面設計原則對各功能進行了評價。設計原則，每部分功能模塊中，均做了評價：在狀態(tài)回復功能模塊中，字數(shù)提醒使得用戶對當前的輸入狀態(tài)一目了然，可以做到心中有數(shù)；注冊驗證模塊中，錯誤提醒功能避免了不必要的錯誤，方便用戶正確而快捷地完成輸入；日歷控件將文字輸入圖形化，更加符合用戶心理，具有可控性。本系統(tǒng)不僅僅將設計局限于視覺效果方面，更多地考慮用戶在使用方面的心理，習慣，經(jīng)驗等多方面特征，以設計出符合目標用戶群體的界面。5.2展望本系統(tǒng)的基本功能雖已實現(xiàn)，但仍有諸多地方需要改進，主要在以下幾個方面：1.照片墻所顯示的用戶應該選取愿意將個人信息公開的用戶，而由于系統(tǒng)在個人設置時并未提供這一選擇，現(xiàn)階段只能在所有用戶中隨機選取。這樣不可避免地涉及到用戶隱私保護的問題，這也是現(xiàn)今SNS網(wǎng)站遇到的共同問題。2.系統(tǒng)設計時，對用戶發(fā)表的狀態(tài)設定為求助，但在用戶發(fā)布時，并未對此做過多的限制。當系統(tǒng)中用戶越來越多，不可避免地造成狀態(tài)內(nèi)容多而雜，而由于SNS社區(qū)的定位本來應該是用戶產(chǎn)生內(nèi)容，管理員不宜對內(nèi)容本身做過多地限制，這使得如何保持本系統(tǒng)最初的生活資訊平臺定位成為需要進一步思考的問題。3.搜索好友的功能不夠細致，由于沒有對好友進行分類標記，系統(tǒng)只能在所有好友中逐個搜索，一旦用戶好友數(shù)增多，無疑降低了系統(tǒng)響應速度，用戶體驗不夠理想。另外，好友搜索功能僅靠一個搜索框實現(xiàn)，并未提供專門的搜索頁面，系統(tǒng)應該根據(jù)好友提供的地點，性別等內(nèi)容所轄搜索范圍，實現(xiàn)組合查詢等高級搜索。以上是對本系統(tǒng)的不足所做的總結和評價，由于自身水平以及用戶規(guī)模和互動性有限，設計之初的一些功能在現(xiàn)階段的系統(tǒng)中并未完全得以體現(xiàn)，需要進一步改進。參考文獻[1]GCormode，B．Krishnamurthy．KeydifferencesbetweenWebl.0andWeb2.0[J]，F(xiàn)irstMonday,13(6)，2008.2，26-56[2]TimO'Reilly.-DesignPatternsandBusinessModelsfortheNextGenerationofSoftware[EB/OL].,2005-9-30[3]Boydd.m.,&Ellison,N.B.Socialnetworksites:Definition,history,andscholarship.JournalofComputer-MediatedCommunication[D].SchoolofInformationUniversityofCalifornia-Berkeley[4]傅路鑌.SNS發(fā)展歷史盤點與后SNS時代剖析[EB/OL].,2010-5-5[5]李剛．Struts2權威指南——基于WebWork核心的MVC開發(fā)[M]．北京：電子工業(yè)出版社，2007：47—86[6]孫衛(wèi)琴．精通Hibernate：Java對象持久化技術詳解[M]．北京：電子工業(yè)出版社．2005：38—69[7]夏昕，曹曉鋼．深入淺出Hibernate[M]．北京：電子工業(yè)出版社．2005：128—139[8]李鐘尉，馮東慶．Spring開發(fā)完全手冊[M]．北京：人民郵電出版社，2007：247—269[9]李剛．輕量級J2EE企業(yè)應用實戰(zhàn)——Struts+Spring+Hibernate整合開發(fā)[M]．北京：電子T業(yè)出版社，2007：312—335[10]梁立新．項目實踐精解：基于Struts-Spring-Hibernate的Java應用開發(fā)[M]．北京：電子工業(yè)出版社，2006：81[11]張賓．基于ASSH框架的J2EE+Web應用于實現(xiàn)[D]．四川：西南交通大學，2008[12]鄧思紅.基于AJAX和SSH集成框架的國有資產(chǎn)管理系統(tǒng)[D].北京：北京化工大學，2010[13]李雋.淺析基于AJAX的頁面無刷新技術[J].中國電子商務，2010.[14]李炳練.基于jQuery框架的無刷新技術設計與實現(xiàn)[J].軟件開發(fā)與設計，2011,6:5,19[15]姚國新.基于Ajax的Web應用技術的研究與實現(xiàn)[D].陜西：西北大學,2006[16]趙博文.基于電子相冊的AJAXJavascript組件的開發(fā)與研究[D].上海：同濟大學軟件學院，2008[17]前沿科技.精通Javscript+jQuery[M].北京：人民郵電出版社，2007[18]單東林，張曉菲，魏然．鋒利的jQuery[M]．北京：人民郵電出版社，2009：35—42[19]李峰，劉彥隆.基于SSH框架與jQuery技術的Java-Web開發(fā)應用[D].科,技情報開發(fā)與經(jīng)濟,2010,20(6):108,117[20]Dr.ReinhardOppermann.User-interfaceDesign[R].Winterthur:InstituteforAppliedInformationTechnology,2010[21]郝燕.Interwoven:打“用戶體驗”短板[J].軟件世界,2007(6):24[22]\o"ISO9241"ISO9241.ErgonomicsofHumanSystemInteraction[S].Geneva:InternationalOrganizationforStandardization,1999[23]Web2.0技術改善用戶體驗[J].RESEARCHESINLIBRARYSCIENCE,2008(12):17-18[24]蘇世杰.利用Ajax改進Web應用的用戶體驗[J].電腦知識與技術,2007(3):13,81

附錄A：各功能模塊核心代碼附A1：狀態(tài)回復字數(shù)統(tǒng)計部分核心代碼functionmaxLimit(){varnum=$(this).val().substr(0,140);$(this).val(num);$(this).next().children("span").text($(this).val().length+"/140");};$(".textlimit").keyup(maxLimit); 附A2：回復面板展開核心代碼$(".textlimit").focus(function(){ varindex=$(this).attr('index');$(this).addClass("#lib_wwwzzjsnet.lib_contentbox_zzjsnet.post.layout.focus").next().show(); varstr_fb=".fb[index='"+index+"']"; $(str_fb).css("display","block"); varstr_emotion=".Emoticons[index='"+index+"']"; $(str_emotion).css("display","block"); if($(this).val()==$(this).attr("title")){$(this).val("");}});附A3：插入表情核心代碼functionshow(index){ newFace("feed"+index).show() }functionhide(index){ removeFace("feed"+index); }functionsubmit(index){ varv=$("#feed"+index).val(); v=convertImg(v);$("#fcontent2").html(v+"<br/>"); $("#feed"+index).val(""); $("#box"+index).css("display","none"); }functionFace(id){this.ojb=$("#"+id);this.oid=id;this.create()}//頭像路徑varfaceUrl="images/emotions/";//定義頭像數(shù)量varfaceNums=55;Ftotype.create=function(){ varoid=this.oid; varmy_face=$("body").find("[name=my_face_"+oid+"]"); varmsg="<style>.faceContent{width:364px;position:absolute;border:1pxsolid#aaa;border-top:none;display:;z-index:9999;text-align:center;padding:3px;padding-bottom:6px;background:#fff;}.faceContentaimg{float:left;cursor:pointer;margin:1px1px;border:#cacaca1pxsolid}.faceContenta:hoverimg{border:1pxsolid#f51d69}#faceTitle{height:22px;width:36px;position:absolute;background:url("+faceUrl+"first.gif)no-repeatcentercenter#fff;border:1pxsolid#aaa;border-bottom:none;'}</style>" msg+="<divclass='faceContent'id='faceContent_"+oid+"'></div>"; if(my_face.length==0){ var_div="<spanname='my_face_"+oid+"'></span>"; $("body").append($(_div).html(msg)); }else{ my_face.html(msg); } $("#faceContent_"+oid).html(""); var_str=""; for(vari=1;i<=faceNums;i++){ varstr=faceUrl+(i-1)+".gif"; _str+="<ahref='javascript:void(0)'><imgsrc="+str+"fn=[@"+(i-1)+"@]/></a>"; } $("#faceContent_"+oid).html(_str);}Ftotype.close=function(id){ if(!id){ $("#my_face_"+this.oid).html(""); }else{ $("#my_face_"+id).html(""); }}functionremoveFace(id){ $("#faceContent_"+id).hide(); $("#my_face_"+id).html("");}//控制表情區(qū)位置Ftotype.show=function(){ varO=this.ojb; varoid=this.oid; vartop=O.offset().top; varleft=O.offset().left; varh=O.height(); $("#faceContent_"+oid).css("top",(top+h)+"px").css("left",left+"px").show(); $("#faceContent_"+oid+"img").unbind("click").bind("click",function(){ var_v=O.val(); _v+=$(this).attr("fn"); O.val(_v); $("#faceContent_"+oid).hide(); });}//重新顯示functionreShow(id){ varO=$("#"+id); vartop=O.offset().top; varleft=O.offset().left; varh=O.height(); $("#faceContent_"+id).css("top",(top+h)+"px").css("left",left+"px");}//替換頁面中的表情代碼為圖片functionconvertImg(val){ returnval.replace(/\[@/g,"<imgsrc="+faceUrl+"").replace(/\@]/g,".gif/>");;}附A4注冊驗證函數(shù)代碼$(function(){ varxOffset=-20;//xdistancefrommousevaryOffset=20;//ydistancefrommouse //inputaction $("[reg],[url]:not([reg]),[tip]").hover( function(e){ if($(this).attr('tip')!=undefined){ vartop=(e.pageY+yOffset); varleft=(e.pageX+xOffset); $('body').append('<pid="vtip">'+$(this).attr('tip')+'</p>'); $('p#vtip').css("top",top+"px").css("left",left+"px"); $('p#vtip').bgiframe(); } }, function(){ if($(this).attr('tip')!=undefined){ $("p#vtip").remove(); } } ).mousemove( function(e){ if($(this).attr('tip')!=undefined){ vartop=(e.pageY+yOffset); varleft=(e.pageX+xOffset); $("p#vtip").css("top",top+"px").css("left",left+"px"); } } ).blur(function(){ if($(this).attr("url")!=undefined){ ajax_validate($(this)); }elseif($(this).attr("reg")!=undefined){ validate($(this)); } }); $("form").submit(function(){ varisSubmit=true; $(this).find("[reg],[url]:not([reg])").each(function(){ if($(this).attr("reg")==undefined){ if(!ajax_validate($(this))){ isSubmit=false; } }else{ if(!validate($(this))){ isSubmit=false; } } }); if(typeof(isExtendsValidate)!="undefined"){ if(isSubmit&&isExtendsValidate){ returnextendsValidate(); } } returnisSubmit; }); });functionvalidate(obj){ varreg=newRegExp(obj.attr("reg")); varobjValue=obj.attr("value"); if(!reg.test(objValue)){ change_error_style(obj,"add"); change_tip(obj,null,"remove"); returnf