基于Spring的軟件測試專業(yè)網(wǎng)站表現(xiàn)層設(shè)計(jì)論文

PAGEPAGE畢業(yè)設(shè)計(jì)（論文）設(shè)計(jì)（論文）題目：基于Spring的軟件測試專業(yè)網(wǎng)站表現(xiàn)層設(shè)計(jì)與實(shí)現(xiàn) 學(xué)生姓名：學(xué)生學(xué)號： 專業(yè)班級： 指導(dǎo)老師： 系主任（院長）： 年5月27日畢業(yè)設(shè)計(jì)（論文）第42頁基于Spring的軟件測試專業(yè)網(wǎng)站表現(xiàn)層設(shè)計(jì)與實(shí)現(xiàn)摘要隨著軟件產(chǎn)業(yè)的發(fā)展，軟件測試的重要性愈發(fā)突出，本課題就是要建立一個(gè)專業(yè)的軟件測試網(wǎng)站供高校同學(xué)學(xué)習(xí)和交流。本人承擔(dān)的是網(wǎng)站的表現(xiàn)層的設(shè)計(jì)和實(shí)現(xiàn)，主要使用了Ajax技術(shù)。目前，Ajax成為web技術(shù)領(lǐng)域的研究熱點(diǎn)，越來越多的網(wǎng)站采用Ajax技術(shù)，并帶來了良好的反響，如Google。Ajax技術(shù)引入了異步調(diào)用，彌補(bǔ)BS系統(tǒng)用戶體驗(yàn)方面的缺陷。對比Applet,Flash等傳統(tǒng)的web技術(shù)，Ajax不需要專門的軟件支持即可以在大多數(shù)流行瀏覽器中直接使用。Ajax通過XMLHttpRequest對象來發(fā)送異步請求的，用戶不需要等待頁面刷新。Ajax涉及到的關(guān)鍵技術(shù)包括Javascript、XMLHttpRequest、DOM、XML。其中，使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM實(shí)現(xiàn)動態(tài)顯示和交互，使用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進(jìn)行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)。本課題主要關(guān)于在J2EE平臺上整合Ajax應(yīng)用，使用了不刷新、可動態(tài)配置的Tab頁、數(shù)據(jù)聯(lián)動等Ajax技術(shù)。關(guān)鍵詞：Ajax，軟件測試，XMLHttpRequst，Javascript，DOM，數(shù)據(jù)聯(lián)動，Tab頁TheDesignandImplementationofSoftwareTestingWebsitePerformanceLayerBasedontheSpringTechnologyAbstractWiththedevelopmentofthesoftwareindustry,theimportanceofsoftwaretestingisbecomingprominent,Thetaskistoestablishaprofessionalsoftwaretestingsiteforcollegestudentstostudyandexchange.IamresponsiblefortheperformancelevelsforthedesignandrealizationofthemainuseofAjaxtechnology.Currently,Ajaxwebtechnologyasaresearchfocus,agrowingnumberofwebsitesusingAjaxtechnology,andgenerateagoodresponse,suchasGoogle.Ajaxtechnologyintroducestheasynchronouscall,tomakeupforthedefectsoftheBSsystemsinuser’sexperience.ComparedwiththetraditionalAppletandFlashwebtechnology,Ajaxdonotneedspecialsoftwaretosupport,itcanruninthemostpopularbrowsersdirectly.AjaxthroughtheXMLHttpRequestobjecttosendasynchronousrequests.Usersdonotneedtowaitforpagesupdating.AjaxrelatestothekeytechnologiesincludingJavascript,XMLHttpRequest,DOMandXML.Amongthem,XHTMLandCSSareusedtoshowinstandardization,theuseofDOMdisplayandinteractiondynamically,XSTLandXMLareusedtoexchangeandprocessdata,ToperformaasynchronousdatareadingthroughXMLHttpRequestobject,JavaScriptbundledwiththeuseandprocessThetopicisontheJ2EEplatformapplicationintegratedwithAjax,mainlyusetheAjaxtechnologysuchasNoRefreshing,DynamicAllocationoftheTabpages,DataLinkageassoon.Keywords:Ajax,SoftwareTesting,XMLHttpRequst,Javascript,DOM,DataLinkage,TabPages目錄1.緒論 11.1課題背景及來源 11.2課題研究的意義 11.3論文結(jié)構(gòu) 22.軟件測試網(wǎng)站系統(tǒng)說明 32.1軟件測試網(wǎng)站系統(tǒng)需求 32.2軟件測試網(wǎng)站系統(tǒng)設(shè)計(jì) 32.2.1系統(tǒng)概述 32.2.2學(xué)生端 42.2.3管理員端 53.相關(guān)技術(shù)介紹 73.1Ajax定義 73.1.1傳統(tǒng)Web界面的問題 73.1.2什么是Ajax 73.2AjaxWeb應(yīng)用模型 83.3JavaScript 123.4XMLHTTPRequest對象 133.4.1創(chuàng)建XMLHTTPRequest對象 143.4.2XMLHTTPRequest對象的方法 153.3.3XMLHTTPRequest對象的屬性 173.3.4使用XMLHTTPRequest進(jìn)行交互的示例 173.5DOM 183.5.1DOM簡介 183.5.2XMLDOM 193.5.3使用DOM動態(tài)編輯頁面 203.6用CSS定義應(yīng)用的外觀 213.7jQueryTab插件 224.軟件測試網(wǎng)站開發(fā)與實(shí)現(xiàn) 234.1開發(fā)環(huán)境及工具 234.2系統(tǒng)實(shí)現(xiàn) 234.2.1軟件測試網(wǎng)站流程圖 234.2.2軟件測試網(wǎng)站界面實(shí)現(xiàn) 244.2.3登錄的Ajax實(shí)現(xiàn) 324.2.4Tab頁的動態(tài)加載 344.2.5數(shù)據(jù)聯(lián)動 37總結(jié) 39致謝 40參考文獻(xiàn) 411.緒論1.1課題背景及來源作為國家首批35所示范性軟件學(xué)院之一的湖南大學(xué)軟件學(xué)院一直以市場需求為導(dǎo)向，培養(yǎng)具有國際競爭能力的多層次實(shí)用型軟件人才為目標(biāo)。在多年從事軟件測試研究成果的基礎(chǔ)上，結(jié)合工程項(xiàng)目實(shí)際情況和軟件企業(yè)實(shí)際需要，于2004年9月開始在軟件學(xué)院軟件工程本科生及碩士研究生中開設(shè)軟件測試課程。同時(shí)，湖南大學(xué)軟件學(xué)院的幾位老師編寫了《軟件測試技術(shù)與管理》教材。該教材于2006年被國家教育部評為“國家十一五規(guī)劃教材”。為了配合該教材的發(fā)行及教學(xué)，提供一個(gè)專業(yè)的軟件測試技術(shù)網(wǎng)站，供高校同學(xué)們學(xué)習(xí)和交流，這是本項(xiàng)目的初衷。1.2課題研究的意義隨著軟件市場的成熟，人們對軟件作用期望值也越來越高，軟件的質(zhì)量、性能、可靠性等方面也正逐漸成為人們關(guān)注的焦點(diǎn)。目前，中國軟件產(chǎn)業(yè)在產(chǎn)品功能和性能測試領(lǐng)域都存在著嚴(yán)重不足，中國軟件企業(yè)已開始認(rèn)識到，軟件測試的廣度和深度決定了中國軟件企業(yè)的前途命運(yùn)。近期的數(shù)據(jù)顯示，軟件測試工程師已經(jīng)成為2006年最緊缺的人才之一，該類職位的需求主要集中在沿海發(fā)達(dá)城市，其中北京和上海的需求量分別占去了33%和29%；而從企業(yè)分布來看，民企需求量最大，占了19%，外商獨(dú)資歐美類企業(yè)需求排列第二，占了15%。目前，國內(nèi)軟件測試人才緊缺的現(xiàn)狀已經(jīng)凸現(xiàn)出來。在網(wǎng)站的構(gòu)思和設(shè)計(jì)過程中，我們了解到目前全國只有北京和上海建有專業(yè)的軟件測試網(wǎng)站，這些網(wǎng)站的出現(xiàn)給當(dāng)?shù)氐能浖y試人員提供了一個(gè)很好的交流平臺，對測試技術(shù)的發(fā)展和提高起到了一定作用。在長沙，甚至整個(gè)中南地區(qū)都沒有這樣的網(wǎng)站，這在一定程度上限制了該地區(qū)軟件行業(yè)中測試人員的交往，因此在長沙建設(shè)專業(yè)的軟件測試技術(shù)網(wǎng)站是很有意義的，不僅為測試人員提供網(wǎng)上交流平臺，還可以定期舉行活動，讓大家面對面交流，共同提高軟件測試技術(shù)。在本畢業(yè)設(shè)計(jì)項(xiàng)目開發(fā)過程中，通過完整地實(shí)施軟件開發(fā)流程，將軟件工程思想徹底融入項(xiàng)目研發(fā)工作中，達(dá)到了理論與實(shí)踐相結(jié)合的目標(biāo)，具有很重要的意義。本課題是對網(wǎng)站表現(xiàn)層進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)，主要使用的是Ajax技術(shù)，詳盡的介紹將在第二部分加以說明。1.3論文結(jié)構(gòu)緒論部分概要介紹了本畢業(yè)設(shè)計(jì)課題的背景來源以及研究的意義。第二部分介紹了系統(tǒng)的概況，并說明了系統(tǒng)的需求，通過對系統(tǒng)進(jìn)行詳細(xì)分析，介紹了系統(tǒng)的設(shè)計(jì)方案和實(shí)現(xiàn)內(nèi)容。第三部分介紹開發(fā)本課題所涉及到的基本理論知識。第四部分是論文的重點(diǎn)，從第二部分的需求和設(shè)計(jì)出發(fā)，以第三部分介紹到的基本知識為基礎(chǔ)，介紹了系統(tǒng)的具體實(shí)現(xiàn)，并給出給出了相關(guān)界面的圖片和部分功能的實(shí)現(xiàn)過程。第五部分進(jìn)行歸納和總結(jié)。2.軟件測試網(wǎng)站系統(tǒng)說明2.1軟件測試網(wǎng)站系統(tǒng)需求1．軟件測試課程教學(xué)資源和信息發(fā)布；2．學(xué)生作業(yè)提交和答疑及教師解答；3．軟件企業(yè)測試人員信息交流，活動組織；4．軟件測試服務(wù)，包括咨詢，培訓(xùn)等；5．具備靈活的配置的功能，以滿足信息類型的擴(kuò)展和變化。欄目應(yīng)該能夠在后臺管理中靈活調(diào)整，包括：(1)多層次欄目結(jié)構(gòu)支持；(2)欄目的新增、編輯、刪除、移動功能；(3)欄目編輯應(yīng)該能夠設(shè)定欄目的標(biāo)題，設(shè)定欄目內(nèi)容的類型；(4)欄目信息能夠以多種形式展現(xiàn)，如圖片新聞列表等。2.2軟件測試網(wǎng)站系統(tǒng)設(shè)計(jì)2.2.1系統(tǒng)概述本課題主要是關(guān)于軟件測試網(wǎng)站的表現(xiàn)層的設(shè)計(jì)和實(shí)現(xiàn)，主要使用Ajax技術(shù)完成。本系統(tǒng)分為學(xué)生和管理員兩大部分，主要有新聞管理，作業(yè)管理，用戶管理，答疑等模塊。其中本網(wǎng)站的首頁使用AjaxTab效果來顯示多個(gè)欄目，這些欄目可以動態(tài)配置，具體實(shí)現(xiàn)會在第四部分詳細(xì)介紹。用戶可以從首頁登錄，登錄成功后，如果是學(xué)生，則進(jìn)入學(xué)生后臺頁面；如果是管理員，則進(jìn)入管理員的后臺頁面。軟件測試網(wǎng)站軟件測試網(wǎng)站學(xué)生部分管理員部分圖2-1系統(tǒng)兩大部分示意圖答疑解惑答疑解惑新聞管理作業(yè)管理用戶管理軟件測試網(wǎng)站圖2-2軟件測試網(wǎng)站模塊示意圖2.2.2學(xué)生端當(dāng)學(xué)生用戶成功登錄后，會進(jìn)入到學(xué)生端的管理頁面。學(xué)生主要有查看和修改個(gè)人信息，查看和提交作業(yè)，查看問題和提出問題，密碼管理，登錄控制這些功能。學(xué)生端學(xué)生端查看/修改個(gè)人信息查看/提交作業(yè)查看/提出問題密碼管理登錄控制圖2-3學(xué)生端功能示意圖整個(gè)學(xué)生端管理頁面擬采用框架實(shí)現(xiàn)，左邊的框架列出學(xué)生的所有功能，當(dāng)學(xué)生點(diǎn)擊某功能時(shí)，會在右邊的框架中顯示出對應(yīng)于此功能的操作頁面。(1)查看/修改個(gè)人信息：用戶登陸后，可以點(diǎn)擊查看個(gè)人信息查看自己的個(gè)人資料，如發(fā)現(xiàn)不符的地方，可以點(diǎn)擊修改個(gè)人信息修改個(gè)人資料。(2)查看/提交作業(yè)：用戶登陸后，點(diǎn)擊查看作業(yè)，可以看到作業(yè)列表，點(diǎn)擊其中一個(gè)就會進(jìn)入該作業(yè)的詳細(xì)信息，會看到作業(yè)的名稱，作業(yè)的介紹，作業(yè)狀態(tài)。如果未交，則可以點(diǎn)擊下載鏈接下載該作業(yè)，如果已交，則可下載已交的作業(yè)文件。下方的上傳按鈕可以上傳作業(yè)，如果多次上傳作業(yè)，則以最后一次提交的作業(yè)為準(zhǔn)。(3)查看/提出問題：用戶登錄后，點(diǎn)擊查看問題，出現(xiàn)問題列表，點(diǎn)擊其中一個(gè)，可以看到問題的相關(guān)回復(fù)。點(diǎn)擊提出問題，用戶可以提出問題，管理員負(fù)責(zé)對問題的解答。(4)密碼管理：用戶可以修改自己的密碼。(5)登錄控制：用戶可以退出登錄或進(jìn)入網(wǎng)站首頁。2.2.3管理員端當(dāng)管理員用戶成功登錄后，會進(jìn)入到管理員端的管理頁面。管理員主要有查看用戶信息/添加/刪除用戶，查看/發(fā)布/刪除新聞，發(fā)布/查看/刪除作業(yè)，查看/刪除問題，登錄控制這些功能。管理員端管理員端查看用戶信息/添加/刪除用戶查看/發(fā)布/刪除新聞發(fā)布/查看/刪除作業(yè)查看/刪除問題登錄控制圖2-4管理員端功能示意圖整個(gè)管理員端管理頁面擬采用框架實(shí)現(xiàn)，左邊的框架列出管理員的所有功能，當(dāng)管理員點(diǎn)擊某功能時(shí)，會在右邊的框架中顯示出對應(yīng)于此功能的操作頁面。(1)查看用戶信息/添加/刪除用戶：管理員點(diǎn)擊查看用戶信息，在輸入框中輸入用戶ID就會看到該用戶的詳細(xì)信息。點(diǎn)擊添加用戶，輸入用戶的各項(xiàng)信息后點(diǎn)擊添加就可以添加一個(gè)用戶，刪除用戶時(shí)只需輸入用戶ID并點(diǎn)擊刪除就可完成用戶的刪除。(2)查看/發(fā)布/刪除新聞：用戶點(diǎn)擊查看新聞，在下拉框中選擇新聞?lì)悇e，就會該類別所有新聞的列表，點(diǎn)擊其中一個(gè)，就會進(jìn)入該新聞的詳細(xì)信息的頁面。點(diǎn)擊發(fā)布新聞，輸入相關(guān)信息后，點(diǎn)擊發(fā)布，就可以添加一條新聞，你可以在網(wǎng)站首頁的相應(yīng)新聞?lì)悇e中看到該新聞。點(diǎn)擊刪除新聞，在這里擬采用數(shù)據(jù)聯(lián)動技術(shù)，當(dāng)用戶選擇一個(gè)新聞?lì)悇e，該類別的新聞自動加載到新聞標(biāo)題下拉框，當(dāng)用戶選擇一個(gè)新聞標(biāo)題，在下面顯示出該新聞的內(nèi)容，用戶點(diǎn)擊刪除按鈕就可刪除該條新聞。(3)發(fā)布/查看/刪除作業(yè)：用戶點(diǎn)擊查看作業(yè)，出現(xiàn)作業(yè)列表，點(diǎn)擊其中一個(gè)，進(jìn)入該作業(yè)詳細(xì)信息頁面。點(diǎn)擊發(fā)布作業(yè)，輸入作業(yè)的相關(guān)信息后，點(diǎn)擊上傳作業(yè)，將作業(yè)文件上傳，就可添加一個(gè)作業(yè)。單擊刪除作業(yè)，輸入作業(yè)名稱，點(diǎn)擊刪除就可刪除該作業(yè)。(4)查看/刪除問題：用戶點(diǎn)擊查看問題，出現(xiàn)問題列表，點(diǎn)擊任意一個(gè)，進(jìn)入問題回復(fù)頁面，可以看到關(guān)于該問題的相關(guān)回復(fù)，在快速回復(fù)中輸入想要回復(fù)的內(nèi)容，點(diǎn)擊回復(fù)，便可完成對該問題的回復(fù)。點(diǎn)擊刪除問題，輸入問題名稱，點(diǎn)擊刪除，便可刪除該問題。(5)登錄控制：用戶可以退出登錄或進(jìn)入網(wǎng)站首頁。3.相關(guān)技術(shù)介紹3.1Ajax定義3.1.1傳統(tǒng)Web界面的問題目前編寫應(yīng)用程序有兩種基本的選擇:桌面應(yīng)用程序和Web應(yīng)用程序，兩者是類似的。桌面應(yīng)用程序通常以CD為介質(zhì)(有時(shí)候可從網(wǎng)站下載)并完全安裝到客戶的計(jì)算機(jī)上。桌面應(yīng)用程序可以使用互聯(lián)網(wǎng)下載更新，但運(yùn)行這些應(yīng)用程序的代碼在桌面計(jì)算機(jī)上。Web應(yīng)用程序運(yùn)行在某處的Web服務(wù)器上，要通過Web瀏覽器訪問這種應(yīng)用程序。比這些應(yīng)用程序的運(yùn)行代碼放在何處更重要的是，應(yīng)用程序如何運(yùn)轉(zhuǎn)以及如何與其進(jìn)行交互。桌面應(yīng)用程序一般很快(就在本地的計(jì)算機(jī)上運(yùn)行，不用等待互聯(lián)網(wǎng)連接)，具有漂亮的用戶界面(通常和操作系統(tǒng)有關(guān))和非凡的動態(tài)性?？梢詥螕簟⑦x擇、輸入、打開菜單和子菜單、到處巡游，基本上不需要等待。另一方面，Web應(yīng)用程序是最新的潮流，它們提供了在桌面上不能實(shí)現(xiàn)的服務(wù)(比如A和eBay)。但是，伴隨著Web的強(qiáng)大而出現(xiàn)的是等待，等待服務(wù)器響應(yīng)、等待屏幕刷新、等待請求返回和生成新的頁面。Ajax(AsynchronousJavaScriptandXML)嘗試建立桌面應(yīng)用程序的功能和交互，是與不斷更新的Web應(yīng)用程序之間的橋梁?？梢允褂孟褡烂鎽?yīng)用程序中常見的動態(tài)用戶界面和漂亮的控件。3.1.2什么是Ajax要找出誰首先發(fā)明了Ajax，總免不了一場爭論，不過有一點(diǎn)是可以確定的，2005年2月，AdaptivePath的JesseJamesGarrett最早創(chuàng)造了這個(gè)詞。在他的文章Ajax：ANewApproachtoWebApplications中，Garrett討論了如何消除胖客戶應(yīng)用和瘦客戶應(yīng)用之間的界限。在Garrett的總結(jié)中，Ajax包括以下5個(gè)部分[1];[2];[3]：(1)基于標(biāo)準(zhǔn)的表示技術(shù)，使用XHTML和CSS；(2)動態(tài)顯示與交互技術(shù)，使用DOM（文檔對象模型）；(3)數(shù)據(jù)互換與操作技術(shù)，使用XML和XSLT；(4)異步數(shù)據(jù)獲取技術(shù)，使用XmlHttpRequest；(5)使用javascript將以上的一切結(jié)合在一起。下圖展示了Ajax四個(gè)對象的結(jié)合[2]：圖3-1Ajax的四個(gè)組成部分雖然Ajax所需的基礎(chǔ)架構(gòu)己經(jīng)出現(xiàn)了一段時(shí)間，但直到最近異步請求的真正威力才得到利用。能夠擁有一個(gè)響應(yīng)極其靈敏的Web站點(diǎn)，讓最終用戶擁有更好的界面體驗(yàn)。通常，在J2EE中，開發(fā)人員過于關(guān)注服務(wù)和持久性層的開發(fā)，以至于用戶界面的可用性已經(jīng)落后。在一個(gè)典型的J2EE開發(fā)周期中，常常會忽略用戶的體驗(yàn)，因?yàn)橐呀?jīng)在服務(wù)端花費(fèi)太多的時(shí)間，Backpack,GoogleSuggest,GoogleMaps站點(diǎn)證明，這些理由是不成立的。所有這些Web站點(diǎn)都顯示W(wǎng)eb應(yīng)用程序不必完全依賴于從服務(wù)器重新載入頁面來向用戶呈現(xiàn)更改。簡而言之，在涉及到用戶界面的響應(yīng)靈敏度時(shí)，基準(zhǔn)設(shè)得更高了。3.2AjaxWeb應(yīng)用模型Ajax不是一種技術(shù)，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。它包含基于XHTML和CSS標(biāo)準(zhǔn)的表示;使用DocumentObjectModel進(jìn)行動態(tài)顯示和交互;使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信;使用JavaScript綁定一切。Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提勿等待/重新顯示范例，用戶的動作總是與服務(wù)器的“思考時(shí)間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax，可以在用戶單擊按鈕時(shí)，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當(dāng)請求返回時(shí)，就可以使用JavaScript和CSS來相應(yīng)地更新UI，而不是刷新整個(gè)頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信:Web站點(diǎn)看起來是即時(shí)響應(yīng)的。那么Ajax技術(shù)與傳統(tǒng)Web應(yīng)用程序有什么區(qū)別呢？下面我將詳細(xì)說明[3]。圖3-2傳統(tǒng)Web應(yīng)用程序模型圖3-3傳統(tǒng)Web應(yīng)用程序的同步模型上面的兩幅圖展示了傳統(tǒng)Web應(yīng)用程序的模型，從圖中可以看出傳統(tǒng)Web應(yīng)用程序，用戶體驗(yàn)是割裂的，整個(gè)流程是點(diǎn)擊等待看到新的頁面再點(diǎn)擊再等待，也就是我們通常所說的同步(synchronous)。圖3-4AjaxWeb應(yīng)用程序模型圖3-5AjaxWeb應(yīng)用程序的異步模型上面的兩幅圖是采用Ajax技術(shù)的Web應(yīng)用程序模型[3]，從中可以看出Ajax帶來的改變主要是異步，大部分的計(jì)算工作，在用戶不覺察的情況下，交由服務(wù)器完成，沒有空白的屏幕，沒有令人心煩的旋轉(zhuǎn)地球，沒有虛假的下載百分比進(jìn)度條。用戶可以不必在黑夜與白天之間穿行，只需要安心的坐在瀏覽器前。AJAX與傳統(tǒng)模式的不同，它通過在用戶和服務(wù)器之間引入一個(gè)AJAX引擎，消除了Web的“開始一停止一開始一停止”的交互過程，使它響應(yīng)更靈敏。在會話的開始，瀏覽器加載了一個(gè)AJAX引擎，這是采用Javascript編寫的程序，通常在一個(gè)隱藏frame中。這個(gè)引擎負(fù)責(zé)繪制用戶界面以及與服務(wù)器端通訊。通過這個(gè)引擎，AJAX允許用異步的方式實(shí)現(xiàn)用戶與程序的交互，從而當(dāng)瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)請求時(shí)，不用等待服務(wù)器的通訊反應(yīng)，所以用戶不用打開一個(gè)空白窗口，看到等待光標(biāo)不斷的轉(zhuǎn)，等待服務(wù)器完成后再響應(yīng)。使用AJAX，可以為ISP、開發(fā)人員、終端用戶帶來可見的便捷:(1)無刷新更新頁面，減少用戶心理和實(shí)際的等待時(shí)間。特別的，當(dāng)要讀取大量的數(shù)據(jù)的時(shí)候，不用像ReIoad那樣出現(xiàn)白屏的情況，AJAX使用XMLHTTPRequest對象發(fā)送請求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁面的情況下用Javascript操作OOM最終更新頁面。所以在讀取數(shù)據(jù)的過程中，用戶所面對的不是白屏，是原來的頁面內(nèi)容(也可以加一個(gè)Loading的提示框讓用戶知道處于讀取數(shù)據(jù)過程)，只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新是瞬間的，用戶幾乎感覺不到，帶來了更好的用戶體驗(yàn)。(2)減輕服務(wù)器的負(fù)擔(dān)。AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。同時(shí)，AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。(3)具有良好的集成性，可以調(diào)用外部數(shù)據(jù)，同時(shí)，基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，AJAX不需要下載插件或者小程序就能支持豐富的用戶交互功能。(4)程序框架清晰，進(jìn)一步促進(jìn)頁面呈現(xiàn)和數(shù)據(jù)的分離。下面再來介紹Ajax的各個(gè)組成部分。3.3JavaScriptJavaScript是一種基于對象(Object)和事件驅(qū)動(EventDriven)并具有安全性能的腳本語言。使用它的目的是與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折衷的選擇，具有以下幾個(gè)基本特點(diǎn)[17]：(1)是一種腳本編寫語言JavaScript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個(gè)易的開發(fā)過程。

