实现功能：后台数据库中有两张表，分别是学生基本信息和详细信息，前台的标签中每隔一定时间自动更新，循环显示学生信息。
OK，Let's go。
Ajax for .NET 有一个封装好的类，只需下载下来作为引用加入工程就可以直接使用了。这是第一步。
添加好引用后可以开始写类了，以下是我用于从后台数据库取数据并返回给前台的Ajax方法类。
Public Class AjaxMethod
Private Function GetDataSet(ByVal strSQL As String) As DataSet
Dim strCnn As String
Dim da As MySql.Data.MySqlClient.MySqlDataAdapter
Dim ds As New DataSet
strCnn = System.Configuration.ConfigurationSettings.AppSettings("ConnectionString")
Try
da = New MySql.Data.MySqlClient.MySqlDataAdapter(strSQL, strCnn)
Catch ex As Exception
Exit Function
End Try
da.Fill(ds)
Return ds
End Function
<Ajax.AjaxMethod()> _
Public Function GetBasicInfo() As DataSet
Dim strSQL As String
strSQL = "select * from StudentList"
Return GetDataSet(strSQL)
End Function
<Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
Public Function GetDetail(ByVal strParam As String) As DataSet
Dim strSQL As String
Dim intBegin As Integer
Dim intEnd As Integer
intBegin = strParam.IndexOf("SNo")
intEnd = strParam.IndexOf(" ")
strParam = strParam.Substring(intBegin + 5, intEnd - 3)
strSQL = "select * from StudentDetail where SNo='" + strParam + "'"
Return GetDataSet(strSQL)
End Function
End Class
OK，写完类后自然是要在前台调用这些方法，这之前有两步工作需要做。
第一：在Page_OnLoad事件中注册我们写的Ajax方法类。 我的代码如下：
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码
Ajax.Utility.RegisterTypeForAjax(GetType(AjaxMethod))
End Sub
第二：在web.config中捕捉所有POST和GET动作，并用Ajax机制处理之。添加在<system.web>分支中
<!--Add HttpHandler-->
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>
Good～，现在后台就完成了，接下来要做的就是在前台通过JavaScript调用这些后台的方法来获取数据了。
这里我把代码写在了JS文件中（show.js），以提高重用程度。
以下是Show.js的全部代码:
var i=0,j=3;
function getBasic()
{
AjaxMethod.GetBasicInfo(getBasic_CallBack);
}
function getBasic_CallBack(resp)
{
if (resp.value!=null)
{
dsBasic=resp.value;
setInterval("showData(dsBasic)",4000);
setInterval("countDown()",1000);
}
}
function showData(objDS)
{
var strSNo;
var strSName;
var dsBasic;
if (i<objDS.Tables[0].Rows.length)
{
strSNo=objDS.Tables[0].Rows[i].SNo;
strSName=objDS.Tables[0].Rows[i].SName;
i++;
}
if (i==objDS.Tables[0].Rows.length)
{
i=0;
}
document.getElementById("lbl_Data").innerText="SNo: "+strSNo+" SName: "+strSName;
}
function countDown()
{
if (j>=0)
{
document.getElementById("lbl_Num").innerText="Change After " + j + " seconds";
j--;
}
if(j<0)
{
j=3;
}
}
function getDetail(strParam)
{
AjaxMethod.GetDetail(strParam,GetDetail_CallBack);
}
function GetDetail_CallBack(resp)
{
var dsDetail;
var strBirthYear;
var strAddress;
var strMobile;
var strSNo;
if (resp.value!=null)
{
dsDetail=resp.value;
strBirthYear=dsDetail.Tables[0].Rows[0].BirthYear;
strAddress=dsDetail.Tables[0].Rows[0].Address;
strMobile=dsDetail.Tables[0].Rows[0].Mobile;
strSNo=dsDetail.Tables[0].Rows[0].SNo;
document.getElementById("lbl_Detail").innerHTML="<br>SNo: "+strSNo+"<br><br>BirthYear: "+strBirthYear+"<br><br>Address: "+strAddress+"<br><br>Mobile: "+strMobile;
document.getElementById("lbl_Detail").style.display="block";
}
}
function hideDIV()
{
document.getElementById("lbl_Detail").style.display="none";
}
方法说明：
1.getBasic 获取基本信息
2.getDetail 获取详细信息，在鼠标指向标签时发生，弹出层显示详细信息
3.showData 获取信息后定时更新标签
4.CountDown 一个倒计时提示标签
5.hideDIV 鼠标移开标签时将详细信息层隐藏
6.getBasic_CallBack 回调函数
7.getDetail_CallBack 回调函数
前台部分HTML代码：
<DIV id="lbl_Data" onmouseover="getDetail(this.innerText);" style="DISPLAY: inline; WIDTH: 256px; HEIGHT: 24px" onmouseout="hideDIV();" align="left" ms_positioning="FlowLayout">Loading Data...</DIV>
<script language="javascript">
getBasic();
</script>
完成～！
