原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://qingkechina.blog.51cto.com/5552198/1544928

    本文通过获取首页内容来讲解Web页面拖拽获取当前页数据，功能类似在google查看图片，这里面涉及如下五个步骤：

（1）页面首次加载时读取第一页数据

（2）触发滚动条拖拽动作

（3）Ajax异步读取下一页数据

（4）服务端把数据封装为Json返回

（5）把页面数据通过DOM元素绘制在页面上

接下来就按这五个步骤依次进行

1、页面首次加载时会加载main.js文件。在此文件中增加CURRENT_ITEM_INDEX变量，用于标识当前话题的索引值；增加方法getPageContent()，用于页面加载时调用，获取第一页数据。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/**  * 按时间降序排列后标识页面最后一条记录的索引值  */ var CURRENT_ITEM_INDEX = 0; $(document).ready(function() {     // 获取首页内容     getPageContent(CURRENT_ITEM_INDEX); }); function getPageContent(currentIndex) {     var data = {"currentIndex": currentIndex};     asyncRequest("mainContent.data", data, function(result)     {         // 由第3步实现     }); }

2、触发滚动条拖拽动作。在main.js加载时对window绑定scroll事件

1 2 3 4 5 6 7

$(document).ready(function() {     // 略     getBreifUserInfo();     // 监听滚动条拖拽事件     bindScrollEvent(); });

---

【备注】：由于涉及到不断地下拉滚动条，所以需要增加一个标识isQueryFlag，若正在查找数据时则不再响应下拉事件

/**

 * 是否正在查询数据标识

 */

var isQueryFlag = false;

---

3、Ajax异步读取下一页数据。实现bindScrollEvent()方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/**  * 绑定滚动条拖拽事件  */ function bindScrollEvent() {     var scrollBarDistance = 0; // 滚动条的当前位置     var documentHeight = 0; // 文档高度     var windowHeight = $(window).height(); // 当前窗口高度     $(window).scroll(function(){         scrollBarDistance = $(document).scrollTop();         documentHeight = $(document).height();         if(scrollBarDistance + windowHeight >= documentHeight)         {             if(isQueryFlag === true)             {                 return;             }             // 获取页面内容             getPageContent(CURRENT_ITEM_INDEX);         }     }); }

4、服务端把数据封装为Json返回

（1）修改配置文件system-data.xml，把拖拽动作方法与服务端读取数据的业务处理逻辑关联起来

1 2	<!--获取系统首页内容信息--> <business name="mainContent" business-class="com.medical.server.data.MainDataAction" />

（2）定义服务端读取数据的业务处理类com.medical.server.data.MainDataAction

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

@Override public String execute() throws FrameException {     // 获取当前记录索引值     String currentIndex = getParameter("currentIndex");     if (FrameUtil.isEmpty(currentIndex))     {         TopicResultBean result = new TopicResultBean();         result.setErrorCode(FrameErrorCode.REQUEST_PARAM_ERROR);         return gson.toJson(result);     }           // 从数据库中读取数据     int index = Integer.valueOf(currentIndex);     List<TopicDAO> topicList = TopicUtil.getTopicList(index);     if (FrameUtil.isEmpty(topicList))     {         TopicResultBean result = new TopicResultBean();         result.setErrorCode(FrameErrorCode.REQUEST_CONTENT_EMPTY);         return gson.toJson(result);     }           // 组装界面所需要内容     List<TopicBean> topicBeanList = new ArrayList<TopicBean>();     for (TopicDAO element : topicList)     {         UserDAO author = UserUtil.getUserByName(element.getUserId());                   TopicBean bean = new TopicBean();         bean.setUserName(author.getUserId());         bean.setUserIcon(author.getIconPath());         bean.setNickName(author.getUserSign());                   bean.setTopicId(element.getTopicId());         bean.setTopicTitle(element.getTopicTitle());         bean.setCommentNum(CommentUtil.getCommentNum(element.getTopicId()));         bean.setTopicSummary(getTopicSummary(element.getPrescript()));         bean.setTopicTime(element.getTopicTime());                   topicBeanList.add(bean);     }     // 返回JSON结果     TopicResultBean result = new TopicResultBean();     result.setErrorCode(0);     result.setTopicList(topicBeanList);     return gson.toJson(result); }

---

【备注】：为了使内容简洁，中间省略了一些处理函数

---

5、把页面数据通过DOM元素绘制在页面上

（1）异步读取数据，并对数据合法性进行判断

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 设置查询标识 isQueryFlag = true; asyncRequest("mainContent.data", data, function(result) {     // 若读取数据未成功直接返回     var resultJson = eval(result);     if(resultJson.errorCode != 0)     {         return;     }     var topicList = resultJson.topicList;     if(!topicList){         return;     }           // 重置数据当前索引值     CURRENT_ITEM_INDEX = CURRENT_ITEM_INDEX + topicList.length;           // 操纵DOM把数据绘制到页面上     $.each(topicList, function(i, item){         appendData(i, item);     });           // 重置查询标识     isQueryFlag = false; });

（2）DOM元素绘制的实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

/**  * 操纵DOM把数据绘制到页面上  */ function appendData(i, item) {     var topicItem = $("<p />").attr("class", "main_item");     topicItem.appendTo($("#main_content_dynamic_id"));     // 添加用户头像           var userIcon = $("<i />").attr("class", "main_item_icon");     userIcon.appendTo(topicItem);     // 添加挑战内容     var content = $("<p />").attr("class", "main_item_content");     content.appendTo(topicItem);     // >>>>>>设置挑战话题标题      var topWrapper = $("<p />").attr("class", "main_item_wrapper");     var topicTitle = $("<p />").attr("class", "main_item_title");     var titleLink = $("<a />").attr("href", "#").text(item.topicTitle);     titleLink.appendTo(topicTitle);     topicTitle.appendTo(topWrapper);     topWrapper.appendTo(content);     // >>>>>>设置挑战话题标题     var topicTime = $("<p />").attr("class", "main_item_time").text(item.topicTime);     topicTime.appendTo(topWrapper);     // >>>>>>设置用户名称和昵称     var centerWrapper = $("<p />").attr("class", "main_item_wrapper");     var userName = $("<label />").attr("class", "main_item_author").text(item.userName + "，");     var userNick = $("<label />").attr("class", "main_item_nickname").text(item.nickName);     userName.appendTo(centerWrapper);     userNick.appendTo(centerWrapper);     centerWrapper.appendTo(content);     // >>>>>>设置话题摘要信息     var middleWrapper = $("<p />").attr("class", "main_item_wrapper");     var topicSummary = $("<p />").attr("class", "main_item_substance").html(item.topicSummary);     topicSummary.appendTo(middleWrapper);     middleWrapper.appendTo(content);     // >>>>>>设置话题附属信息     var bottomWrapper = $("<p />").attr("class", "main_item_wrapper");     var topicAttach = $("<p />").attr("class", "main_item_attach");     topicAttach.appendTo(bottomWrapper);     bottomWrapper.appendTo(content);     // >>>>>>>>>>>>设置话题关注信息     var followLink = $("<a />").attr("href", "#");     var followIcon = $("<i />").attr("class", "main_item_attention");     followIcon.appendTo(followLink);     followLink.appendTo(topicAttach);     followLink.text("关注");     // >>>>>>>>>>>>设置话题关注信息     var commentLink = $("<a />").attr("href", "#");     var commentIcon = $("<i />").attr("class", "main_item_discuss");     commentIcon.appendTo(commentLink);     commentLink.appendTo(topicAttach);     commentLink.text(item.commentNum + "人评论");     // >>>>>>>>>>>>设置话题分享信息     var shareLink = $("<a />").attr("href", "#");     var shareIcon = $("<i />").attr("class", "main_item_share");     shareIcon.appendTo(shareLink);     shareLink.appendTo(topicAttach);     shareLink.text("分享");     // >>>>>>>>>>>>设置话题收藏信息     var favoriteLink = $("<a />").attr("href", "#");     var favoriteIcon = $("<i />").attr("class", "main_item_collection");     favoriteIcon.appendTo(favoriteLink);     favoriteLink.appendTo(topicAttach);     favoriteLink.text("收藏"); }

6、效果演示

（1）向数据表topictable中增加两条记录

（2）在浏览器输入http://localhost:8080/medical，效果如下：

---

【备注】：

1、可以多插入些记录，就可以观察拖拽效果了 

2、这里的拖拽事件没有考虑窗口的缩小与放大情况

3、为了简洁起见，没有增加返回顶端功能

---

本文出自 “青客” 博客，请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1544928