它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。

(2)基于對象的語言

JavaScript是一種基于對象的語言，同時(shí)以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

(3)簡單性

JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計(jì),從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

(4)安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

(5)動態(tài)性

JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(HomePage)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。

(6)跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。

實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個(gè)字處理軟件和一個(gè)瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。綜上所述JavaScript是一種新的描述語言，它可以被嵌入到HTML的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應(yīng)用程式所處理。在項(xiàng)目中使用JavaScript代碼與服務(wù)器進(jìn)行交互。3.4XMLHTTPRequest對象XMLHTTPRequest對象可以說是Ajax中最關(guān)鍵的組成部分，它是AjaxWeb應(yīng)用程序能夠區(qū)別于傳統(tǒng)Web應(yīng)用程序之所在，它實(shí)現(xiàn)了Ajax的異步特性。在本項(xiàng)目中，凡是涉及到與服務(wù)器進(jìn)行交互的地方，幾乎都使用到了該對象。XmlHttpRequest對象最初是在IE5中以ActiveX組件的形式出現(xiàn)的。直到最近，Mozilla1.0和Safari1.2把它采用為事實(shí)上的標(biāo)準(zhǔn)。注意XmlHttpRequest并不是W3C標(biāo)準(zhǔn)，所以在不同的瀏覽器上的表現(xiàn)也有所區(qū)別，不過大多數(shù)的方法和屬性都得到了廣泛的支持。目前。FireFox，safari，opera和IE都以類似的方式實(shí)現(xiàn)了XmlHttpRequest對象的行為。3.4.1創(chuàng)建XMLHTTPRequest對象在使用XMLHTTPRequest對象發(fā)送請求和處理響應(yīng)之前，必須先用JavaScript創(chuàng)建一個(gè)XMLHTTPRequest對象。由于XMLHTTPRequest不是一個(gè)W3C標(biāo)準(zhǔn)，所以可以采用多種方法使用JavaScript來創(chuàng)建XMLHTTPRequest對象的實(shí)例。IE把XMLHTTPRequest實(shí)現(xiàn)為一個(gè)Activex對象，其他瀏覽器（如Firerox、Safari和Opera）把它實(shí)現(xiàn)為一個(gè)本地Javascript對象。由于存在這些差別，Javascript代碼中必須包含有關(guān)的邏輯，從而使用Activex技術(shù)或者使用本地Javascript對象技術(shù)來創(chuàng)建XMLHTTPRequest的一個(gè)實(shí)例。很多人可能還記得從前的那段日子，那時(shí)不同瀏覽器上的Javascript實(shí)現(xiàn)簡直千差萬別，聽了上面這段話之后．這些人可能又會不寒而栗。幸運(yùn)的是，在這里為了明確該如何創(chuàng)建XMLHTTPRequest對象的實(shí)例．并不需要那么詳細(xì)地編寫代碼來區(qū)別瀏覽器類型。你要做的只是檢查瀏覽器是否提供對Activex對象的支持。如果瀏覽器支持Activex對象．就可以使用Activex來創(chuàng)建XMLHTTPRequest對象。否則，就要使用本地Javascript對象技術(shù)來創(chuàng)建。下面是一段創(chuàng)建針對不同瀏覽器的XMLHTTPRequest對象的Javascript代碼[1]。//聲明一個(gè)XMLHTTPRequest對象varxmlHttp;//創(chuàng)建一個(gè)XMLHTTPRequest對象的函數(shù)functioncreateXMLHttpRequest(){if(window.ActiveXObject){//創(chuàng)建針對IE的XMLHTTPRequest對象xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){//創(chuàng)建針對非IE的XMLHTTPRequest對象xmlHttp=newXMLHttpRequest();}}上面的這段代碼展示了如何創(chuàng)建一個(gè)可用于多個(gè)瀏覽器的XMLHTTPRequest對象的Javascript代碼。我已對面代碼加入了注釋，可以很清楚的看出XMLHTTPRequest對象是如何被創(chuàng)建的?？梢钥吹?，創(chuàng)建XMLHTTPRequest對象相當(dāng)容易。首先，要?jiǎng)?chuàng)建一個(gè)全局作用域變量xmlHttp來保存這個(gè)對象的引用。createXMLHttpRequest方法完成創(chuàng)建XMLHTTPRequest實(shí)例的具體工作。這個(gè)方法中只有簡單的分支邏輯(選擇邏輯)來確定如何創(chuàng)建對象。對window.ActivexObject的調(diào)用會返回一個(gè)對象，也可能返回null，if語句會把調(diào)用返同的結(jié)果看作是true或false(如果返回對象則為true，返回null則為false)，以此指示瀏覽器是否支持Activex控件，相應(yīng)地得知瀏覽器是不是IE。如果確實(shí)是，則通過實(shí)例化ActivexObject的一個(gè)新實(shí)例來創(chuàng)建XMLHTTPRequest對象．并傳入一個(gè)串指示要?jiǎng)?chuàng)建何種類型的Activex對象。在!這個(gè)例子中．為構(gòu)造函數(shù)提供的字符串是Microsoft。XMLHTTP，這說明你想創(chuàng)建XMLHTTPRequest的一個(gè)實(shí)例。如果window.ActiveXObject調(diào)用失敗(返同null)，Javascript就會轉(zhuǎn)到else語句分支，確定瀏覽器是否把XMLHTTPRequest實(shí)現(xiàn)為一個(gè)本地Javascript對象，如果存在window.XMLHTTPRequest，就會創(chuàng)建XMLHTTPRequest的一個(gè)實(shí)例。由于Javascript具有動態(tài)類型特性，而且XMLHTTPRequest在不同瀏覽器上的實(shí)現(xiàn)是兼容的，所以可以用同樣的方式訪問XMLHTTPRequest實(shí)例的屬性和方法．而不論這個(gè)空例創(chuàng)建的方法是什么。這就大大簡化了開發(fā)過程。而且在Javascript中也不必編寫特定于瀏覽器的邏輯。3.4.2XMLHTTPRequest對象的方法XMLHTTPRequest對象有一些典型的方法供我們使用，下圖是XMLHTTPRequest的標(biāo)準(zhǔn)操作[3];[5];[6];[7]。圖3-6XMLHTTPRequest的標(biāo)準(zhǔn)操作下面來更詳細(xì)地討論這些方法：voidopen(Stringmethod,Stringurl,booleanasynch,Stringusername,Stringpassword)：這個(gè)方法會建立對服務(wù)器的調(diào)用。這是初始化一個(gè)請求的純腳本方法。它有兩個(gè)必要的參數(shù)，還有3個(gè)可選參數(shù)。要提供調(diào)用的特定方法(GET、POST或Put)。還要提供所調(diào)用資源的URL。另外還可傳傳遞個(gè)Boolean值，指示這個(gè)調(diào)用是異步的還是同步的。默認(rèn)值為true，表示請求本質(zhì)上是異步的。如果這個(gè)參數(shù)為false．處理就會等特。直到從服務(wù)器返回響應(yīng)為止。由于異步調(diào)用是使用Ajax的主要優(yōu)勢之一，所以倘若將這個(gè)參數(shù)設(shè)置為false．從某種程度上講與使用XMLHTTPRequest對象的初衷不太相符。不過，前面己經(jīng)說過，在某些情況下這個(gè)參數(shù)設(shè)置為false也是有用的，比如在持久存儲面面之前可以先驗(yàn)證用戶的輸入。最后兩個(gè)參數(shù)不說自明，允許你指定一個(gè)特定的用戶名和密碼。voidsend(conent)：這個(gè)方法具件向服務(wù)器發(fā)求，如果請求聲明為異步的，這個(gè)方法就會立即返回，否則它會等待直到接收到響應(yīng)為止?？蛇x參數(shù)可以是DOM對象的實(shí)例、輸入流，或者串。傳入這個(gè)方法的內(nèi)容會作為請求體的一部分發(fā)送。voidsetRequestHeader(stringheader，stringvalue)：這個(gè)方法為HTTP請求中一個(gè)給定的首部設(shè)置值。它育兩個(gè)參數(shù)，第一個(gè)串表示要設(shè)置的苜部，第二個(gè)串表示要在首部中放置的值。需要說明，這個(gè)方法必須在調(diào)用open()后才能調(diào)用。在所有這些方法中．最有可能用到的就是open()和send()。XMLHTTPRequest對象還有許多屬性，在設(shè)計(jì)Ajax交互時(shí)這些屬性非常有用。vodabort()：顧名思義。這個(gè)方法就是要停止請求。StringgetAllResponseHeaders()：這個(gè)方法的核心功能對Web應(yīng)用開發(fā)人員應(yīng)該很熟悉了，它返回一個(gè)串，其中包含HTTP請求的所有響應(yīng)首部，首部包括Content–length、Date和URI。

