1、第六章 視圖層設(shè)計(jì)技術(shù),本章要點(diǎn),自定義標(biāo)簽的設(shè)計(jì)原理與應(yīng)用 在博客網(wǎng)站中定義博文分類(lèi)標(biāo)簽 EL表達(dá)式與JSTL標(biāo)簽 實(shí)現(xiàn)博客網(wǎng)站中的博文管理功能 AJAX原理及應(yīng)用,6.1 自定義標(biāo)簽,自定義標(biāo)簽是用戶定義的JSP語(yǔ)言元素，通過(guò)封裝反復(fù)執(zhí)行的代碼使之可以在多個(gè)應(yīng)用程序中重復(fù)使用，從而提高開(kāi)發(fā)效率。它在處理網(wǎng)頁(yè)內(nèi)容的數(shù)據(jù)及易用性方面比JavaBean都要出色。標(biāo)準(zhǔn)的應(yīng)用框架，如Struts2，都提供了大量的標(biāo)簽。,自定義標(biāo)簽的設(shè)計(jì)原理 自定義標(biāo)簽是用戶定義的JSP語(yǔ)言元素。當(dāng)JSP頁(yè)面包含一個(gè)自定義標(biāo)簽時(shí)被轉(zhuǎn)化為Servlet，標(biāo)簽轉(zhuǎn)化為對(duì)稱(chēng)為T(mén)ag Handler的對(duì)象的操作。接著當(dāng)Serv

2、let執(zhí)行時(shí)Web Container調(diào)用那些操作。自定義標(biāo)簽有著豐富的特點(diǎn)，它們可以: 通過(guò)調(diào)用頁(yè)面?zhèn)鬟f參數(shù)實(shí)現(xiàn)定制; 訪問(wèn)所有對(duì)于JSP頁(yè)面可能的對(duì)象; 修改由調(diào)用頁(yè)面產(chǎn)生的響應(yīng); 自定義標(biāo)簽間可相互通信; 在同一個(gè)JSP頁(yè)面中通過(guò)標(biāo)簽嵌套，可以實(shí)現(xiàn)復(fù)雜的交互。,開(kāi)發(fā)自定義標(biāo)簽一般需要按照以下三個(gè)步驟來(lái)操作: 1創(chuàng)建標(biāo)簽的處理類(lèi) 每個(gè)標(biāo)簽都有對(duì)應(yīng)的標(biāo)簽處理類(lèi)(Tag Handler Class)。標(biāo)簽處理類(lèi)必須實(shí)現(xiàn)Tag接口?？梢岳^承javax.servlet.jsp.TagSurpport類(lèi)或者javax.servlet.jsp.BodyTagSupport來(lái)創(chuàng)建不帶體或帶體的標(biāo)簽。JS

3、P2.0以后引入了javax.servlet.jsp.tagext.SimpleTagSupport，可以用于建立簡(jiǎn)單的標(biāo)簽。,、,2創(chuàng)建標(biāo)簽庫(kù)描述文件 標(biāo)簽庫(kù)描述文件（Tag Library Descriptor File，簡(jiǎn)稱(chēng)TLD），該文件采用XML文件格式，提供了標(biāo)簽庫(kù)中類(lèi)和JSP中對(duì)標(biāo)簽引用的映射關(guān)系。 3. 在JSP中使用標(biāo)簽 首先在JSP中使用指令來(lái)聲明對(duì)標(biāo)簽的引用。例如： 也可以使用絕對(duì)路徑： 然后再使用標(biāo)簽。例如： ,案例6-1 設(shè)計(jì)博客網(wǎng)站的博文分類(lèi)標(biāo)簽 設(shè)計(jì)兩個(gè)標(biāo)簽：一個(gè)是博文分類(lèi)目錄標(biāo)簽用于博客界面的左側(cè)欄，一個(gè)是博文分類(lèi)下拉列表表用于發(fā)表文章時(shí)選擇分類(lèi)。前者運(yùn)行效果如

4、圖6-1所示，后者運(yùn)行效果如圖6-2所示。,技術(shù)要點(diǎn) 先建立標(biāo)簽描述文件命名為mytag.tld，這樣在NetBeans下建立標(biāo)簽可以自動(dòng)生成標(biāo)簽描述。 在blog.tag包下建立標(biāo)簽處理類(lèi)，標(biāo)簽處理類(lèi)中使用工廠類(lèi)建立業(yè)務(wù)邏輯對(duì)象。 兩個(gè)標(biāo)簽都包含blogId屬性和categroyId屬性。前者用于查出屬于該博客的所有博文類(lèi)別；后者用于表示當(dāng)前分類(lèi)。,6.2 表達(dá)式語(yǔ)言EL和標(biāo)準(zhǔn)標(biāo)簽庫(kù)JSTL,EL表達(dá)式語(yǔ)言 所有EL都是以“$”起始，以“”結(jié)尾的，通過(guò)“.”或“”存取數(shù)據(jù)。例如: $requestScope.msg 相當(dāng)于 甚至可以簡(jiǎn)化為： $msg requestScope表示范圍為req

