《第六章 视图层设计技术.ppt》由会员分享，可在线阅读，更多相关《第六章 视图层设计技术.ppt（26页珍藏版）》请在三一文库上搜索。
1、第六章 视图层设计技术,本章要点,自定义标签的设计原理与应用 在博客网站中定义博文分类标签 EL表达式与JSTL标签 实现博客网站中的博文管理功能 AJAX原理及应用,6.1 自定义标签,自定义标签是用户定义的JSP语言元素，通过封装反复执行的代码使之可以在多个应用程序中重复使用，从而提高开发效率。它在处理网页内容的数据及易用性方面比JavaBean都要出色。标准的应用框架，如Struts2，都提供了大量的标签。,自定义标签的设计原理 自定义标签是用户定义的JSP语言元素。当JSP页面包含一个自定义标签时被转化为Servlet，标签转化为对称为Tag Handler的对象的操作。接着当Serv
2、let执行时Web Container调用那些操作。自定义标签有着丰富的特点，它们可以: 通过调用页面传递参数实现定制; 访问所有对于JSP页面可能的对象; 修改由调用页面产生的响应; 自定义标签间可相互通信; 在同一个JSP页面中通过标签嵌套，可以实现复杂的交互。,开发自定义标签一般需要按照以下三个步骤来操作: 1创建标签的处理类 每个标签都有对应的标签处理类(Tag Handler Class)。标签处理类必须实现Tag接口。可以继承javax.servlet.jsp.TagSurpport类或者javax.servlet.jsp.BodyTagSupport来创建不带体或带体的标签。JS
3、P2.0以后引入了javax.servlet.jsp.tagext.SimpleTagSupport，可以用于建立简单的标签。,、,2创建标签库描述文件 标签库描述文件（Tag Library Descriptor File，简称TLD），该文件采用XML文件格式，提供了标签库中类和JSP中对标签引用的映射关系。 3. 在JSP中使用标签 首先在JSP中使用指令来声明对标签的引用。例如： 也可以使用绝对路径： 然后再使用标签。例如： ,案例6-1 设计博客网站的博文分类标签 设计两个标签：一个是博文分类目录标签用于博客界面的左侧栏，一个是博文分类下拉列表表用于发表文章时选择分类。前者运行效果如
4、图6-1所示，后者运行效果如图6-2所示。,技术要点 先建立标签描述文件命名为mytag.tld，这样在NetBeans下建立标签可以自动生成标签描述。 在blog.tag包下建立标签处理类，标签处理类中使用工厂类建立业务逻辑对象。 两个标签都包含blogId属性和categroyId属性。前者用于查出属于该博客的所有博文类别；后者用于表示当前分类。,6.2 表达式语言EL和 标准标签库JSTL,EL表达式语言 所有EL都是以“$”起始，以“”结尾的，通过“.”或“”存取数据。例如: $requestScope.msg 相当于 甚至可以简化为： $msg requestScope表示范围为re
5、quest，即在Request中寻找。如果不指定，依次在Page，Request，Session，Application范围寻找。假如途中找到msg，就直接返回，不再继续找下去，但是假如全部的范围都没有找到时，就返回null。,标准标签库JSTL 下面重点介绍一下核心标签库。 用于在JSP中显示数据。 例如，显示用户的用户名，如为空则显示guest： 用于保存数据，它的属性如表6-5所示。 例如，将test.testinfo的值保存到session的test2中，其中test是一个JavaBean的实例，testinfo是test对象的属性： 用于删除数据，它的属性如表6-6所示。 例如，从s
6、ession中删除test2变量： , 用于判断。 例如，如果user.userSex值为“先生”，则显示user is men： user is men. 用于多选择情况，不接受任何属性，与和标签配合使用。标签有一属性test，用于指明判断的条件。例如： user.generous is true. user.stingy is true. user.generous and user.stingy are false. , 循环控制标签，它的属性如表6-8所示。 例如，vectors是一个实现了java.util.Collection接口的对象，里面存放的是String数据，循环输出： ,
7、案例6-2 实现博文管理 实现博客网站中博文管理（发表、修改、删除）、博文目录、博文查看、博客首页等功能。博文管理如图6-6，发表博文界面如图6-7所示，修改博文界面如图6-8, 博文目录如图6-9，博客首页如图6-10所示，查看博文界面如图6-11所示。,技术要点 使用Servlet实现控制层。 使用JSTL标签结合EL表达式实现视图层。,6.3 AJAX技术,AJAX基础 什么是AJAX AJAX(Asynchronous JavaScript and XML)，是运用JavaScript和可扩展标记语言(XML)，实现浏览器与服务器通信。主要特点是能够实现异步提交。 AJAX 涉及到主要
8、技术有Javascript、XMLHttpRequest、DOM、XML。,XMLHttpRequest 对象 XMLHttpRequest供客户端同HTTP服务器异步通信的对象。通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。,XMLHttpRequest 对象的方法 abort()：停止当前请求。 getAllResponseHeaders()：作为字符串返问完整的headers。 getResponseHeader(“headerLab
9、el“)：作为字符串返问单个的header标签。 open(“method“,“URL“,asyncFlag,“userName“, “password“)：打开请求。 send(content)：发送请求。 setRequestHeader(“label“, “value“)：设置header并和请求一起发送。,XMLHttpRequest 对象的属性 onreadystatechange：状态改变的事件触发器。 readyState 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 responseText：服务器进程返回数据的文
10、本版本。 responseXML：服务器进程返回数据的兼容DOM的XML文档对象。 status：服务器返回的状态码, 如：404 = “文件末找到“ 、200 =“成功“。 statusText：服务器返回的状态文本信息。,AJAX应用步骤 1. 创建XMLHttpRequest对象 在网页中可以使用类似如下的脚本创建XMLHttpRequest 对象： var http_request= null; try http_request= new XMLHttpRequest(); catch (e1) var _msxmlhttp = new Array(“Msxml2.XMLHTTP.6.
11、0“,“Msxml2.XMLHTTP.5.0“, “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. 指定响应处
12、理函数 接下来要指定当服务器返回信息时客户端的处理方式。 http_request.onreadystatechange = function() ; 3发出HTTP请求 指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest 对象的open()和send()方法。例如： http_request.open(“GET“, “http:/www.example.org/some.file“, true); http_request.send(null);,4.处理服务器返回的信息 if(request.readyState=4)/0未初始化，1读取中,2已
13、读取，3交互中，4完成 if(request.status=200)/404文件没找到，200成功 var m=request.responseText;/responseXML; document.getElementById(“tt“).innerHTML=m; XMLHttpRequest对成功返回的信息有两种处理方式： responseText：将传回的信息当字符串使用； responseXML：将传回的信息当XML文档使用，可以用DOM处理。,案例6-3 实现无刷新登录 在用户注册界面增加一个按钮，标题设为“是否已用”，用于验证用户名是否被使用过。单击该按钮，如果用户名被使用过，显示“该用户名已被使用！”，否则显示“该用户名没有被使用过！”，运行界面如图6-12、图6-13所示。,技术要点 使用AJAX提交数据进行验证。定义三个JavaScript函数：createrequest()、send()和updatePage()，分别用于创建XMLHttpRequest对象，提交数据和处理返回结果。 控制类根据请求调用业务逻辑方法，如果该用户名没有被使用过向客户端发送“ok”,否则发送“no”。参见第五章YbUserAction的设计。,