Вы видели бесконечную прокрутку контента на некоторых веб-страницах? Например, в DZone.com, когда вы прокручиваете страницу до конца, новые ссылки будут загружаться автоматически, и у вас будет иллюзия, что страница прокручивается бесконечно. Еще один хороший пример — поиск изображений Bing .
Техника не сложна в реализации. Используя один сервлет и JSP, мы можем реализовать базовую функциональность с бесконечной прокруткой. Прежде чем углубляться в детали кода, посмотрите на это демо, чтобы почувствовать его: Демо Infinite Scroll
Чтобы реализовать это, нам нужен сервлет, который будет обслуживать динамический контент, и файл JSP, который будет иметь пользовательский интерфейс и действовать как клиент для получения контента. Ниже приведен код для этих двух файлов. Я оставляю вам другие общие вещи (например, запись web.xml и т. Д.).
Код для сервлета:
package com.vraa.demo; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class InfinitContentServlet extends HttpServlet { private static Integer counter = 1; protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); try { String resp = ""; for (int i = 1; i <= 10; i++) { resp += "<p><span>" + counter++ + "</span> This is the dynamic content served freshly from server</p>"; } out.write(resp); } finally { out.close(); } } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } }
Код для файла JSP:
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Load content while scrolling - Infinite Scroll with Java and JQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> body{ font-family:Arial; font-size:.93em; } #content-box{ background-color:#FAFAFA; border:2px solid #888; height:300px; overflow:scroll; padding:4px; width:500px; } #content-box p{ border:1px solid #EEE; background-color:#F0F0F0; padding:3px; } #content-box p span{ color:#00F; display:block; font:bold 21px Arial; float:left; margin-right:10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $contentLoadTriggered = false; $("#content-box").scroll(function(){ if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false) { $contentLoadTriggered = true; $.get("infinitContentServlet", function(data){ $("#content-wrapper").append(data); $contentLoadTriggered = false; }); } }); }); </script> </head> <body> <h1>Demo page: Infinite Scroll with Java and JQuery</h1> <p>This page is a demo for loading new content while scrolling.</p> <p style="margin:20px 0;background-color:#EFEFEF;border:1px solid #EEE;padding:3px;"> Credits: Veera Sundar | <a href="http://veerasundar.com">veerasundar.com</a> | <a href="http://twitter.com/vraa">@vraa</a> </p> <div id="content-box"> <div id="content-wrapper"> <p><span>1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p> <p><span>2</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p> <p><span>3</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p> <p><span>4</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p> <p><span>5</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero. </p> </div> </div> </body> </html>
Как это работает?
Секрет этого в свойстве scrolltop . Проверяя это значение, мы можем определить, достигла ли полоса прокрутки близко к основанию или нет. Если оно достигнуто, отправьте запрос AJAX на сервер, чтобы получить больше контента и добавьте его на страницу. Посмотрите на следующие две строки, которые делают это:
$contentLoadTriggered = false; $("#content-box").scroll(function(){ if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false) { $contentLoadTriggered = true; $.get("infinitContentServlet", function(data){ $("#content-wrapper").append(data); $contentLoadTriggered = false; }); } });