模仿人人网 拖动滚动条到页面底端时加载新消息[AJAX、jQuery、web service]

当页面滚动到低端时，执行ajax方法从web service获取更多微博，并加载到页面上

GetMicroblogs.js

/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" />
$(function () {
var i = 0;
    $(window).bind("scroll", function (event) {
//滚动条到网页头部的 高度，兼容ie,ff,chrome
        var top = document.documentElement.scrollTop + document.body.scrollTop; //??????
        //网页的高度
        var textheight = $(document).height();
// 网页高度-top-当前窗口高度 
        if (textheight - top - $(window).height() <= 100) {
if (i >= 25) {
return; //控制最大只能加载到100条
            }
            $('#divContent').css("height", $(document).height() + 400);
            i++;
//可以根据实际情况，获取ajax动态数据加载到 divContent中
var dataParas = '{ pageIdx:"' + i.toString() + '"}'; // 这里要直接使用JOSN作为webService参数
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data: dataParas,
                url: "../MicroBlog.asmx/GetMicroBlogs",
                success: function (data) {
//将获取到的JSON对象数组转换为js对象
                    var blogs = eval("MicroBlogs = " + data.d);
//遍历微博对象数组，追加到divContent中
                    for (var j = 0; j < 4; j++) {
                        $('<div>' + blogs.MicroBlogs[j].Sender + '</div>').appendTo($('#divContent'));
                    }
                },
                error: function () {
                    alert("error occured!");
                }
            });
        }
    });
});
//页面加载时引发
$(document).ready(doc_ready);
//页面加载时加载前4条微博
function doc_ready() {
var jsonParas = '{ pageIdx:"0"}';
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: jsonParas,
        url: "../MicroBlog.asmx/GetMicroBlogs",
        success: function (data) {
var blogs = eval("MicroBlogs = " + data.d);
for (var j = 0; j < 4; j++) {
                $('<div>' + blogs.MicroBlogs[j].Sender + '</div>').appendTo($('#divContent'));
            }
        },
        error: ajax_error()
    });
}
function ajax_error() {
//alert("The call to webService is failed!!!!!");
}

前台页面：

ScrollLoadMicroBlog.aspx  :

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Site.Master" AutoEventWireup="true" CodeBehind="ScrollLoadMicroBlog.aspx.cs" Inherits="MicroBlogs_WEB.拉动滚动条加载微博.ScrollLoadMicroBlog" %>
<asp:Content  ContentPlaceHolder runat="server">
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="getMicroBlogs.js" type="text/javascript"></script>
<style>
    #divContent div{ font-size:100px; background:#ccc;margin-top:5px}
</style>
</asp:Content>
<asp:Content  ContentPlaceHolder runat="server">
<%-- 显示微博的区域 --%>    
<div  >
</div>
</asp:Content>

使用ajax方法从web service获得json数据：

MicroBlog.asmx :

 1 using System.Runtime.Serialization;
 2 using System.Web.Script.Serialization;
 3 
 4 namespace microblog_WEB
 5 {
 6     /// <summary>
 7     /// MicroBlog 的摘要说明
 8     /// </summary>
 9     [WebService(Namespace = "http://tempuri.org/")]
10     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
11     [System.ComponentModel.ToolboxItem(false)]
12     [System.Web.Script.Services.ScriptService]
13     public class MicroBlog : System.Web.Services.WebService
14     {
15 
16         [WebMethod]
17         public string HelloWorld ()
18         {
19             return "Hello World";
20         }
21 
22         [WebMethod]
23         public string GetMicroBlogs ( uint pageIdx )
24         {
25             string jsonStr = string.Empty;
26             for (uint i = pageIdx * 4; i < (pageIdx * 4) + 4; i++)
27             {
28                 MicroBlogModel blg = new MicroBlogModel();
29                 blg.Sender = "sender" + i;
30                 blg.Content = "content:" + i;
31                 jsonStr += (blg.ToJson()+",");
32             }
33             return ("{ \"MicroBlogs\": [" + jsonStr.Remove(jsonStr.Length - 1) + "  ]  }");
34         }
35 
36     }
37 
38     [Serializable]
39     public class MicroBlogModel
40     {
41         private string _sender = string.Empty;
42 
43         public string Sender
44         {
45             get { return _sender; }
46             set { _sender = value; }
47         }
48         private uint _senderID = 0;
49 
50         public uint SenderID
51         {
52             get { return _senderID; }
53             set { _senderID = value; }
54         }
55         private string _content = string.Empty;
56 
57         public string Content
58         {
59             get { return _content; }
60             set { _content = value; }
61         }
62         private DateTime sendtime;
63 
64         public DateTime Sendtime
65         {
66             get { return sendtime; }
67             set { sendtime = value; }
68         }
69 
70         public string ToJson ()
71         {
72             JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
73             return jsSerializer.Serialize(this);
74         }
75 
76     }
77 }