微博、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空间等的动态加载相关推荐

  1. java做类似于qq空间动态加载_实现类似微博、QQ空间等的动态加载

    微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上 本文利用该原理实现了动态加载,但不是检测当前滚 ...

  2. java mysql点赞功能_用Java做一个类似于微博QQ空间点赞的功能-Fun言

    点赞是一个互动性很强的功能,网站加入点赞可以增强用户之间的亲密度,可以利用点赞排出受欢迎文章或者其他的列表,所以今天教大家如何做一个类似于微博.QQ空间的点赞功能 需求分析: 首先要明确这个功能是需要 ...

  3. 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入...

    <社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...

  4. js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友)

    js分享代码(新浪微博,腾讯微博,QQ空间,QQ好友) 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  5. 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入

    <社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...

  6. php qq分享内容到指定qq,分享内容到新浪微博|腾讯微博|qq空间

    分享内容到新浪微博|腾讯微博|qq空间 (2013-10-29 14:05:30) 标签: 内容 分享 微博 空间 分类: php function forward_sinaweibo(title) ...

  7. Android动态加载XML文件及控件来简单实现QQ好友印象的功能

    在android开发中,我们常常会遇到界面布局控件不确定的情况.由于某些功能的原因或者为了体现某些app的特色等这些原因会导致我们在实现界面布局时需要动态去加载一些控件,那么下面就来介绍一下如何用动态 ...

  8. 百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据

    这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...

  9. 滚屏加载--无刷新动态加载数据技术的应用

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...

最新文章

  1. 005-Python之列表，元组，字符串，bytes及bytearray共有操作
  2. Objectice-C之类层次结构
  3. Android NDK学习笔记6：异常处理
  4. 再见，2014；你好2015
  5. clark变换_电力变换器PWM原理与实践，p43页，空间矢量理解
  6. 牛客SQL22 统计各个部门的工资记录数
  7. Nginx使用Expires增加浏览器缓存加速
  8. linux /dev/null用法
  9. 怎么提高文公写作水平？公文写作请示类模板
  10. 湖南科技大学计算机考研资料汇总
  11. Sklearn聚类算法之Affinity Propagation
  12. [django]梳理drf知识点
  13. Unity - Timeline 之Creating a Timeline Asset and Timeline instance（创建Timeline Asset和Timeline 实例）
  14. 在树莓派上做一个远程控制的小车（基于Python）
  15. 棋盘覆盖问题C++版
  16. 图数据库入门教程-深入学习Gremlin（1）：图基本概念与操作
  17. 从gRPC的重试策略说起
  18. 追洞小组 | Windows安装Immunity CANVAS教程
  19. OLED屏幕对比LCD为什么更加省电？
  20. Java后台拦截淘宝口令并解析淘口令里面特殊字符的正则

热门文章

  1. 【linux家常菜】redhat 6.5 安装yum
  2. MFC模态窗口与非模态窗口
  3. 国家电网和南方电网还傻傻分不清？
  4. 日常生活 -- STM32开发前言
  5. JS：javaweb——a标签实现跳转并打开新窗口
  6. pat天梯赛L1-052. 2018我们要赢
  7. TensorFlow for Hackers - Part I
  8. 三星t800Android 6.0,6.6毫米品质平板 三星GALAXY Tab S发布
  9. python获取系统时间为字符串_python怎么获取系统当前的时间
  10. svm的一些理解（网上收集）