实现类似微博、QQ空间等的动态加载
微博、QQ空間等的動態加載方式屬于滾屏加載技術，獲取當前滾動條位置來觸發onscroll()函數，向服務器發起請求，將請求得到的新的數據動態加載在頁面上
本文利用該原理實現了動態加載，但不是檢測當前滾動條位置來觸發函數，而是由按鈕事件觸發，因此更簡單一些。
走過的彎路
1） 將目前讀取到的數據庫中的位置存放在session中，當要加載更多的時候，去session中獲得該值，動態加載后修改session中的值
錯誤原因：session是有緩存的，如果停留在當前頁面，得到的值還是一開始的session值，就算在該頁面進行了修改
2） 將服務器邏輯控制代碼通過內嵌的方式放在網頁頁面中，即通過<% %>的方式嵌入
錯誤原因：這些代碼在一開始加載網頁的時候，便在服務器端一次執行過后加載在網頁中，不會因為網頁的后續事件而觸發代碼段的重新執行
思路
1） 在數據庫中，為表項添加一個屬性state，用于表示該項是否已經加載
2） 進入該頁面時，先將所有的元素的state置0，表示所有的項目都還沒加載；通過選中根據一定排序規則排序后的前n項，并將這n項的state置1，表示已經加載
3） 在后續的操作中，若用戶想查看更多，選擇“加載更多”，即觸發加載事件，向服務器發送ajax請求，服務器取得還沒加載的項目根據一定排序規則后的前n項，生成網頁代碼字符串并返回；最后將這n項的state置1
4）當數據庫中所有的項目都已加載，則返回0，以供網頁端判斷處理
注意
1） 網頁端通過append()函數動態加載網頁元素，無法加載css等，會顯示異常，要加上$('#id').trigger("create");才能加 載成功；另外，我的例子中是在jquery mobile中實現的，為<ul>元素動態加載子元素，因此需要刷新<ul>， 即$('ul').listview("refresh");
2） Mysql語言中，選擇符合條件的記錄m到n，不能直接寫select * where condition limit m,n
該句的意思是從m開始的n項記錄
以上方式利用數據庫實現，在實際應用中，若考慮到多用戶，則不用采用上述情況，可以考慮使用cookie來存儲當前加載位置或者直接在js中利用變量存儲當前位置
源碼如下："user_message.jsp"（用于顯示留言頁）
<%--?
? ? Document ? : staff_info
? ? Created on : 2013-7-22, 9:28:58
? ? Author ? ? : zengyi
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1" />
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
? ? ? ? <title>乘客留言墻</title>
? ? ? ? <link rel="shortcut icon" href="../image/wireless_box.ico">
? ? ? ? <link rel="stylesheet" ?href="../jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.css">
? ? ? ? <script src="../jquery.mobile-1.3.0/jquery-1.9.1.min.js"></script>
? ? ? ? <script src="../jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.js"></script>
? ? ? ? <script src="../js/record_user_behavior_1.js"></script>
? ? ? ? <style>
? ? ? ? ? ? #wrap {?
? ? ? ? ? ? ? ? white-space:normal;
? ? ? ? ? ? ? ? word-wrap: break-word; ??
? ? ? ? ? ? ? ? word-break: break-all;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? text-align: left;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <%
? ? ? ? ? ? ResultSet re = null;
? ? ? ? ? ? Statement stmt = null;
? ? ? ? ? ? Connection con = null;
? ? ? ? ? ? String date, descript, time;
? ? ? ? ? ? try { ?
? ? ? ? ? ? ? ? Class.forName("com.mysql.jdbc.Driver").newInstance();
? ? ? ? ? ? ? ? String connectionUrl = "jdbc:mysql://localhost/wb?" +?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"user=root&password=526156";
? ? ? ? ? ? ? ? con = DriverManager.getConnection(connectionUrl);
? ? ? ? ? ? ? ? stmt = con.createStatement();
? ? ? ? ? ? } catch (SQLException e) {
? ? ? ? ? ? ? ? System.out.println("SQL Exception: "+ e.toString());
? ? ? ? ? ? }
? ? ? ? ? ? re = stmt.executeQuery("SELECT * FROM user_message_other order by id DESC limit 10"); ? ? ? ? ? ? ? //選擇前十條未讀的顯示
? ? ? ? %>
? ? ? ? <div data-role="page" data-theme="a">
? ? ? ? ? ? <div data-role="header" data-position="fixed">
? ? ? ? ? ? ? ? <h1 style="color: white; font-family: Helvetica,Arial,sans-serif; font-weight: bold;">乘客留言</h1>
? ? ? ? ? ? ? ? ?<a href="index.jsp" data-shadow="false" data-iconshadow="false" data-icon="arrow-l" data-iconpos="notext" data-ajax="false">Back</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div data-role="content">
? ? ? ? ? ? ? ? <ul data-role ="listview" data-inset ="true">
? ? ? ? ? ? ? ? ? ? ? ? <%
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(re.next()){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(re.previous()){};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? while(re.next()){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? descript = re.getString("descrip");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? date = re.getString("date");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? time = re.getString("time");
? ? ? ? ? ? ? ? ? ? ? ? %>
? ? ? ? ? ? ? ? ? ? ? ? <div data-role="button" style="width: 100%; height: auto">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div id="wrap" style="font-size: 16px; color: white; width: 100%; height: auto; "><%= descript %></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <br />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p style="margin-left:-15px;">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span style="float:left; color: white; "><strong>發布時間：<%= date %> <%= time %></strong></span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <%
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? %>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <div data-role="button" style="width: 100%; height: auto" οnclick="loadmore()">
? ? ? ? ? ? ? ? ? ? ?加載更多
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <script>
? ? ? ? ? ? var load_pos = 10;
? ? ? ? ? ? function loadmore(){
? ? ? ? ? ? ? ? var xmlhttp;
? ? ? ? ? ? ? ? if (window.XMLHttpRequest){
? ? ? ? ? ? ? ? ? ? xmlhttp=new XMLHttpRequest();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? xmlhttp.onreadystatechange=function(){
? ? ? ? ? ? ? ? ? ? if (xmlhttp.readyState==4 && xmlhttp.status==200){
? ? ? ? ? ? ? ? ? ? ? ? if(xmlhttp.responseText==0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("已加載完所有留言");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? load_pos += 10;
? ? ? ? ? ? ? ? ? ? ? ? ? ? $('ul').append(xmlhttp.responseText);
? ? ? ? ? ? ? ? ? ? ? ? ? ? $('ul').trigger("create");
? ? ? ? ? ? ? ? ? ? ? ? ? ? $('ul').listview("refresh");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? xmlhttp.open("GET","message_load.jsp?load_pos="+load_pos,false);
? ? ? ? ? ? ? ? xmlhttp.send();
? ? ? ? ? ? }
? ? ? ? </script>
? ? ? ? ? ? ? ? <%
? ? ? ? ? ? ? ? ? ? ? ? re.close();
? ? ? ? ? ? ? ? ? ? ? ? stmt.close();
? ? ? ? ? ? ? ? ? ? ? ? con.close();
? ? ? ? ? ? ? ? %>
? ? </body>
</html>
"message_load.jsp"用于服務器端加載信息及返回
<%--?
? ? Document ? : update_message
? ? Created on : 2013-5-13, 20:08:31
? ? Author ? ? : zengyi
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<% ?
? ? ResultSet re = null;
? ? Statement stmt = null;
? ? Connection con = null;
? ? String date, descript, time;
? ? int load_pos_start = Integer.parseInt(request.getParameter("load_pos"));
? ? String outstring = "";
? ? try { ?
? ? ? ? Class.forName("com.mysql.jdbc.Driver").newInstance();
? ? ? ? String connectionUrl = "jdbc:mysql://localhost/wb?" +?
? ? ? ? ? ? ? ? ? ? ? ? ? ?"user=root&password=526156";
? ? ? ? con = DriverManager.getConnection(connectionUrl);
? ? ? ? stmt = con.createStatement();
? ? ? ? re = stmt.executeQuery("SELECT * FROM user_message_other order by id DESC limit "+load_pos_start+",10"); ? ? ? //從未讀的消息中選擇十條顯示
? ? ? ? if(re.next()){
? ? ? ? ? ? if(re.previous()){};
? ? ? ? ? ? while(re.next()){
? ? ? ? ? ? ? ? descript = re.getString("descrip");
? ? ? ? ? ? ? ? date = re.getString("date");
? ? ? ? ? ? ? ? time = re.getString("time");
? ? ? ? ? ? ? ? outstring += "<div align=\"center\" data-role=\"button\" style=\"width: 100%; height: auto\">";
? ? ? ? ? ? ? ? outstring += "<div id=\"wrap\" style=\"font-size: 16px; color: white; width: 100%; height: auto; \">"+descript+"</div>";
? ? ? ? ? ? ? ? outstring += "<br />";
? ? ? ? ? ? ? ? outstring += "<p style=\"margin-left:-15px;\">";
? ? ? ? ? ? ? ? outstring += "<span style=\"float:left; color: white; \"><strong>發布時間："+date+time+"</strong></span>< /p></div>";
? ? ? ? ? ? }
? ? ? ? ? ? out.print(outstring);
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? out.print(0);
? ? ? ? }
? ? } catch (SQLException e) {
? ? ? ? System.out.println("SQL Exception: "+ e.toString());
? ? } catch (ClassNotFoundException cE) {
? ? ? ? System.out.println("Class Not Found Exception: "+ cE.toString());
? ? }
? ? finally{
? ? ? ? if (re !=null){
? ? ? ? ? ? try{ re.close(); }catch(SQLException sqlEx){}
? ? ? ? }
? ? ? ? if (stmt !=null){
? ? ? ? ? ? try{ stmt.close(); }catch(SQLException sqlEx){}
? ? ? ? }
? ? ? ? if (con !=null){
? ? ? ? ? ? try{ con.close(); }catch(SQLException sqlEx){}
? ? ? ? }
? ? }
? ? //-------------------------------------------------
%>
轉載于:https://www.cnblogs.com/plzdaye/p/3948011.html
總結
以上是生活随笔為你收集整理的实现类似微博、QQ空间等的动态加载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转）博弈问题与SG函数
- 下一篇： u3d资源打包只能打包场景材质，不能打包