基于xmlhttp实现表示层设计思路

传统的开发模式——基于form的请求/响应模式form表单的形式一个action属性，值为一个URL一个submit按钮发送请求按下submit按钮用JavaScript执行submit操作Servlet/JSP接受请求，在服务器端完成相应的操作Servlet/JSP返回结果结果的格式——标准的HTML第1页传统开发模式的缺点必须要更新页面，即使只有很小的改动C/S结构中不需要这样频繁更换页面浏览器解析一个页面需要时间，离开一个页面，这些工作完全作废刷新一个页面会造成等待，在仅修改很少部分的情况下，会造成闪烁感B/S之间要传递大量表示显示格式的冗余数据，加重了服务器的负担第2页一种替代方案——iframeiframeiframe的优点当不显示边界时候可以与页面融为一体iframe可以放在页面上的任何位置，比标准

frame灵活传输的数据量小，因为现在只需要更新页面的一小部分iframe的形式<iframe

id=”frame1”

width=”420”

height=”330”frameborder=”0”

scrolling=”auto”

src=”URL”></iframe>iframe的刷新方法——修改src属性第3页iframe的3种用法可以实现类似于SSI(ServerSide

Include)一类的功能，例如实现页面中的页眉、页脚等内容作为页面的一部分动态更新，增强页面的动态效果，例如实现动态的以一个不占位置的iframe(width和height均为0)来向服务器请求页面中所需要的数据第4页iframe的缺点更新页面时仍然会产生闪烁感在无法精确

iframe中页面大小的情况下，当页面大小超出iframe的边界时候会造成截断，影响显示效果具有和标准frame同样的缺点无法直接 页面其它部分中的对象，必须首先得到父窗口的句柄，然后用间接方式第5页一种更好的替代方案——XMLHTTPXMLHTTP一种浏览器不离开页面主服务器请求数据的技术一种基于XML和HTTP的通信协议采用XML格式发送请求和接收响应发送请求和接收响应使用标准的HTTP协议XMLHTTP也可以传递非XML格式的文本数据第6页XMLHTTP相对于iframe的优点XMLHTTP不会造成页面的闪烁XMLHTTP适合传递大量的数据XMLHTTP更适合传递具有层次关系的数据XML相比HTML天生具有更强的描述能力

XML是目前描述数据间层次关系的最佳技术XMLHTTP的返回结果处理起来比iframe返回的HTML更加方便由于有强大的XPath的支持，检索XML

DOM要比检索HTML

DOM方便的多XMLHTTP传递的数据量更小传递相同的数据，XML比HTML效率要高第7页XMLHTTP请求数据的两种方式.XMLHTTP");同步方式适合于少量数据需要等待数据传输结束同步方式示例var

xmlhttp

=new

ActiveXObject("xmlhttp.open("GET","/hwsvr2/qe",false);xmlhttp.send(null);alert(xmlhttp.responseXML);第8页XMLHTTP请求数据的两种方式.XMLHTTP");异步方式适合于大量数据无须等待数据传输结束需要设置一个回调函数异步方式示例function

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

xmlhttp

=new

