关于Ajax异步分页的一点点总结

1. 背景

    前段时间整理代码发现公司里大部分页面都是同步加载的,甚至包括分页等都是同步加载的,这样势必造成对网站的多次请求,造成部分服务请求纯属浪费的行为。还有一点不合理的地方应该是分页是放在后台代码里的,而不是使用的js的分页插件。放在后台分页,分页的处理cpu,内存都是使用的服务器,使用js的话这部分工作就可以转移到用户浏览器中了,这应该也是可以优化的一部分。后台分页竟然使用String(非StringBuilder)进行拼装的。

str +="<span title='到第一页'>«</span>";
str +="<span title='上一页'>‹</span>";

    于是准备修改。第一步是改成异步,第二步把分页的java代码改写成js插件。这里先介绍下异步的实现。

2. 方法

    ajax实现异步加载比较简单,对于一个web工程师应该是都知道的,卤煮以前实现的方式都是ajax请求,然后返回JSON数据,再用js拼装html代码,然后append到原来的dom中。这应该是大多数的实现方式,(没有使用Angular JS等类似的前端mvc框架)。但是这样会有什么问题,js代码本来格式就相对较混乱,然后再加上html代码,看起来就是一团糟,所以就想到了另外一种方式,ajax异步直接返回html格式的页面,直接把返回的html数据append到原来的dom,这样格式看起来就会非常的清爽(这种方式的页面处理工作仍然是服务器,服务器生成html数据返回到前台)。

3 测试页面和方法

测试页面test.jsp,负责分页的事件处理
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//w4C//DTD HTML 4.01 Transitional//EN" "http://www.w4.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
</head>
<body>
<div id="result">
    <jsp:include page="/WEB-INF/pages/testList.jsp"></jsp:include>
</div>
<script type="text/javascript">
    var url="<%=basePath %>/";
    $("#pageNum").live("click", function(){
        $.ajax({
            url:"http://localhost/test/testList.do",
            type:"post",
            dataType:"html",
            data:{"page":$("#pageNum").text()},
            success: function(data) {
                $("#result").empty().append(data);
            }
        });
    });
</script>
</body>
</html>

测试分页页面testList.jsp,里面只有分页信息
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:forEach items="${list}" var="num">
    <span>${num}</span>
</c:forEach>

<div id="pageNum">${pageNum}</div>

后台Java代码
/** 主页面跳转 */
@RequestMapping(value="/test")
public String test(HttpServletRequest req, Model model) {
    List<Long> list = getList(1);
    model.addAttribute("list", list);
    model.addAttribute("pageNum", 1 + 1);
    return "/test";
}
/** 分页页面 */
@RequestMapping(value="/testList")
public String testList(HttpServletRequest req, Model model, Integer pageNum) {
    List<Long> list = getList(pageNum);
    model.addAttribute("list", list);
    model.addAttribute("pageNum", pageNum + 1);
    return "/testList";
}

private List<Long> getList(int num) {
    List<Long> list = new ArrayList<Long>();
    for (long i = num; i < num + 10; i++) {
        list.add(i);
    }
    return list;
}

    这是jsp的实现,ftl的实现跟这个雷同,ftl代码可以使用freemarker的标签。
    这样看分页页面就简洁了好多,最起码能够保持html格式的风格。如果写在js里面的话,简单的还好,如果还夹杂着其他的判断,那么拼装方法就会变得非常复杂,而且不利于维护。
展开阅读全文

没有更多推荐了,返回首页