通过动态包含和Ajax机制抽取Web应用的公共页面

在Java Web应用开发中，经常遇到的一种情况是，许多的页面中都包含着“公共页面”，这部分动态页面的特征是：访问量大，会带来较大的性能压力。功能设计上会动态地改变自身的元素。比如在登录前和登录后所展示的页面有所不同，比如以下代码：

 1 class="col-md-3" >
 2                     class="list-inline">
 3                     <%-- 根据Session中的loginUser是否为空, 来判断展示的内容 --%>
 4                       if test="${empty loginUser}">                    
 5                         登录
 6                         注册
 7                       if>
 8                         
 9                       if test="${not empty loginUser}">
10                         欢迎${loginUser.username}
11                         退出
12                         购物车
13                         我的订单
14                       if>    
15                         
16                     
17

这是一段前端JSP代码，实现的是根据服务器处理登录功能后，session对象中的loginUser值是否为空，来判断是否登录完成，从而决定显示哪一段的标签内容。

事实上，因为这是一段顶层页面的公共菜单栏，从而在成百上千的网页中都包括这段代码。如果每个页面都要更改这是不可想象的。

解决的方法是通过动态包含机制来解决。

静态包含和动态包含

以JSP为例说明页面的静态包含和动态包含

JSP中有两种包含：

静态包含：<%@include file="被包含页面"%>

动态包含：。下面以一个例子来说明如何使用包含。

实例：
项目文件树：

header.jsp文件中内容：

1 
2 
3 
4 
5 
6 
7 This is header

content.jsp文件中内容

 1  2 3 4 5 6 7 8 910
 
 col1
 col2
 
 
 col1
 col2

footer.jsp文件中内容：

1 
2 copyright: 1999-2010
3 
4

静态包含：
index.jsp文件中内容：

1 <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
2 <%@ include file="/header.jsp" %>
3 <%@ include file="/content.jsp" %>
4 <%@ include file="/footer.jsp" %>

页面显示结果：

被编译成的java文件：

动态包含

index.jsp文件中内容：

1 <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
2 
3 
4

页面显示结果：

被编译成的java文件：

这个例子说明，使用静态包含和动态包含最终的执行结果相同，但是实现过程不同，很明显编译成的java文件数目不同。

静态和动态包含的区别与联系

注:下文将包含有其它文件的jsp文件称为主体文件,比如上文中的index.jsp文件.将被包含的文件称为包含文件，比如上文中的header.jsp文件.

<%@ include file="" %>是指令元素。是行为元素
最终编译成java文件的数目不同。（从上面的例子可以看出）
- 静态包含在转换成为java文件的时候将包含文件的内容“复制”到主体文件，然后作为一个整体编译。最终编译为一个java文件。
- 动态包含是各个jsp文件分别转换，分别编译。最终编程成多个java文件。
执行时间不同
- 静态包含发生在：JSP编译为java文件阶段。
- 动态包含发生在：执行class文件阶段。动态加入。
静态包含在两个文件中不能有相同的变量，动态包含允许。
- 由于静态包含相当于将包含文件内容直接复制到主体文件中，如果出现相同的变量，就会出现覆盖等问题，导致文件出错。而动态包含相当于调用不同的jsp，变量所在的空间不同，自然不会出现覆盖等现象。
无论是动态包含还是静态包含，其request对象都是相同的。也就是同一个request对象。
- 静态包含最终编译成一个java文件，有一个request对象很好理解。而动态包含最终编译成多个jsp文件，为何会使用一个request对象呢？其实这些jsp组合的过程是一个请求转发的过程，自然也使用同一个request对象了。

静态包含和动态包含的使用
简单总结一下，就一句话：被包含的页面是静态页面就用静态包含，是动态页面就用动态包含。(当然不是很绝对，但是这样用没有错)

Ajax动态获取公共页面元素的JSON格式数据

公共页面，除了经常作为Header或Footer被多个页面引入外，更主要的是动态获取后台数据库Category数据作为菜单选项元素。在经典MVC架构中，这对应着一个Service和Dao服务如下：

Servlet层

1             CategoryService CategoryService=new CategoryServiceImp();
2             List list = CategoryService.getAllCats();
3             req.setAttribute("CatList", list);
4             return "/jsp/info.jsp";

Service层

1     CategoryDao CategoryDao=new CategoryDaoImp();
2     return CategoryDao.getAllCats();

Dao层

1 　　　　 String sql="select * from category";
2         QueryRunner qr=new QueryRunner(JDBCUtils.getDataSource());
3         return qr.query(sql, new BeanListHandler(Category.class));

但如果有成百上千的页面都需要用到这个公共页面，那就要在成百上千的交互中添加这段Servlet代码，这样的话代价很高。

实践中主要是利用Ajax和Json格式来实现这样的菜单功能。

基于JQuery的Ajax功能代码实现如下：

 1 $(function(){
 2     //向服务端CategoryServlet__>gteAllCats发起ajax请求,服务端经过处理,
 3     //将所有分类信息以JSON格式的数据返回,获取到返回的所有分类绑定在页面的显示分类区域
 4     var url="/ServletStoreDemo/CategoryServlet";
 5     var obj={"method":"findAllCats"};
 6     $.post(url,obj,function(data){
 7         //alert(data);
 8     
 9         //获取到服务端响应会的数据,经过观察data中存放的是一个JSON格式数组,遍历数组,动态的显示分类区域代码    
10         $.each(data,function(i,obj){
11             var li=""+obj.cname+"
";
12             $("#myUL").append(li);
13         });
14         
15     },"json");
16     
17 });

同时在CategoryServlet中，将数据库返回的数据，包装成JSON格式返回到客户端浏览器

1 jsOnStr=JSONArray.fromObject(list).toString();
2 //将全部分类信息响应到客户端
3 //告诉浏览器本次响应的数据是JSON格式的字符串
4 resp.setContentType("application/json;charset=utf-8");
5 resp.getWriter().print(jsonStr);

原理解析

1. 页面加载后，Ajax会向服务端CategoryServlet发起请求，触发getAllCats方法，服务端会处理该方法。

2. 服务端查询数据库，将所有分类信息以JSON格式的数据返回。前端获取到返回的所有分类，通过使用匿名函数，绑定分类数据到页面的显示分类区域。

3. 对获取的JSON格式数组进行遍历数组，动态的展示分类区域代码。

通过使用Redis缓存，可以大幅提高首页访问的性能，在以后的博文中将介绍其原理。

posted on 2018-11-20 15:10 Leoliu168 阅读(...) 评论(...) 编辑收藏