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