基于xmlhttp實(shí)現(xiàn)表示層設(shè)計(jì)思路

傳統(tǒng)的開發(fā)模式——基于form的請(qǐng)求/響應(yīng)模式form表單的形式一個(gè)action屬性，值為一個(gè)URL一個(gè)submit按鈕發(fā)送請(qǐng)求按下submit按鈕用JavaScript執(zhí)行submit操作Servlet/JSP接受請(qǐng)求，在服務(wù)器端完成相應(yīng)的操作Servlet/JSP返回結(jié)果結(jié)果的格式——標(biāo)準(zhǔn)的HTML第1頁(yè)傳統(tǒng)開發(fā)模式的缺點(diǎn)必須要更新頁(yè)面，即使只有很小的改動(dòng)C/S結(jié)構(gòu)中不需要這樣頻繁更換頁(yè)面瀏覽器解析一個(gè)頁(yè)面需要時(shí)間，離開一個(gè)頁(yè)面，這些工作完全作廢刷新一個(gè)頁(yè)面會(huì)造成等待，在僅修改很少部分的情況下，會(huì)造成閃爍感B/S之間要傳遞大量表示顯示格式的冗余數(shù)據(jù)，加重了服務(wù)器的負(fù)擔(dān)第2頁(yè)一種替代方案——iframeiframeiframe的優(yōu)點(diǎn)當(dāng)不顯示邊界時(shí)候可以與頁(yè)面融為一體iframe可以放在頁(yè)面上的任何位置，比標(biāo)準(zhǔn)

frame靈活傳輸?shù)臄?shù)據(jù)量小，因?yàn)楝F(xiàn)在只需要更新頁(yè)面的一小部分iframe的形式<iframe

id=”frame1”

width=”420”

height=”330”frameborder=”0”

scrolling=”auto”

src=”URL”></iframe>iframe的刷新方法——修改src屬性第3頁(yè)iframe的3種用法可以實(shí)現(xiàn)類似于SSI(ServerSide

Include)一類的功能，例如實(shí)現(xiàn)頁(yè)面中的頁(yè)眉、頁(yè)腳等內(nèi)容作為頁(yè)面的一部分動(dòng)態(tài)更新，增強(qiáng)頁(yè)面的動(dòng)態(tài)效果，例如實(shí)現(xiàn)動(dòng)態(tài)的以一個(gè)不占位置的iframe(width和height均為0)來向服務(wù)器請(qǐng)求頁(yè)面中所需要的數(shù)據(jù)第4頁(yè)iframe的缺點(diǎn)更新頁(yè)面時(shí)仍然會(huì)產(chǎn)生閃爍感在無法精確

iframe中頁(yè)面大小的情況下，當(dāng)頁(yè)面大小超出iframe的邊界時(shí)候會(huì)造成截?cái)?，影響顯示效果具有和標(biāo)準(zhǔn)frame同樣的缺點(diǎn)無法直接 頁(yè)面其它部分中的對(duì)象，必須首先得到父窗口的句柄，然后用間接方式第5頁(yè)一種更好的替代方案——XMLHTTPXMLHTTP一種瀏覽器不離開頁(yè)面主服務(wù)器請(qǐng)求數(shù)據(jù)的技術(shù)一種基于XML和HTTP的通信協(xié)議采用XML格式發(fā)送請(qǐng)求和接收響應(yīng)發(fā)送請(qǐng)求和接收響應(yīng)使用標(biāo)準(zhǔn)的HTTP協(xié)議XMLHTTP也可以傳遞非XML格式的文本數(shù)據(jù)第6頁(yè)XMLHTTP相對(duì)于iframe的優(yōu)點(diǎn)XMLHTTP不會(huì)造成頁(yè)面的閃爍XMLHTTP適合傳遞大量的數(shù)據(jù)XMLHTTP更適合傳遞具有層次關(guān)系的數(shù)據(jù)XML相比HTML天生具有更強(qiáng)的描述能力

XML是目前描述數(shù)據(jù)間層次關(guān)系的最佳技術(shù)XMLHTTP的返回結(jié)果處理起來比iframe返回的HTML更加方便由于有強(qiáng)大的XPath的支持，檢索XML

DOM要比檢索HTML

DOM方便的多XMLHTTP傳遞的數(shù)據(jù)量更小傳遞相同的數(shù)據(jù)，XML比HTML效率要高第7頁(yè)XMLHTTP請(qǐng)求數(shù)據(jù)的兩種方式.XMLHTTP");同步方式適合于少量數(shù)據(jù)需要等待數(shù)據(jù)傳輸結(jié)束同步方式示例var

xmlhttp

=new

