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

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

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

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

pattern

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

attributes

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

附錄A：各功能模塊核心代碼附A1：狀態(tài)回復(fù)字?jǐn)?shù)統(tǒng)計(jì)部分核心代碼functionmaxLimit(){varnum=$(this).val().substr(0,140);$(this).val(num);$(this).next().children("span").text($(this).val().length+"/140");};$(".textlimit").keyup(maxLimit); 附A2：回復(fù)面板展開核心代碼$(".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");}//替換頁(yè)面中的表情代碼為圖片functionconvertImg(val){ returnval.replace(/\[@/g,"<imgsrc="+faceUrl+"").replace(/\@]/g,".gif/>");;}附A4注冊(cè)驗(yàn)證函數(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