由于在這個(gè)類中要用到對(duì)指定的對(duì)象（不能事先確定）屬性進(jìn)行賦值，為了避免使用Java反射機(jī)制編寫代碼的麻煩，這里采用了Apache的BeanUtils這一工具類，而B(niǎo)eanUtils工具類又用到了日志類和集合類，因此需要導(dǎo)入以下JAR包：◆commons-beanutils-1.9.3.jar◆commons-beanutils-1.9.3-javadoc.jar◆commons-logging-1.2.jar◆commons-logging-1.2-javadoc.jar◆commons-collections-3.1.jar需要將以上JAR文件復(fù)制到WebContent/WEB-INF/lib目錄中。因?yàn)檫€要訪問(wèn)數(shù)據(jù)庫(kù)，所以還要訪問(wèn)數(shù)據(jù)的JAR包，在這個(gè)實(shí)例中采用MySQL數(shù)據(jù)庫(kù)，所以還需要將mysql-connector-java-5.1.37-bin.jar文件復(fù)制到lib目錄中。DAO層主要實(shí)現(xiàn)的基本功能

◆獲取數(shù)據(jù)庫(kù)連接；

◆關(guān)閉連接對(duì)象（連接對(duì)象、語(yǔ)句對(duì)象和ResultSet對(duì)象）；

◆執(zhí)行增/刪/改功能的方法；

◆執(zhí)行查找或按條件查找的方法。有了以上的基本方法就可以實(shí)現(xiàn)數(shù)據(jù)庫(kù)操作了，如果還需要其他的DAO功能，則可以通過(guò)以上基本方法進(jìn)行組合實(shí)現(xiàn)。最后需要注意一點(diǎn)，那就是“Java類的屬性名要與數(shù)據(jù)庫(kù)表的字段名保持一致，通用DAO類才能賦值成功！”。12.2.4公共傳輸層

在MVC模型中并沒(méi)有傳輸層的概念，這是為描述項(xiàng)目結(jié)構(gòu)方便引入的一種Java類的分類方法。所謂的傳輸層公共類指的是在各層（DAO層、業(yè)務(wù)邏輯層、控制層）間傳遞（或流動(dòng)）的Java類，這里包括業(yè)務(wù)實(shí)體類和Java的集合類，如List集合等。這些類與DAO層的類緊密相關(guān)，但有本質(zhì)的區(qū)別：DAO類負(fù)責(zé)與數(shù)據(jù)庫(kù)的交互，而傳輸層的類則主要在各層之間傳遞和流動(dòng)，所以劃分到公共傳輸層。在這個(gè)實(shí)例中，涉及到以下業(yè)務(wù)實(shí)體類：◆Clazz——班級(jí)類，包括班級(jí)編號(hào)和班級(jí)名稱?！鬋ourse——課程類，包括課程編號(hào)、課程名稱、開(kāi)設(shè)學(xué)期等?！鬝elCourse——選課類，包括選課編號(hào)、選修的學(xué)生、選修的課程、選課學(xué)期和成績(jī)等。◆Student——學(xué)生類，包括學(xué)號(hào)、姓名、性別、登錄密碼等?！鬞eacher——教師類，包括工號(hào)、姓名、登錄密碼等。除上面這些業(yè)務(wù)實(shí)體類之外，還包括Java的集合類，主要是List也是傳輸層的重要組成部分。這些類的源代碼在第12章\AjaxSyn\src\com\phoenix\bo目錄中。

12.2.5JavaScript工具類

這個(gè)工具類屬于視圖層的一部分，主要通過(guò)它以兼容瀏覽器的方式創(chuàng)建異步請(qǐng)求對(duì)象、添加事件處理函數(shù)、清空顯示容器、顯示處理結(jié)果和創(chuàng)建數(shù)據(jù)表格等功能。在項(xiàng)目的WebContent目錄下，新建以下文件夾：◆js——存放js文件的目錄；◆css——存放css文件的目錄；◆img——存放圖片的目錄。這樣就可以實(shí)現(xiàn)對(duì)內(nèi)容、樣式和動(dòng)作的分類管理，利于項(xiàng)目將的來(lái)擴(kuò)展和維護(hù)。

在js文件夾中新建utils.js文件，在其中輸出實(shí)現(xiàn)基本功能的函數(shù)：◆addEvent(elem,eventType,func)——實(shí)現(xiàn)跨瀏覽器注冊(cè)事件處理函數(shù)；

◆removeEvent(elem,eventType,func)——實(shí)現(xiàn)跨瀏覽器注銷事件處理函數(shù)；◆showTip(msg,obj)——實(shí)現(xiàn)處理結(jié)果的消息，顯示時(shí)間為3秒鐘；◆createRequest()——實(shí)現(xiàn)跨瀏覽器創(chuàng)建異步請(qǐng)求對(duì)象XMLHttpRequest；◆empty(con)——實(shí)現(xiàn)清空顯示數(shù)據(jù)的容器，以備下次顯示；◆createTable(titleArray)——用于創(chuàng)建數(shù)據(jù)表格的頭部。在這個(gè)小項(xiàng)目中，具備這些基礎(chǔ)功能就可以應(yīng)付所有的開(kāi)發(fā)了，如果項(xiàng)目功能比較復(fù)雜，則可以根據(jù)需要把基本的功能抽象到這個(gè)JS工具中實(shí)現(xiàn)，需要時(shí)調(diào)用就可以了。由于篇幅所限，就不列出utils.js文件的源代碼了，詳見(jiàn)第12章\AjaxSyn\WebContent\js\utils.js。好了，到此為止項(xiàng)目的框架就搭建完成了，最終完成的框架如圖12-4所示。為了使大家能夠看到詳細(xì)的結(jié)構(gòu)，以便于對(duì)照練習(xí)，圖中詳細(xì)列出了每個(gè)組件及其位置（控制層組件、邏輯層組件、DAO層組件和視圖層組件）。圖12-4AjaxSyn項(xiàng)目的框架結(jié)構(gòu)圖12.3學(xué)生選課系統(tǒng)的界面設(shè)計(jì)