ActiveXObject("xmlhttp.open("GET","/hwsvr2/qe",false);xmlhttp.send(null);alert(xmlhttp.responseXML);第8頁(yè)XMLHTTP請(qǐng)求數(shù)據(jù)的兩種方式.XMLHTTP");異步方式適合于大量數(shù)據(jù)無須等待數(shù)據(jù)傳輸結(jié)束需要設(shè)置一個(gè)回調(diào)函數(shù)異步方式示例function

f1(){alert(xmlhttp.responseXML);}var

xmlhttp

=new

ActiveXObject("xmlhttp.open("GET","/hwsvr2/qe",true);xmlhttp.onreadystatechange=f1;xmlhttp.send(null);第9頁(yè)XMLHTTP的意義XMLHTTP改變了傳統(tǒng)的開發(fā)模式XMLHTTP創(chuàng)造了一種可以完全拋開基于form的請(qǐng)求/響應(yīng)模式的全新開發(fā)模式更進(jìn)一步，XMLHTTP使得完全在瀏覽器端開示層成為了可能，服務(wù)器端可以完全拋開JSP，全部基于Servlet做開發(fā)JSP的缺陷正是基于form的請(qǐng)求/響應(yīng)模式造成的，現(xiàn)在這一切 都已經(jīng)不再存在第10頁(yè)從CGI、Servlet到JSPCGI的開發(fā)方式Servlet的開發(fā)方式一種提高CGI/Servlet開發(fā)效率的方法——頁(yè)面模版<!--

content

begin

-->...<!--

content

end-->JSP的開發(fā)方式與CGI/Servlet反其道而行之仍然未能解決表示層與業(yè)務(wù)層分離的問題第11頁(yè)MVC要解決的主要問題來自Smalltalk主要解決表示層與業(yè)務(wù)層分離的問題表示層與業(yè)務(wù)層不分造成的危害代碼耦合太緊造成重用度低由于重用度低，開發(fā)效率自然也很低一旦表示邏輯發(fā)生大規(guī)模修改，很容易為業(yè)務(wù)邏輯引入新的bug第12頁(yè)MVC中的代碼的3種角色Model通常用標(biāo)準(zhǔn)Java類、或者用EJB實(shí)現(xiàn)實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯處理結(jié)果封裝在JavaBean中View通常用JSP實(shí)現(xiàn)只負(fù)責(zé)處理與顯示有關(guān)的內(nèi)容Controller通常用Servlet實(shí)現(xiàn)對(duì)于整個(gè)系統(tǒng)的處理流程進(jìn)行調(diào)度和控制第13頁(yè)MVC的處理流程Controller接受請(qǐng)求，根據(jù)請(qǐng)求的類型將請(qǐng)求委托給適當(dāng)?shù)腗odel處理Model執(zhí)行復(fù)雜的業(yè)務(wù)邏輯處理，將結(jié)果封裝在JavaBean中Controller將請(qǐng)求重定向到適當(dāng)?shù)腣iewView從JavaBean中取得數(shù)據(jù)，以適當(dāng)格式顯示在頁(yè)面上第14頁(yè)MVC的優(yōu)點(diǎn)徹底解決了表示層與業(yè)務(wù)層分離的問題清晰的分層提高了業(yè)務(wù)邏輯的重用度，因此提高了開發(fā)效率表示層與業(yè)務(wù)層分離的重要性一個(gè)例子：支持不同類型的客戶端第15頁(yè)實(shí)現(xiàn)了MVC的開發(fā)框架實(shí)現(xiàn)了MVC的開發(fā)框架StrutsTapestryWebworkOfbizJSFMVC已經(jīng)成為了J2EE表示層開發(fā)的主流技術(shù)學(xué)習(xí)MVC的最佳

——《J2EE

模式》第16頁(yè)MVC的缺點(diǎn)與設(shè)計(jì)模式的缺點(diǎn)相同增加了復(fù)雜性在提高大項(xiàng)目開發(fā)效率的同時(shí)降低了小項(xiàng)目的開發(fā)效率處理流程復(fù)雜造成了性能的下降沒有解決如何提供RichClient的問題，仍然需要大量的開發(fā)提供RichClient無法避開JavaScript，傳統(tǒng)的MVC框架幾乎從來沒有把JavaScript列入考慮范圍簡(jiǎn)單地忽視JavaScript對(duì)于提高頁(yè)面的表現(xiàn)能力沒有任何幫助復(fù)雜的JavaScript的開發(fā)工作應(yīng)該由程序員來承擔(dān)第17頁(yè)MVC的缺點(diǎn)MVC中View的開發(fā)仍然采用基于form的請(qǐng)求/響應(yīng)模式，因此仍然具有這一模式的所有缺點(diǎn)MVC不可能解決表示層的所有問題，只解決了表示層一部分重要問題MVC除了對(duì)開發(fā)

