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

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

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

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

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

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

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


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 = $( "<div />" ).attr( "class" ,  "main_item" );
     topicItem.appendTo($( "#main_content_dynamic_id" ));
     // 添加用户头像      
     var  userIcon = $( "<i />" ).attr( "class" ,  "main_item_icon" );
     userIcon.appendTo(topicItem);
     // 添加挑战内容
     var  content = $( "<div />" ).attr( "class" ,  "main_item_content" );
     content.appendTo(topicItem);
 
     // >>>>>>设置挑战话题标题 
     var  topWrapper = $( "<div />" ).attr( "class" ,  "main_item_wrapper" );
     var  topicTitle = $( "<div />" ).attr( "class" ,  "main_item_title" );
     var  titleLink = $( "<a />" ).attr( "href" ,  "#" ).text(item.topicTitle);
     titleLink.appendTo(topicTitle);
     topicTitle.appendTo(topWrapper);
     topWrapper.appendTo(content);
 
     // >>>>>>设置挑战话题标题
     var  topicTime = $( "<div />" ).attr( "class" ,  "main_item_time" ).text(item.topicTime);
     topicTime.appendTo(topWrapper);
 
     // >>>>>>设置用户名称和昵称
     var  centerWrapper = $( "<div />" ).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 = $( "<div />" ).attr( "class" ,  "main_item_wrapper" );
     var  topicSummary = $( "<div />" ).attr( "class" ,  "main_item_substance" ).html(item.topicSummary);
     topicSummary.appendTo(middleWrapper);
     middleWrapper.appendTo(content);
 
     // >>>>>>设置话题附属信息
     var  bottomWrapper = $( "<div />" ).attr( "class" ,  "main_item_wrapper" );
     var  topicAttach = $( "<div />" ).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中增加两条记录

wKiom1P56pHDhGuzAAD-vLZtWng669.jpg

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

wKioL1P57AyREnk5AAMyG2VYpuI000.jpg

【备注】：

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

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

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