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