ActiveXObject("xmlhttp.open("GET","/hwsvr2/qe",true);xmlhttp.onreadystatechange=f1;xmlhttp.send(null);第9页XMLHTTP的意义XMLHTTP改变了传统的开发模式XMLHTTP创造了一种可以完全抛开基于form的请求/响应模式的全新开发模式更进一步，XMLHTTP使得完全在浏览器端开示层成为了可能，服务器端可以完全抛开JSP，全部基于Servlet做开发JSP的缺陷正是基于form的请求/响应模式造成的，现在这一切 都已经不再存在第10页从CGI、Servlet到JSPCGI的开发方式Servlet的开发方式一种提高CGI/Servlet开发效率的方法——页面模版<!--

content

begin

-->...<!--

content

end-->JSP的开发方式与CGI/Servlet反其道而行之仍然未能解决表示层与业务层分离的问题第11页MVC要解决的主要问题来自Smalltalk主要解决表示层与业务层分离的问题表示层与业务层不分造成的危害代码耦合太紧造成重用度低由于重用度低，开发效率自然也很低一旦表示逻辑发生大规模修改，很容易为业务逻辑引入新的bug第12页MVC中的代码的3种角色Model通常用标准Java类、或者用EJB实现实现复杂的业务逻辑处理结果封装在JavaBean中View通常用JSP实现只负责处理与显示有关的内容Controller通常用Servlet实现对于整个系统的处理流程进行调度和控制第13页MVC的处理流程Controller接受请求，根据请求的类型将请求委托给适当的Model处理Model执行复杂的业务逻辑处理，将结果封装在JavaBean中Controller将请求重定向到适当的ViewView从JavaBean中取得数据，以适当格式显示在页面上第14页MVC的优点彻底解决了表示层与业务层分离的问题清晰的分层提高了业务逻辑的重用度，因此提高了开发效率表示层与业务层分离的重要性一个例子：支持不同类型的客户端第15页实现了MVC的开发框架实现了MVC的开发框架StrutsTapestryWebworkOfbizJSFMVC已经成为了J2EE表示层开发的主流技术学习MVC的最佳

——《J2EE

模式》第16页MVC的缺点与设计模式的缺点相同增加了复杂性在提高大项目开发效率的同时降低了小项目的开发效率处理流程复杂造成了性能的下降没有解决如何提供RichClient的问题，仍然需要大量的开发提供RichClient无法避开JavaScript，传统的MVC框架几乎从来没有把JavaScript列入考虑范围简单地忽视JavaScript对于提高页面的表现能力没有任何帮助复杂的JavaScript的开发工作应该由程序员来承担第17页MVC的缺点MVC中View的开发仍然采用基于form的请求/响应模式，因此仍然具有这一模式的所有缺点MVC不可能解决表示层的所有问题，只解决了表示层一部分重要问题MVC除了对开发

有意义外，并没有给最终用户带来很多最终用户关心的是 的外在质量，而不是程序员所关心的内在质量M$讨巧之所在——重界面、轻架构第18页基于XMLHTTP实现表示层的新思路表示层所要解决的两大问题提供Rich

Client表示层与业务层分离两大问题的会合点——JavaScript完全采用JavaScript实现表示层的可能性一种新的思路跳开传统的基于form的请求/响应模式把表示层开发全部前推到浏览器端利用XMLHTTP主 服务器请求数据，根据请求的数据修改页面中的显示控件第19页新的开发模式的优点传输的数据量小，减轻了服务器的负担符合W3C所

的下一代Web开发方式B/S间传递的全部是纯XML数据，表示层与业务层实现了天然的分离表示层和业务层的边界与B/S的边界完全重合，不再需要实现MVC了第20页新的开发模式的优点提高了开发效率简化了体系结构可以实现类似于C/S结构的开发只要把尽量多的工作放在同一个页面中做，延迟离开页面的时间，就可以模拟C/S结构的开发方式2层结构存在的价值开发效率高便于开发各种RAD工具第21页新的开发模式的优点表示层开发

只需要精通JavaScript，不需要同时精通Java和JavaScript，降低了学习成本。表示层开发可以更加集中精力于提供RichClient这个能够产生

的重大问题。他可以用JavaScript开发出来各种可重用组件，提高页面的表现能力，还可以用JavaScript建造出功能强大的开发框架。第22页新的开发模式与MVC的区别以前需要把数据封装在JavaBean中，现在是封装在XML中。以前要由View决定如何显示，并将结果HTML发送给浏览器，现在先把HTML和一起发给浏览器，然后由

中的JavaScript决定如何显示。系统中可以没有Controller这样一个角色。也可以用Servlet实现一个Controller，只不过这时候View是HTML+

，而不是JSP。因此仍然可以实现一种新型的MVC。第23页对于新的开发模式的常见疑问解答由于把表示层完全前推到浏览器端，必然要开发大量的JavaScript代码，JavaScript可能会使系统不稳定。JavaScript调试起来很不方便，开发效率太低。JavaScript的性能很差，做大量JavaScript开发会降低系统的性能。JavaScript不够强大，因此不适合做复杂的处理。第24页对于新的开发方式的常见问题解答用户可以直接看到JavaScript的代码，因此可能会损害

的商业利益.这样做是否解决了MVC所要解决的问题?XMLHTTP好象是只有IE支持吧?XMLHTTP好象在M$平台上应用的比较多，Java平台上也能用吗?第25页四代Web开发方式四代Web开发方式第一代——CGI第二代——Servlet第三代——ASP/JSP/PHP/ColdFusion第四代——基于XMLHTTP的开发基于XMLHTTP的开发是目前最合理的开发