【斗医】【18】Web应用开发20天

浏览数：23 / 时间：2015年06月09日

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

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

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

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

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

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

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

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

/**
 * 按时间降序排列后标识页面最后一条记录的索引值
 */
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事件

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

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

/**

* 是否正在查询数据标识

var isQueryFlag = false;

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

/**
 * 绑定滚动条拖拽事件
 */
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，把拖拽动作方法与服务端读取数据的业务处理逻辑关联起来

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

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

@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）异步读取数据，并对数据合法性进行判断

// 设置查询标识
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元素绘制的实现

/**
 * 操纵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中增加两条记录