模仿人人网拖动滚动条到页面底端时加载新消息[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",data: jsonParas,255)">function (data) {
            var blogs = eval("MicroBlogs = " + data.d);
            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="getMicroBlogs.js"> style> #divContent div{ font-size:100px; background:#ccc;margin-top:5px} </> asp:Content="Content2"="MainContent"%-- 显示微博的区域 --%> div ="height: 600px;" id="divContent"> div>

使用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 string HelloWorld () 18 { 19 return Hello World"; 20 } 21 22 [WebMethod] 23 string GetMicroBlogs ( uint pageIdx ) 24 { 25 string jsonStr = string.Empty; 26 uint i = pageIdx * 4; i < (pageIdx * 4) + 4; i++) 27 { 28 MicroBlogModel blg = new MicroBlogModel(); 29 blg.Sender = sender" + i; 30 blg.Content = content:31 jsonStr += (blg.ToJson()+,"); 32 } 33 return ({ \"MicroBlogs\": [" + jsonStr.Remove(jsonStr.Length - 1) + ] }34 } 35 36 } 37 38 [Serializable] 39 class MicroBlogModel 40 { 41 private string _sender = 42 43 string Sender 44 { 45 get { return _sender; } 46 set { _sender = value; } 47 } 48 uint _senderID = 0; 49 50 uint SenderID 51 { 52 return _senderID; } 53 set { _senderID = value; } 54 } 55 string _content = 56 57 string Content 58 { 59 return _content; } 60 set { _content = value; } 61 } 62 private DateTime sendtime; 63 64 public DateTime Sendtime 65 { 66 return sendtime; } 67 set { sendtime = value; } 68 } 69 70 string ToJson () 71 { 72 JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); 73 return jsSerializer.Serialize(this); 74 } 75 76 } 77 }

原文链接：https://www.f2er.com/ajax/165997.html

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

Scott