StringgetResponseHeader(stringheader)：這個(gè)方法與getAllResponseHeaders()是對應(yīng)的．不過它有一個(gè)參數(shù)表示你希望得到的指定首部值，并且把這個(gè)值作為串返回。3.3.3XMLHTTPRequest對象的屬性XMLHTTPRequest對象除了一些典型的方法以外，還有一些屬性，下圖就是XMLHTTPRequest的屬性[3]。圖3-7XMLHTTPRequest的標(biāo)準(zhǔn)屬性從上面的圖中可以很清楚的看出XMLHTTPRequest的各個(gè)屬性的含義。3.3.4使用XMLHTTPRequest進(jìn)行交互的示例下面的一張圖描述了XMLHTTPRequest如何接受請求和處理響應(yīng)的[2]：圖3-8標(biāo)準(zhǔn)Ajax交互模型從上圖中，可以看到Ajax交互的整個(gè)流程[12];[13]：客戶端觸發(fā)了一個(gè)Ajax事件；創(chuàng)建了一個(gè)XMLHTTPRequest對象實(shí)例；向服務(wù)器發(fā)送請求；服務(wù)器訪問數(shù)據(jù)庫；請求返回瀏覽器；XMLHTTPRequest調(diào)用回調(diào)函數(shù)callback()。以上就是使用XMLHTTPRequest進(jìn)行異步訪問的整個(gè)流程。3.5DOM3.5.1DOM簡介DOM的全稱是DocumentObjectModel，也即文檔對象模型，是一個(gè)W3C規(guī)約，可以以一種獨(dú)立于平臺和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。DOM是表示和處理一個(gè)XML或HTML的常用方法。DOM實(shí)際上是以面向?qū)ο蠓绞矫枋龅膶ο竽Ｐ?，可以把DOM認(rèn)為是頁面上數(shù)據(jù)和結(jié)構(gòu)的一個(gè)樹形表示。下面是一個(gè)HTML文檔的DOM樹示例[3]：圖3-9DOM眼中的HTML文檔作為W3C的標(biāo)準(zhǔn)接口規(guī)范，目前，DOM由三部分組成，包括：核心（core）、HTML和XML。核心部分是結(jié)構(gòu)化文檔比較底層對象的集合，這一部分所定義的對象已經(jīng)完全可以表達(dá)出任何HTML和XML文檔中的數(shù)據(jù)了。HTML接口和XML接口兩部分則是專為操作具體的HTML文檔和XML文檔所提供的高級接口，使對這兩類文件的操作更加方便。

