上面，我们定义了getData()方法，它通过使用jQuery.ajax()方法，发送同源请求调用GetListMessages接口，当数据获取成功加载到result div中显示并且分页数量（groupNumber）加一。
现在，我们已经实现了getData()方法，每当用户把滚动条拖到最底端时，就调用getData()方法获取数据，那么，我们需要把getData()方法和滚动条事件进行绑定，具体实现如下：
// The scroll event. $(window).scroll(function() { // When scroll at bottom, invoked getData() function. if ($(window).scrollTop() + $(window).height() == $(document).height()) { if (trackLoad.groupNumber <= totalGroups && !trackLoad.loading) { trackLoad.loading = true; // Blocks other loading data again. $('.animation_image').show(); $.getData(trackLoad); } } });
上面，我们实现了jQuery的scroll事件，当滚动条滚动到最底部时，调用getData()方法获取服务器中的数据。
CSS样式
接下来，我们给程序添加CSS样式，具体定义如下：
@import url("reset.css"); body,td,th {font-family: 'Microsoft Yahei', Georgia, Times New Roman, Times, serif;font-size: 15px;} .animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;} #result{width: 500px;margin-right: auto;margin-left: auto;} #result ol{margin: 0px;padding: 0px;} #result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}
图3 加载更多程序
上面，我们实现了jQuery自动加载更多程序，每当滚动条到底部时，发送异步请求获取服务器中的数据。
我们通过一个Demo程序，介绍了通过jQuery实现异步加载数据，当然这里也涉及到数据的页面查询问题，这里我们使用了一个自定义的公用表表达式Results_CTE来获取分页数据，然后，通过$.ajax()方法发送同源请求调用Web Service API；当数据获取成功后，通过JSON格式返回数据，最后，我们把数据显示到页面当中。