如何不用組件實現(xiàn)Ajax效果_AJAX教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：ajax跨域訪問代理文件下載(asp、php、asp.net)
最近做東西遇到了ajax跨域（cross domain）訪問的問題，最后采用了Application Proxies 方式解決，即在本域內(nèi)放置一個代理文件（視本域支持的開發(fā)語言選定asp、asp.net或是其他），此代理文件將url參數(shù)（QueryString）發(fā)送到目標域?qū)撁娅@取html代碼，然

現(xiàn)在.NET的Ajax組件確實不少了，微軟的ajax extensions用起來很方便，一個UpdatePanel就可以搞定一切。不過，可能有些朋友更愿意自己來寫。那么在.NET里，你是否知道ICallbackEventHandler呢？

大家應該都知道ASP.NET頁面調(diào)用時的幾種方式：Postback/Cross-page posting/Server transfer/Callback，如果你還不太了解，你可以看看MSDN：How t Determine How ASP.NET Web Pages Were Invoked

現(xiàn)在要說的，就是Callback這種調(diào)用方式。
簡單的說，使用Callback可以得到你平�？吹侥敲碅jax效果，即不刷新整個頁面，只更新其中一個部分。

使用Callback，只需要做以下4步：

1、在你的頁面中繼承System.Web.UI.ICallbackEventHandler接口。

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
}
public void RaiseCallbackEvent(string eventArgument)
{
}
#endregion
}

如果你沒有使用code-behind，那你也可以在aspx頁面頂部加入下面的代碼：

<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

2、在前臺寫一段自定義的javascript，更新頁面

這一段javascript用來更新頁面的某個局部，就像你平常操作的一樣，寫些document.getElementById("xxx").innerHTML="working on your request...."。

你可能有些迷糊，就得到了嗎？連個什么XMLHttpRequest都沒有哩……

3、在Page_Load中再注冊一段javascript

string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), .......//省略了一大串

上面的GetCallbackEventReference是用來得到客戶端函數(shù)的引用，發(fā)起一個callback到服務器端的，你不必知道詳細內(nèi)容。

你只需要了解：

第一個參數(shù)填this,用來handle客戶端的callback的，它必須繼承ICallbackEventHandler接口并提供RaiseCallbackEvent方法，我們已經(jīng)在繼承了這個接口，上面第一點中的代碼也有RaiseCallbackEvent方法，只是還沒有具體寫內(nèi)容呢。
第二個參數(shù)就是那個從客戶端傳到服務器端的參數(shù)。如果你想要注冊的檢查用戶是否可用，那么這里的值就是用戶輸?shù)哪莻€值。
第三個參數(shù)是前臺的javascript函數(shù)名，在第二步中我們寫的名字是：GetFlag。當數(shù)據(jù)好了，這個javascript函數(shù)就會用到。
第四個參數(shù)一般用不上。

返回值：一個函數(shù)的名字，是客戶端調(diào)用的函數(shù)名。這個函數(shù)會調(diào)用到服務器端了。

4、調(diào)用你的函數(shù)。

上面一定是 onclick="callServer()"嗎？呵呵，這要看你了，你在Page.ClientScript.RegisterClientScriptBlock注冊的什么javascript函數(shù)名字，就是什么名字了。（在第3步的第二行code中）

已經(jīng)完了。如果你還是一頭霧水，沒關系，下面看一個實例：

我們寫一個檢測用戶是否已經(jīng)注冊的小程序，這在每個用戶注冊頁面上都可以用到。

前臺Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>
<!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>ICallbackEventHandler Demo</title>
<style type="text/css">
*{font: 12px "verdana";}
#user{border:1px solid #080; height:50px;width:500px;padding:20px;}
input{border:1px solid #508FCC;background:#FFF;}
.ok{color:#090;}
.bad{color:#F00}
#result{display:inline;margin: 0 5px 0;}
</style>
<script type="text/javascript">
function GetFlag(arg)//這里的javascript函數(shù)就是服務器查詢完成要調(diào)用的函數(shù)，我們把服務器返回的數(shù)據(jù)直接顯示上ID為result的div中。
{
document.getElementById("result").innerHTML=arg;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="user">
<input type="text" value="99love" maxlength="10" id="userid" />
<input type="button" value="check it!" onclick="callServer()" /><div id="result">查詢用戶是否被使用。</div>
</div>
</form>
</body>
</html>

上面有一個<input type="button" value="check it!" onclick="callServer()" />，這是我說的第5步的內(nèi)容，這個函數(shù)名字callServer應該和Lage_Load中注冊的相對應的。

后臺Default.aspx.cs：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
private string _arg = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string script = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetFlag", "");//上面的第3步，取得這個客戶端函數(shù)名，script的值可能是這樣的：WebForm_DoCallback('__Page',arg,GetFlag,\"\",null,false)
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callServer", "\nfunction callServer(){\ndocument.getElementById(\"result\").innerHTML=\"正在檢查 \"+document.getElementById(\"userid\").value+\" 的可用性，請稍候...\";\nvar arg=document.getElementById(\"userid\").value;\n" + script + ";\n}", true);
//上面這一行有點長了，第二個參數(shù)最長，看到function callServer()了嗎，這就是和前臺對應的那個函數(shù)名<input onclick=XXX，請記得，一定要在callServer函數(shù)中加入script的值，也就是上一行的上一行（17行）那個值。注意后面的var arg=...，這個arg和17行的arg是對應的。
}
#region ICallbackEventHandler Members
public string GetCallbackResult()
{
System.Threading.Thread.Sleep(1000);//讓線程睡一會，我們好看效果。這是用來模擬不良網(wǎng)絡狀況的。
return _arg;//返回一個string型，這個string在RaiseCallbackEvent函數(shù)中是賦過值的，看下面哦。
}
public void RaiseCallbackEvent(string eventArgument)
{
if (eventArgument.Equals("99love") || eventArgument.Equals("blueidea"))//假設這兩個名字不能注冊，實際操作中，你要是比對數(shù)據(jù)庫記錄的，我們現(xiàn)在簡化處理了。
_arg = string.Format("<span class=\"bad\">很遺憾，{0} 已被使用。</span>", eventArgument);//要么已經(jīng)注冊了
else
_arg = string.Format("<span class=\"ok\">恭喜您，{0} 可以注冊。</span>", eventArgument);//要么就可以注冊
}
#endregion
}