使用jQuery
当然我们还可以使用目前比较热门的JavaScript框架jQuery，这个在VS2008中需要安装SP1后才能活得智能提示，在VS2010中已经集成了。如果使用jQuery上面的代码可以简化为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery获取服务器时间的例子</title>
<script src="jquery-1.2.6-cn.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function getTime() {
$.get("GetTime.aspx", { format: "yyyy-mm-dd hh:mm:ss" },
function(data) {//得到Ajax响应后的回调函数
//$("#time").append("<font color='red'>" + data + "</font>");
$("#time").html("<font color='red'>" + data + "</font>");
});
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>服务器时间</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整时间" onclick="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss');" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime('yyyy-MM-dd');" /></td>
</tr>
<tr>
<td><input type="button" value="时分秒" onclick="javascript:void getServerTime('hh:mm:ss');" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime('mm-dd');" /></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery获取服务器时间的例子</title>
<script src="jquery-1.2.6-cn.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function getTime() {
$.get("GetTime.aspx", { format: "yyyy-mm-dd hh:mm:ss" },
function(data) {//得到Ajax响应后的回调函数
//$("#time").append("<font color='red'>" + data + "</font>");
$("#time").html("<font color='red'>" + data + "</font>");
});
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>服务器时间</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整时间" onclick="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss');" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime('yyyy-MM-dd');" /></td>
</tr>
<tr>
<td><input type="button" value="时分秒" onclick="javascript:void getServerTime('hh:mm:ss');" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime('mm-dd');" /></td>
</tr>
</table>
</body>
</html>
可以看出在jQuery中提供了更多、更灵活的处理AJAX和XHTML的方法，简易大家都去了解一下。
在上面的方式中无论使用自己写全部JavaScript脚本还是利用Protype或者jQuery这类框架的方式，都是需要写一些JS脚本的，有没有尽可能少写脚本的方式呢?毕竟我们知道JS脚本调试起来相对较为困难些。答案是有的，那就是使用AjaxPro。
使用AjaxPro
下面是一个使用AjaxPro的例子，设计代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPager.aspx.cs" Inherits="AjaxPager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AjaxPro翻页效果</title>
<style type="text/css">
tr.items{
background-color: #8FACC2;
border-color:#FFFFFF;
line-height:18px;
}
tr.table{ /*表格内容*/
background-color: #F1F3F5;
border-color:#FFFFFF;
line-height:18px;
}
</style>
</head>
<body onload="JumpPage(0)">
<form id="form1" runat="server">
<div id="memberList">
数据装载中，请等待.....
</div>
</form>
<script language="javascript" type="text/javascript" defer="defer">
function JumpPage(var page)
{
var label=document.getElementById("memberList");
label.innerHTML=AjaxPager.GetString(parseInt(page*20),parseInt(20)).value;//假定每页显示20条数据
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AjaxPro翻页效果</title>
<style type="text/css">
tr.items{
background-color: #8FACC2;
border-color:#FFFFFF;
line-height:18px;
}
tr.table{ /*表格内容*/
background-color: #F1F3F5;
border-color:#FFFFFF;
line-height:18px;
}
</style>
</head>
<body onload="JumpPage(0)">
<form id="form1" runat="server">
<div id="memberList">
数据装载中，请等待.....
</div>
</form>
<script language="javascript" type="text/javascript" defer="defer">
function JumpPage(var page)
{
var label=document.getElementById("memberList");
label.innerHTML=AjaxPager.GetString(parseInt(page*20),parseInt(20)).value;//假定每页显示20条数据
}
</script>
</body>
</html>
后台逻辑代码如下(太长了不能发表，所以省略了，不过关键部分可以见附图)：
从上面的代码中可以看出使用AjaxPro之后可以不用写太多客户端代码，而且不同前面几种做法需要写一个页面调用显示，一个页面负责控制业务逻辑(一般情况下是这样的)，使用AjaxPro可以将调用页面和控制业务逻辑页面合在一起，这样服务端代码调试比较方面，而且也不用控制如何发送请求，请求什么时候响应完毕。
使用AjaxPro有几方面需要注意，就上面的代码中的注意事项说明如下：
js部分：
被调用的方法：
