当页面滚动到低端时，执行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 :
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 }