5、uest，即在Request中尋找。如果不指定，依次在Page，Request，Session，Application范圍尋找。假如途中找到msg，就直接返回，不再繼續(xù)找下去，但是假如全部的范圍都沒(méi)有找到時(shí)，就返回null。,標(biāo)準(zhǔn)標(biāo)簽庫(kù)JSTL 下面重點(diǎn)介紹一下核心標(biāo)簽庫(kù)。 用于在JSP中顯示數(shù)據(jù)。 例如，顯示用戶的用戶名，如為空則顯示guest： 用于保存數(shù)據(jù)，它的屬性如表6-5所示。 例如，將test.testinfo的值保存到session的test2中，其中test是一個(gè)JavaBean的實(shí)例，testinfo是test對(duì)象的屬性： 用于刪除數(shù)據(jù)，它的屬性如表6-6所示。 例如，從se

6、ssion中刪除test2變量： , 用于判斷。 例如，如果user.userSex值為“先生”，則顯示user is men： user is men. 用于多選擇情況，不接受任何屬性，與和標(biāo)簽配合使用。標(biāo)簽有一屬性test，用于指明判斷的條件。例如： user.generousis true. user.stingy is true. user.generous and user.stingy are false. , 循環(huán)控制標(biāo)簽，它的屬性如表6-8所示。 例如，vectors是一個(gè)實(shí)現(xiàn)了java.util.Collection接口的對(duì)象，里面存放的是String數(shù)據(jù)，循環(huán)輸出： ,案例

7、6-2 實(shí)現(xiàn)博文管理 實(shí)現(xiàn)博客網(wǎng)站中博文管理（發(fā)表、修改、刪除）、博文目錄、博文查看、博客首頁(yè)等功能。博文管理如圖6-6，發(fā)表博文界面如圖6-7所示，修改博文界面如圖6-8, 博文目錄如圖6-9，博客首頁(yè)如圖6-10所示，查看博文界面如圖6-11所示。,技術(shù)要點(diǎn) 使用Servlet實(shí)現(xiàn)控制層。 使用JSTL標(biāo)簽結(jié)合EL表達(dá)式實(shí)現(xiàn)視圖層。,6.3 AJAX技術(shù),AJAX基礎(chǔ) 什么是AJAX AJAX(Asynchronous JavaScript and XML)，是運(yùn)用JavaScript和可擴(kuò)展標(biāo)記語(yǔ)言(XML)，實(shí)現(xiàn)瀏覽器與服務(wù)器通信。主要特點(diǎn)是能夠?qū)崿F(xiàn)異步提交。 AJAX 涉及到主要技術(shù)

8、有Javascript、XMLHttpRequest、DOM、XML。,XMLHttpRequest 對(duì)象 XMLHttpRequest供客戶端同HTTP服務(wù)器異步通信的對(duì)象。通過(guò)這個(gè)對(duì)象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做；這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時(shí)間。,XMLHttpRequest 對(duì)象的方法 abort()：停止當(dāng)前請(qǐng)求。 getAllResponseHeaders()：作為字符串返問(wèn)完整的headers。 getResponseHeader(headerLabel)

9、：作為字符串返問(wèn)單個(gè)的header標(biāo)簽。 open(method,URL,asyncFlag,userName, password)：打開(kāi)請(qǐng)求。 send(content)：發(fā)送請(qǐng)求。 setRequestHeader(label, value)：設(shè)置header并和請(qǐng)求一起發(fā)送。,XMLHttpRequest 對(duì)象的屬性 onreadystatechange：狀態(tài)改變的事件觸發(fā)器。 readyState 對(duì)象狀態(tài)(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成 responseText：服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本。 responseXML

10、：服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容DOM的XML文檔對(duì)象。 status：服務(wù)器返回的狀態(tài)碼, 如：404 = 文件末找到 、200 =成功。 statusText：服務(wù)器返回的狀態(tài)文本信息。,AJAX應(yīng)用步驟 1. 創(chuàng)建XMLHttpRequest對(duì)象 在網(wǎng)頁(yè)中可以使用類(lèi)似如下的腳本創(chuàng)建XMLHttpRequest 對(duì)象： var http_request= null; try http_request= new XMLHttpRequest(); catch (e1) var _msxmlhttp = new Array(Msxml2.XMLHTTP.6.0,Msxml2.XMLHTTP.5.0,

11、 Msxml2.XMLHTTP.4.0,Msxml2.XMLHTTP.3.0, Msxml2.XMLHTTP,Microsoft.XMLHTTP); for ( var i = 0; i _msxmlhttp.length; i+) try http_request= new ActiveXObject(_msxmlhttpi); if(req!=null) break; catch (e2) if (req=null) alert(Could not create connection object.); ,2. 指定響應(yīng)處理函數(shù) 接下來(lái)要指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。 http_

12、request.onreadystatechange = function() ; 3發(fā)出HTTP請(qǐng)求 指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請(qǐng)求了。這一步調(diào)用XMLHttpRequest 對(duì)象的open()和send()方法。例如： http_request.open(GET, /some.file, true); http_request.send(null);,4.處理服務(wù)器返回的信息 if(request.readyState=4)/0未初始化，1讀取中,2已讀取，3交互中，4完成 if(request.status=200)/404文件沒(méi)找到，200成功 var m=request.responseText;/responseXML; document.getElementById(tt).innerHTML=m; XMLHttpRequest對(duì)成功返回的信息有兩種處理方式： responseText：將傳回的信息當(dāng)字符串使用； responseXML：將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。,案例6-3 實(shí)現(xiàn)無(wú)刷新登錄 在用戶注冊(cè)界面增加一個(gè)按鈕，標(biāo)題設(shè)為“是否已用”，用于驗(yàn)證用戶名是否被使用過(guò)。單擊該按鈕，如果用戶名被使用過(guò)，顯示“該用戶名已被使用！”，否則顯示“該用戶名沒(méi)有被使