“无刷新页面”,只是一种不确切的效果描述(其实还有其他各种方法来实现这个效果),更确切的说法是:在页面上用JavaScript调用服务器端的一个方法,然后处理返回的数据。实现它最标准的方法当然是XMLHTTP。但是,程序员都是懒惰的家伙,每个人都希望能有更方便的方法,或者,更佳的包装。比如,LostiNET的Rane就是对XMLHTTP的一个很好的包装。
终于,在ASP.NET2.0里面,我们可以轻松的来做到这点了。服务器端任何实现了System.Web.UI.ICallbackEventHandler接口的控件,都可以通过RaiseCallbackEvent()方法来处理从页面上的JS脚本传递过来的请求和数据,处理后,再将结果传回给页面。这项能力的底层仍然是XMLHTTP。
下面是一个简单的演示:
在页面上,我们放上两个文本框和一个按钮:
1<INPUTid="txtMessage">
2<INPUTοnclick="callToServer();"type="button"value="CalltoServer">
3Result:<INPUTid="txtResult">
当点击按钮的时候,将调用JS脚本方法callToServer(),JS脚本如下:
1
function
callToServer()
2
{
3
var
param
=
document.getElementById(
"
txtUsername
"
).value;
4
var
context
=
""
;
5
<
%
=
ClientScript
%
>
6
}
7
8
function
handleResultFromServer(result, context)
9
{
10 document.getElementById( " txtResult " ).value = result;
11 }
12
handleResultFromServer()方法则负责将从服务器传回的数据写到txtResult这个文本框里面。
再看看服务器端的代码:
1
public
partial
class
Default_
ASPx : System.Web.UI.ICallbackEventHandler
2
{
3 private String ClientScript
4 {
5 get
6 {
7 return this .GetCallbackEventReference( this , " param " , " handleResultFromServer " , " context " );
8 }
9 }
10
11 public string RaiseCallbackEvent( string eventArgument)
12 {
13 return " 客户端在[ " + DateTime.Now.ToString() + " ]传送来 [ " + eventArgument + " ]. " ;
14 }
15 }
16
17
我们让页面直接实现ICallbackEventHandler接口,然后接口定义的RaiseCallbackEvent()方法中将服务器的时间和传来的数据一起返回回去。
ClientScript属性的作用是,它调用了页面的GetCallbackEventReference()方法,获得了让客户端有能力调用服务器端方法的JS脚本,并输出到页面的callToServer()方法中,这样,点击页面按钮时,就开始执行页面上包含了调用服务器方法的的callToServer()方法。
注意GetCallbackEventReference()方法的参数,在参数中,我们定义了客户端的哪个变量包含了要传递给服务器,服务器方法执行后,调用客户端的哪个方法等信息。GetCallbackEventReference()的详细参看请看这里。
最后,我们这个页面的执行效果就是:
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>