目前，DOM有兩個(gè)版本，一個(gè)是由W3C于1998年8月18日通過的DOMLevel1，另一個(gè)則是正在制定過程中的DOMLevel2，W3C已于2000年3月7日通過了DOMLevel2的候選推薦版本。3.5.2XMLDOMDOM接口提供了一種通過分層對象模型來訪問XML文檔信息的方式，這些分層對象模型依據(jù)XML的文檔結(jié)構(gòu)形成了一棵節(jié)點(diǎn)樹。無論XML文檔中所描述的是什么類型的信息，即便是制表數(shù)據(jù)、項(xiàng)目列表或一個(gè)文檔，利用DOM所生成的模型都是節(jié)點(diǎn)樹的形式。也就是說，DOM強(qiáng)制使用樹模型來訪問XML文檔中的信息。由于XML本質(zhì)上就是一種分層結(jié)構(gòu)，所以這種描述方法是相當(dāng)有效的。

對于XML應(yīng)用開發(fā)來說，DOM就是一個(gè)對象化的XML數(shù)據(jù)接口，一個(gè)與語言無關(guān)、與平臺無關(guān)的標(biāo)準(zhǔn)接口規(guī)范。它定義了HTML文檔和XML文檔的邏輯結(jié)構(gòu)，給出了一種訪問和處理HTML文檔和XML文檔的方法。利用DOM，程序開發(fā)人員可以動態(tài)地創(chuàng)建文檔，遍歷文檔結(jié)構(gòu)，添加、修改、刪除文檔內(nèi)容，改變文檔的顯示方式等等?？梢赃@樣說，文檔代表的是數(shù)據(jù)，而DOM則代表了如何去處理這些數(shù)據(jù)。無論是在瀏覽器里還是在瀏覽器外，無論是在服務(wù)器上還是在客戶端，只要有用到XML的地方，就會碰到對DOM的應(yīng)用。本項(xiàng)目中也經(jīng)常使用DOM處理XML。使用DOM處理XML有一些相應(yīng)的屬性和方法，下表就給出了這些屬性和方法的名稱和描述[1]。表3-1DOM處理XML的屬性屬性名描述childNodes返回當(dāng)請?jiān)厮袆t元素色數(shù)組firstChild返回當(dāng)前元素的第一個(gè)下級子元素lastChild返回當(dāng)前元素的最后一個(gè)子元素nextSibling返回緊跟在當(dāng)前元素后面的元素nodeValue制定表示元素值的讀/寫屬性parentNode返回元素的父節(jié)點(diǎn)previousSibling返回緊鄰當(dāng)前元素之前的元素表3-2DOM處理XML的方法方法名描述getElementById(id)(document)獲取有指定惟一ID屬性值文檔中的元素getElementsByTagName(name)返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組hasChildNodes()返回一個(gè)布爾值，指定元素是否有子元素getAttribute(name)返回元素的屬性值，屬性由name指定3.5.3使用DOM動態(tài)編輯頁面使用DOM動態(tài)編輯頁面也就是說使用DOM來改變HTML文檔的結(jié)構(gòu)。HTMLDOM是HTMLDocumentObjectModel(文檔對象模型)的縮寫，HTMLDOM則是專門適用與HTML/XHTML的文檔對象模型。熟悉軟件開發(fā)的人員可以將HTMLDOM理解為網(wǎng)頁的API。它將網(wǎng)頁中的各個(gè)元素都看作一個(gè)個(gè)對象，從而使網(wǎng)頁中的元素也可以被計(jì)算機(jī)語言獲取或者編輯。例如Javascript就可以利用HTMLDOM動態(tài)的修改網(wǎng)頁。同樣，使用HTMLDOM也有相對應(yīng)的屬性和方法，下表就是這些屬性和方法的名稱和描述[1]。屬性/方法描述document.createElement(tagName)創(chuàng)建由tagName指定的元素。Document.createTextNode(text)創(chuàng)建一個(gè)包含靜態(tài)文本的節(jié)點(diǎn)。<element>.appendChild(childNode)將指定的節(jié)點(diǎn)增加到當(dāng)前元素的子節(jié)點(diǎn)列表(作為一個(gè)新的子節(jié)點(diǎn))<element>.getAttribute(name)獲取元素中name屬性的值<element>.setAttribute(name,value)設(shè)置元素中name屬性的值<element>.insertBefore(newNode,targetNode)將newNode節(jié)點(diǎn)作為當(dāng)前元素的子節(jié)點(diǎn)插到targetNode元素前面。<element>.removeAttribute(name)從元素中刪除屬性name<element>.removeChild(childNode)從元素中刪除子元素childNode<element>.replaceChild(newNode,oldNode)將oldNode節(jié)點(diǎn)替換為newNode節(jié)點(diǎn)<element>.hasChildnodes()返回一個(gè)布爾值，指示元素是否有子元素表3-3DOM動態(tài)編輯頁面的方法和屬性總之，使用DOM可以方便的操作XML文檔和改變文檔的結(jié)構(gòu)，它是Ajax的重要組成部分之一，沒有DOM，Ajax中最有意思的那部分也許就不會出現(xiàn)。3.6用CSS定義應(yīng)用的外觀CSS是Web設(shè)計(jì)沿用已久的部分，無論是在傳統(tǒng)的Web應(yīng)用還是在Ajax應(yīng)用中，CSS都是一種頻繁使用的技術(shù)。樣式表提供了集中定義各種視覺樣式的方法，并且可以非常方使地設(shè)置在頁而的元索上，樣式表可以定義一些明顯的樣式元素．例如頗色、邊框、背景圖片、透明度和大小等。此外，樣式表還可以定義元素相互之間的布局以及簡單的用戶交互功能，僅僅通過樣式表就可以實(shí)現(xiàn)眩目的視覺效果。在傳統(tǒng)的Web應(yīng)用中．樣式表提供了一種很有用的方法，可以在某個(gè)地方定義在很多頁面中重用的樣式。在Ajax應(yīng)用中。我們不再將應(yīng)用思考為快速切換的一系列頁面，但是樣式表仍然是很有幫助的。它可以用最少的代碼動態(tài)地為元素設(shè)置預(yù)先定義的外觀。CSS樣式為一個(gè)文檔定義顯示規(guī)則，通常放在一個(gè)單獨(dú)的文件中，由應(yīng)用這些樣式的Web頁面來引用。當(dāng)然，也可以在Web頁面中定義樣式規(guī)則，這通常是種很糟糕的做法。由于CSS并不是Ajax的特點(diǎn)，這里就不詳細(xì)介紹了。3.7jQueryTab插件jQuery由JohnResig創(chuàng)建于2006年初，對于任何使用JavaScript代碼的程序員來說，它是一個(gè)非常有用的JavaScript庫。jQuery是一個(gè)快速,簡練的的JavaScript工具箱它能夠讓你以簡單的方式來操作HTML元素,處理事件,實(shí)現(xiàn)特效并為Web頁面添加Ajax交互。jQuery設(shè)計(jì)用于改變你編寫JavaScript的方式。在本項(xiàng)目中主要使用到了jQueryTab插件實(shí)現(xiàn)AjaxTab頁面的效果。jQueryTab插件提供了多種Tab方式，其中包括AjaxTab，本項(xiàng)目采用了AjaxTab這一樣式，效果如下圖所示：圖3-10AjaxTab效果另外在本項(xiàng)目中實(shí)現(xiàn)了Tab頁的名稱和鏈接的動態(tài)配置，這一部分將在第四部分進(jìn)行詳細(xì)介紹。4.軟件測試網(wǎng)站開發(fā)與實(shí)現(xiàn)4.1開發(fā)環(huán)境及工具操作系統(tǒng)：MicrosoftWindowsXPProfessionalEdition。開發(fā)平臺：Myeclipse5.0，Dreamweaver8.0，Tomcat5.0，SQLServer2000。開發(fā)語言：Java，Javascript。輔助開發(fā)工具：MicrosoftOffice2003，IE7.0。4.2系統(tǒng)實(shí)現(xiàn)4.2.1軟件測試網(wǎng)站流程圖第四部分主要介紹軟件測試網(wǎng)站的具體實(shí)現(xiàn)。首先，會介紹整個(gè)網(wǎng)站的使用流程；然后介紹相應(yīng)的界面；最后，我會介紹部分功能的具體實(shí)現(xiàn)過程，由于網(wǎng)站的很多地方都使用到了Ajax技術(shù)，在本文中以登錄，Tab頁的動態(tài)加載，數(shù)據(jù)聯(lián)動為例說明Ajax在軟件測試網(wǎng)站中的應(yīng)用。圖4-1軟件測試網(wǎng)站流程圖上圖就是軟件測試網(wǎng)站的流程圖，通過這張圖可以清楚的了解網(wǎng)站的使用流程和功能，下面來介紹網(wǎng)站的界面實(shí)現(xiàn)和部分功能實(shí)現(xiàn)。4.2.2軟件測試網(wǎng)站界面實(shí)現(xiàn)網(wǎng)站首頁本網(wǎng)站首頁效果如下圖所示：圖4-2網(wǎng)站首頁界面可以看到網(wǎng)站首頁使用到了Tab技術(shù)，下圖是點(diǎn)擊一個(gè)Tab的效果。圖4-3Tab效果當(dāng)用戶名或密碼錯(cuò)誤時(shí)，頁面不刷新，動態(tài)在下面給出提示。圖4-4登錄提示界面學(xué)生界面學(xué)生登錄成功后，學(xué)生主界面如下：圖4-5學(xué)生主界面修改個(gè)人信息時(shí)，如修改成功則會在下面動態(tài)給出提示，頁面不需要刷新。圖4-6修改個(gè)人信息界面修改完個(gè)人信息，可以點(diǎn)擊查看個(gè)人信息。圖4-7查看個(gè)人界面學(xué)生點(diǎn)擊查看作業(yè)是，會顯示作業(yè)列表圖4-8查看作業(yè)信息界面點(diǎn)擊一個(gè)作業(yè)，進(jìn)入該作業(yè)的詳細(xì)信息頁面，在這里可以提交作業(yè)和下載作業(yè)圖4-9作業(yè)詳細(xì)信息界面點(diǎn)擊查看問題，會出現(xiàn)問題列表，點(diǎn)擊問題，就會進(jìn)入問題相關(guān)回復(fù)頁面圖4-10查看問題信息界面圖4-11問題詳細(xì)信息界面3.管理員端界面管理員登錄成功后，主界面如下：圖4-12管理員端主界面刪除新聞的界面如下圖所示(使用了數(shù)據(jù)聯(lián)動技術(shù))：圖4-13刪除新聞界面查看用戶信息界面：圖4-14查看用戶信息界面發(fā)布作業(yè)界面：圖4-15發(fā)布作業(yè)界面圖4-16發(fā)布作業(yè)界面（上傳作業(yè)文件）回復(fù)問題界面：圖4-17回復(fù)問題界面4.2.3登錄的Ajax實(shí)現(xiàn)本系統(tǒng)使用Ajax技術(shù)來實(shí)現(xiàn)用戶的登錄，不需要刷新頁面，下面介紹具體的實(shí)現(xiàn)過程。1.創(chuàng)建XMLHTTPRequest對象varxmlHttp;functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}上面的這段代碼創(chuàng)建了一個(gè)針對于不同瀏覽器的XMLHTTPRequest對象，由于在第三部分已經(jīng)介紹過了，因此就不詳細(xì)解釋了。2.創(chuàng)建查詢字符串當(dāng)創(chuàng)建了一個(gè)XMLHTTPRequest對象后，需要為其open()方法指定一個(gè)URL，使用createQueryString()方法創(chuàng)建查詢字符串，代碼如下：functioncreateQueryString(){varusername=document.getElementById("username").value;varpassword=document.getElementById("password").value;varqueryString="username="+username+"&password="+password;returnqueryString;}其中document.getElementById("username").value得到的是表單中名為username的文本框中輸入的值，document.getElementById("password").value得到的是表單中名為password的文本框中輸入的值。我們知道URL后面是可以帶參數(shù)的，所以我們可以把表單中的數(shù)據(jù)作為參數(shù)加在URL后面。varqueryString="username="+username+"&password="+password創(chuàng)建了一個(gè)這樣的URL參數(shù)字符串。3.發(fā)出請求創(chuàng)建了URL之后，我們就可以使用XMLHTTPRequest發(fā)出一個(gè)到服務(wù)器的請求,代碼如下：functiondoRequestUsingGET(){createXMLHttpRequest();varqueryString="login.do?";queryString=queryString+createQueryString()+"&timeStamp="+newDate().getTime();xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open("GET",queryString,true);xmlHttp.send(null);}這里首先生成了一個(gè)完整的帶參數(shù)的URL字符串，其中l(wèi)ogin.do是后臺中處理請求的函數(shù)。使用onreadystatechange屬性指定了一個(gè)當(dāng)readystate屬性變化時(shí)要調(diào)用的函數(shù)，然后使用open()方法發(fā)起一個(gè)到服務(wù)器的連接，由于這里使用的是GET方法，所以send()方法的參數(shù)是null。4.分析服務(wù)器響應(yīng)當(dāng)服務(wù)器響應(yīng)返回時(shí)，需要對服務(wù)器返回的數(shù)據(jù)進(jìn)行分析，代碼如下：functionhandleStateChange(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){parseResults();}}}functionparseResults(){varresponseDiv=document.getElementById("serverResponse");if(responseDiv.hasChildNodes()){responseDiv.removeChild(responseDiv.childNodes[0]);}varres=xmlHttp.responseText;if(res.toString().search("success")!=-1){window.location.href="student/index.html";}if(res.toString().search("teacher")!=-1){window.location.href="manage/index.html";}varresponseText=document.createTextNode(xmlHttp.responseText);responseDiv.appendChild(responseText);}Readystate的值為4說明已經(jīng)得到服務(wù)器的響應(yīng)，就調(diào)用parseResults()函數(shù)。在parseResults()函數(shù)中，對服務(wù)器返回的數(shù)據(jù)進(jìn)行分析，xmlHttp.responseText是服務(wù)器返回的數(shù)據(jù)，如果返回的值是success，則瀏覽器定向到學(xué)生端的首頁面，如果返回的值是teacher，則瀏覽器定向到管理員端的首頁面，否則使用DOM創(chuàng)建一個(gè)TextNode，其值為服務(wù)器返回的值，然后將其加到名為serverResponse的div中。這樣整個(gè)登錄部分就完成了，這段代碼在登錄按鈕的onclick事件中調(diào)用。4.2.4Tab頁的動態(tài)加載本網(wǎng)站的首頁使用jQueryTab插件實(shí)現(xiàn)了AjaxTab效果，jQuery已經(jīng)定義好了Tab的CSS樣式，下面介紹如何實(shí)現(xiàn)Tab頁的動態(tài)加載即Tab頁的動態(tài)配置。主要代碼如下：functionstart(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChangetab;xmlHttp.open("GET","tab.xml",true);xmlHttp.send(null);}functionhandleStateChangetab(){varxmlDoc=xmlHttp.responseXML;if(xmlHttp.readyState==4){if(xmlHttp.status==200){ varxml=xmlDoc.getElementsByTagName("t"); for(vari=0;i<xml.length;i++){ varli=document.createElement("li"); vardiv=document.createElement("div"); vara=document.createElement("a");varspan=document.createElement("span");vartext=xml[i].childNodes[0].childNodes[0].nodeValue;varhref=xml[i].childNodes[1].childNodes[0].nodeValue;div.setAttribute("align","center"); a.setAttribute("href",href); li.appendChild(div); div.appendChild(a); a.appendChild(span); span.appendChild(document.createTextNode(text)); vartab=document.getElementById("tab"); tab.appendChild(li);} }}}上面的代碼就是本系統(tǒng)中實(shí)現(xiàn)Tab頁的動態(tài)加載的主要代碼，由于創(chuàng)建XMLHTTPRequest對象的方法在前面已經(jīng)介紹過了，這里就不再將其列出，下面就這段代碼進(jìn)行分析：1.發(fā)出請求在start()函數(shù)中，xmlHttp.onreadystatechange=handleStateChangetab規(guī)定了當(dāng)readystate值發(fā)生變化時(shí)所需調(diào)用的函數(shù)。xmlHttp.open("GET","tab.xml",true)打開了一個(gè)到服務(wù)器的連接，使用GET方法訪問tab.xml文件。2．分析服務(wù)器返回的XMLvarxmlDoc=xmlHttp.responseXML得到服務(wù)器返回的XML數(shù)據(jù)，下面的代碼就是對返回的XML進(jìn)行分析。tab.xml文件的內(nèi)容如下所示：<?xmlversion="1.0"encoding="gb2312"?><tab><t><title>最新公告</title><link>news/new1.jsp</link></t><t><title>最新動態(tài)</title><link>news/new2.jsp</link></t><t><title>測試工具</title><link>news/new4.jsp</link></t><t><title>測試教程</title><link>news/new3.jsp</link></t><t><title>招聘信息</title><link>news/new5.jsp</link></t></tab>varxml=xmlDoc.getElementsByTagName("t")得到tab.xml中標(biāo)記為t的元素的數(shù)組，可以使用length屬性得到數(shù)組的長度，在tab.xml中有5個(gè)t標(biāo)記，所以數(shù)組的長度為5，然后，使用for循環(huán)創(chuàng)建5個(gè)Tab頁。varli=document.createElement("li")，vardiv=document.createElement("div")，vara=document.createElement("a")和varspan=document.createElement("span")使用DOM創(chuàng)建了li、div、a和span四個(gè)html元素。vartext=xml[i].childNodes[0].childNodes[0].nodeValue和varhref=xml[i].childNodes[1].childNodes[0].nodeValue從tab.xml中分別找到<title>和<link>元素的值。div.setAttribute("align","center")和a.setAttribute("href",href)分別設(shè)置了div的align屬性的值為center和a的href屬性的值為href的值。li.appendChild(div);div.appendChild(a);a.appendChild(span);span.appendChild(document.createTextNode(text));vartab=document.getElementById("tab");tab.appendChild(li);使用DOM將各html元素加入到頁面中ID為tab的元素的子元素中。這樣，Tab頁面的動態(tài)加載就完成了，在body元素的onload事件中調(diào)用這個(gè)函數(shù)就可以實(shí)現(xiàn)tab頁面的動態(tài)加載了，并且通過修改tab.xml中的內(nèi)容就可以完成tab頁的增加，修改和刪除。4.2.5數(shù)據(jù)聯(lián)動下面來介紹數(shù)據(jù)聯(lián)動的實(shí)現(xiàn)，數(shù)據(jù)聯(lián)動是指，當(dāng)用戶選擇下拉框的一個(gè)選項(xiàng)，另外一個(gè)下拉框根據(jù)上一個(gè)下拉框中選擇的選項(xiàng)動態(tài)的更新下拉框的選項(xiàng)。在本系統(tǒng)的新聞管理中用到了數(shù)據(jù)聯(lián)動，當(dāng)用戶選擇一個(gè)新聞?lì)悇e，新聞標(biāo)題下拉框動態(tài)的加載此類別中的所有新聞標(biāo)題。下面具體地介紹一下實(shí)現(xiàn)過程。在body的onload事件中調(diào)用startRequest()函數(shù)，會發(fā)送open("GET","GetNewsType",true)這樣的一個(gè)請求，GetNewsType會以XML格式輸出所有新聞?lì)悇e。handleStateChange()函數(shù)分析返回的XML并得到新聞?lì)悇e的值，然后將它們填充到新聞?lì)悇e下拉框中。完成新聞?lì)悇e下拉框的填充后，會發(fā)送open("POST","GetNewsBySelect",true)這樣的請求，URL參數(shù)使用send()方法傳送(xmlHttp.send(queryString))。GetNewsBySelect以XML格式輸出某新聞?lì)悇e下的所有新聞標(biāo)題，使用handleStateChange1()函數(shù)分析返回的XML并得到新聞標(biāo)題的值，然后將它們填充到新聞標(biāo)題下拉框中。完成新聞標(biāo)題下拉框的填充后，會發(fā)送open("POST","GetNewsContentById",true)這樣的請求，GetNewsContentById以Text的方式返回新聞內(nèi)容。handleStateChange2()函數(shù)得到返回的Text并將其顯示在相應(yīng)的位置。最后，在新聞標(biāo)題和新聞?lì)悇e下拉框的onchange事件中分別調(diào)用doRequest()方法和doRequestUsingPOST()方法就可以實(shí)現(xiàn)數(shù)據(jù)聯(lián)動了?？偨Y(jié)本課題討論了軟件測試網(wǎng)站表現(xiàn)層的設(shè)計(jì)與實(shí)現(xiàn)。目前，軟件測試人才缺乏，而市場需求較大，建立軟件測試網(wǎng)站可以促進(jìn)高校同學(xué)交流，