有了以上的項(xiàng)目框架就可以進(jìn)行系統(tǒng)功能的開(kāi)發(fā)了。實(shí)現(xiàn)系統(tǒng)的功能首先要從視圖部分——也就是用戶界面開(kāi)始。設(shè)計(jì)用戶界面也是極有學(xué)問(wèn)的，同樣的功能可設(shè)計(jì)出不同的N種視圖，這N種視圖對(duì)用戶的友好程度也不相同。界面設(shè)計(jì)中兩條最基本的任務(wù)

◆設(shè)置視圖元素，展示系統(tǒng)內(nèi)容，也就是編寫HTML頁(yè)面，根據(jù)實(shí)際需求添加HTML標(biāo)記，并設(shè)置相應(yīng)的樣式，以保證視圖界面的美觀；

◆實(shí)現(xiàn)與用戶的交互，使用戶能夠訪問(wèn)系統(tǒng)的功能。也就是通過(guò)事件注冊(cè)的方法，給響應(yīng)元素——響應(yīng)用戶操作的HTML元素（或標(biāo)記）——注冊(cè)事件處理程序，響應(yīng)用戶的操作。在這個(gè)系統(tǒng)中只實(shí)現(xiàn)了關(guān)于學(xué)生的部分功能，設(shè)計(jì)的界面如圖12-5所示，對(duì)應(yīng)的源文件為項(xiàng)目WebContent目錄下的student.html文件。圖12-5學(xué)生選課系統(tǒng)的用戶界面清單12-4學(xué)生選課系統(tǒng)用戶界面的HTML代碼因?yàn)楹竺鎸?shí)現(xiàn)功能時(shí)要用到這些元素，下面對(duì)清單12-4的代碼結(jié)構(gòu)進(jìn)行詳細(xì)說(shuō)明。從上到下依次為：

◆頁(yè)頭<header>——主要顯示系統(tǒng)的名稱“學(xué)生選課系統(tǒng)”；

◆顯示交互信息的<divid="info">——主要顯示登錄者的照片和服務(wù)器處理結(jié)果，由<imgid=”photo”/>進(jìn)行照片的顯示；由<divid=”tip”/>顯示服務(wù)器對(duì)用戶請(qǐng)求的處理結(jié)果。

◆導(dǎo)航條nav——其中包含三個(gè)超級(jí)鏈接：“登錄”鏈接<aid=”loginReq”/>、“選課”鏈接<aid="selCourseReq"/>和“查看成績(jī)”鏈接<aid="gradeReq"/>，這3個(gè)鏈接是響應(yīng)用戶操作的“交互元素”，需要為它們注冊(cè)事件處理函數(shù)，對(duì)用戶操作予以響應(yīng)。◆Tab頁(yè)簽——主要是<section/>中包含3個(gè)<span/>，用于顯示3個(gè)

樣的圖像，起到區(qū)分當(dāng)前功能的作用，不需要響應(yīng)用戶的操作。

◆數(shù)據(jù)顯示容器——<sectionid="container"/>，這是向用戶顯示結(jié)果數(shù)據(jù)的地方，每次需要先清空容器，然后再顯示新的數(shù)據(jù)。各功能實(shí)現(xiàn)中，都會(huì)用到該容器顯示數(shù)據(jù)。

◆頁(yè)腳部分footer——只是顯示版權(quán)信息，開(kāi)發(fā)過(guò)程中不涉及功能的實(shí)現(xiàn)。對(duì)應(yīng)的CSS樣式文件為main.css，要實(shí)現(xiàn)圖12-10所示的樣式，需要在標(biāo)準(zhǔn)模型的瀏覽器（如Chrome、FireFox）中才能顯示圖中的樣子。IE瀏覽器需要較高的版本，如IE11以上的版本才能顯示規(guī)定的樣式，而且與標(biāo)準(zhǔn)模型的瀏覽器顯示效果也不太相同，這一點(diǎn)需要注意。有關(guān)學(xué)生選課的所有功能，都在student.js文件中實(shí)現(xiàn)。首先，我們?cè)陧?xiàng)目的WebContent目錄下的js文件夾中新建sutdent.js文件，在student.js文件中完成學(xué)生選課功能的編寫。在實(shí)現(xiàn)學(xué)生選課功能之前，需要一個(gè)初始化函數(shù)，用于對(duì)顯示的界面進(jìn)行初始化操作，在該實(shí)例中，需要完成以下任務(wù)：

◆給“登錄”導(dǎo)航鏈接注冊(cè)單擊事件處理程序；

◆給“選課”導(dǎo)航鏈接注冊(cè)單擊事件處理程序；

◆給“查看成績(jī)”導(dǎo)航鏈接注冊(cè)單擊事件處理程序；

◆隱藏id為tip的div，即顯示交互信息的div，待顯示信息時(shí)再顯現(xiàn)出來(lái)。

◆取得id為tip的div元素，為的是顯示交互方便，在需要顯示信息是直接使用，而沒(méi)必要每次都要查找這個(gè)div元素。初始化函數(shù)init()代碼如清單12-5所示。清單12-5清單中，注冊(cè)了3個(gè)函數(shù)：loginView()、displayCourse()和displayGrade()