有意義外，并沒有給最終用戶帶來很多最終用戶關(guān)心的是 的外在質(zhì)量，而不是程序員所關(guān)心的內(nèi)在質(zhì)量M$討巧之所在——重界面、輕架構(gòu)第18頁(yè)基于XMLHTTP實(shí)現(xiàn)表示層的新思路表示層所要解決的兩大問題提供Rich

Client表示層與業(yè)務(wù)層分離兩大問題的會(huì)合點(diǎn)——JavaScript完全采用JavaScript實(shí)現(xiàn)表示層的可能性一種新的思路跳開傳統(tǒng)的基于form的請(qǐng)求/響應(yīng)模式把表示層開發(fā)全部前推到瀏覽器端利用XMLHTTP主 服務(wù)器請(qǐng)求數(shù)據(jù)，根據(jù)請(qǐng)求的數(shù)據(jù)修改頁(yè)面中的顯示控件第19頁(yè)新的開發(fā)模式的優(yōu)點(diǎn)傳輸?shù)臄?shù)據(jù)量小，減輕了服務(wù)器的負(fù)擔(dān)符合W3C所

的下一代Web開發(fā)方式B/S間傳遞的全部是純XML數(shù)據(jù)，表示層與業(yè)務(wù)層實(shí)現(xiàn)了天然的分離表示層和業(yè)務(wù)層的邊界與B/S的邊界完全重合，不再需要實(shí)現(xiàn)MVC了第20頁(yè)新的開發(fā)模式的優(yōu)點(diǎn)提高了開發(fā)效率簡(jiǎn)化了體系結(jié)構(gòu)可以實(shí)現(xiàn)類似于C/S結(jié)構(gòu)的開發(fā)只要把盡量多的工作放在同一個(gè)頁(yè)面中做，延遲離開頁(yè)面的時(shí)間，就可以模擬C/S結(jié)構(gòu)的開發(fā)方式2層結(jié)構(gòu)存在的價(jià)值開發(fā)效率高便于開發(fā)各種RAD工具第21頁(yè)新的開發(fā)模式的優(yōu)點(diǎn)表示層開發(fā)

只需要精通JavaScript，不需要同時(shí)精通Java和JavaScript，降低了學(xué)習(xí)成本。表示層開發(fā)可以更加集中精力于提供RichClient這個(gè)能夠產(chǎn)生

的重大問題。他可以用JavaScript開發(fā)出來各種可重用組件，提高頁(yè)面的表現(xiàn)能力，還可以用JavaScript建造出功能強(qiáng)大的開發(fā)框架。第22頁(yè)新的開發(fā)模式與MVC的區(qū)別以前需要把數(shù)據(jù)封裝在JavaBean中，現(xiàn)在是封裝在XML中。以前要由View決定如何顯示，并將結(jié)果HTML發(fā)送給瀏覽器，現(xiàn)在先把HTML和一起發(fā)給瀏覽器，然后由

中的JavaScript決定如何顯示。系統(tǒng)中可以沒有Controller這樣一個(gè)角色。也可以用Servlet實(shí)現(xiàn)一個(gè)Controller，只不過這時(shí)候View是HTML+

，而不是JSP。因此仍然可以實(shí)現(xiàn)一種新型的MVC。第23頁(yè)對(duì)于新的開發(fā)模式的常見疑問解答由于把表示層完全前推到瀏覽器端，必然要開發(fā)大量的JavaScript代碼，JavaScript可能會(huì)使系統(tǒng)不穩(wěn)定。JavaScript調(diào)試起來很不方便，開發(fā)效率太低。JavaScript的性能很差，做大量JavaScript開發(fā)會(huì)降低系統(tǒng)的性能。JavaScript不夠強(qiáng)大，因此不適合做復(fù)雜的處理。第24頁(yè)對(duì)于新的開發(fā)方式的常見問題解答用戶可以直接看到JavaScript的代碼，因此可能會(huì)損害

的商業(yè)利益.這樣做是否解決了MVC所要解決的問題?XMLHTTP好象是只有IE支持吧?XMLHTTP好象在M$平臺(tái)上應(yīng)用的比較多，Java平臺(tái)上也能用嗎?第25頁(yè)四代Web開發(fā)方式四代Web開發(fā)方式第一代——CGI第二代——Servlet第三代——ASP/JSP/PHP/ColdFusion第四代——基于XMLHTTP的開發(fā)基于XMLHTTP的開發(fā)是目前最合理的開發(fā)