模仿人人网 拖动滚动条到页面底端时加载新消息[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 ID="Content1" ContentPlaceHolderID="HeadContent" 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 ID="Content2" ContentPlaceHolderID="MainContent" runat="server"><%-- 显示微博的区域 --%>        <div style="height: 600px;" id="divContent">            </div></asp:Content>

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

MicroBlog.asmx :

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.WebService14     {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 MicroBlogModel40     {41         private string _sender = string.Empty;42 43         public string Sender44         {45             get { return _sender; }46             set { _sender = value; }47         }48         private uint _senderID = 0;49 50         public uint SenderID51         {52             get { return _senderID; }53             set { _senderID = value; }54         }55         private string _content = string.Empty;56 57         public string Content58         {59             get { return _content; }60             set { _content = value; }61         }62         private DateTime sendtime;63 64         public DateTime Sendtime65         {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 }