页面实现Lazy Loading效果,类似于微博
用到Jquery插件：http://imakewebthings.com/jquery-waypoints/
示例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>lazyload</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Infinite Scrolling with jQuery Waypoints</title><meta name="description" content="An example of how to build an infinite scrolling page on top of the jQuery Waypoints plugin"><meta name="viewport" content="width=480"><script src="jslib//modernizr.custom.js"></script></head><body><div id="wrapper"> <center><table id="container" style="border:1px solid #96C2F1; background-color: #EFF7FF; width: 300px; height: 100px; margin: 0px auto;"><tr><td>id</td><td>name</td></tr><tr><td>2</td><td>Lucy</td></tr><tr><td>3</td><td>James</td></tr><tr><td>4</td><td>Gaga</td></tr></table></center><div id="footer"></div></div><script src="jslib/jquery-1.7.1.js"></script><script src="jslib/waypoints.js"></script><script type="text/javascript"><!--$(document).ready(function() {var $loading = $("<div class='loading'><p>Loading more items…</p></div>"),$footer = $('#footer'),opts = {offset: '100%'};$footer.waypoint(function(event, direction) {$footer.waypoint('remove');$('body').append($loading);//alert($('#container tr:last td:first').text());var id=$('#container tr:last td:first').text();$.post('lazyload', {id: id}, function(data) {if(data!=-1){//alert("call back:"+data);var jsons = eval(data);//alert(jsons);for(i in jsons){$('#container').append("<tr><td>"+jsons[i].id+"</td><td>"+jsons[i].name+"</td></tr>");}//$('#container').append($data.find('.article'));//$('#container').append($data);$loading.detach();//$('.more').replaceWith($data.find('.more'));$footer.waypoint(opts);}else{//alert('nodata');$loading.detach();}});}, opts);});--></script></body></html>import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.hp.bean.User;public class LazyLoadAction extends HttpServlet {/** * Destruction of the servlet. <br> */public void destroy() {super.destroy(); // Just puts "destroy" string in log// Put your code here}/** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();int id=Integer.valueOf(request.getParameter("id"));System.out.println("-----------id:"+id);List<User> list = getUserList(id, id + 30);if(list.size()>0){StringBuilder sb=new StringBuilder();sb.append("[");for(int i=0; i<list.size(); i++){User u=list.get(i);sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "},");if(i==list.size()-1)sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "}]");}System.out.println(sb.toString());out.print(sb);}else{out.print("-1");}out.flush();out.close();}/** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}/** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */public void init() throws ServletException {// Put your code here}public static List<User> getUserList(int start,int end){String url="jdbc:mysql://localhost:3306/test";String jdbcdriver="com.mysql.jdbc.Driver";Connection con=null;List<User> list=new ArrayList<User>();try {Class.forName(jdbcdriver);con=DriverManager.getConnection(url, "root", "root");String sql="select * from user where id>? and id<?";PreparedStatement pst=con.prepareStatement(sql);pst.setInt(1, start);pst.setInt(2, end);ResultSet rs=pst.executeQuery();while(rs.next()){User user=new User();user.setId(rs.getInt(1));user.setName(rs.getString(2));list.add(user);}rs.close();con.close();}catch(Exception e){e.printStackTrace();}return list;}}public class User {private Integer id;private String name;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}}