Client端异步Callback的应用与介绍
2010-12-09 15:42
232 查看
转载：http://blog.csdn.net/goalbell/archive/2007/09/16/1787213.aspx
1、Client端异步Callback的介绍:它是通过前端Client端向后端服务器传递参数数据，服务器再以接收到的参数进行查询或处理，最后将结果回传给前端显示结果的技术。
2、如果大家AJAX 异步技术比较熟悉的话，那么对Client-Callback技术应该也不会陌生的。Client-Callback技术与AJAX其实实现的效果是一样的，只不过实现的技术与方式不同罢了。她们异步传送与接收少量数据，实现局步刷新，而非Postback整个ViewState状态。这样比起传统的给用户一个不错的体验！
3、上面已经粗略介绍了一下Client-Callback技术，下面我将会举一个例子来阐述一下实现的过程吧。
客户端Callback.aspx页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallBack.aspx.cs" Inherits="CallBack" %>
<!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>Client端的异步Callback</title>
<script language="javascript" type="text/javascript">
function Sum()
{
var Result=document.getElementById("txtResult");
CallServer(Result.innerText,"");
}
function ReceiveServerData(rvalue)
{
txtResult.innerText=rvalue;
}
window.setInterval("Sum()",1000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="txtResult">0</div>
</div>
</form>
</body>
</html>
服务器端的Callback.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 CallBack : System.Web.UI.Page,ICallbackEventHandler
{
public int Num = 0;//初始化计数器;
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;//定义一个管理客户端脚本的方法cs
string cbReference = cs.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");//获取一个对ReceiveServerData客户端函数的引用,将启动一个对服务器端事件的客户端回调
string CallBackScript="function CallServer(arg,context){"+cbReference+";}";
cs.RegisterClientScriptBlock(this.GetType(), "CallServer", CallBackScript, true);//动态注册js脚本
}
public void RaiseCallbackEvent(string i)
{
Num = Convert.ToInt32(i) + 1;
}
public string GetCallbackResult()
{
return Num.ToString();//返回计算器
}
}
本人认为实现该技术的有两大重点：
第一、在Page_Load方法中获取ReceiveServerData客户端函数的引用，并进行回调。
第二、页面必须继承IcallbackEventHandler，实现该接口需要两种方法：RaiseCallbackEvent()和GetCallbackResult()。要注意的是第一个RaiseCallbackEvent()方法不用返回值的，参数类型只有一个并且是string类型的；而GetCallbackResult()方法要返回string类型值，并且是无参数的。
最后，本人可能分析得不怎么够好，若有什么错或者其他原因请不吝请教。
Client端异步Callback实现的原理
我已经介绍了Client-Callback技术,那么让我们来探讨一下Client-Callback技术怎样实现异步刷新吧(实现原理)。正所谓"知其然，知其所以然"。
运行前一篇文章的(http://blog.csdn.net/goalbell/archive/2007/09/16/1787213.aspx)例子,用firebug调试并打开查看一下WebResource.axd?d=23ERqfzqTJs6_Rg9n1je_Q2&t=633249794114687500。你会发现里面大有文章，呵呵！微软已经帮你封装好实现异步所需要的技术了，即是XmlHttpRequest对象。从firebug里面的js代码总共有537行，实现的技术大部分围绕XmlHttpRequest对象以及Dom技术。下面分析核心代码(core)的实现过程吧。Let's Start！
下面的一段代码取自WebForm_DoCallback的函数里面：
var xmlRequest,e;
try {
xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
}
}
var setRequestHeaderMethodExists = true;
try {
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) {}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) {
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
xmlRequest.open("POST", theForm.action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(postData);
return;
}
分析一下：
首先实例化一个兼容三种浏览器(IE、FF、SF)的XmlHttpRequest对象，接着调用javascript内置的Object类来建立一个callback构造函数，该构造函数总共有四个属性。至于Callback构造函数有什么用呢？接下来这一句callback.xmlRequest=xmlRequest可以看到，将XmlHttpRequest的实例赋给了callback的属性了。最后XmlHttpRequest的实例(xmlRequest)，即xmlRequest的回调方法onreadystatechange指向了WebForm_CallbackComplete，而WebForm_CallbackComplete这个函数干什么的呢？下面会分析的；xmlRequest向服务器发送请求，theForm.action怎样获得的呢？她是通过WebForm_DoPostBackWithOptions函数来获得的。由于xmlRequest是用"POST"方法向服务器请求的，所以要标明请求的头格式以及发送的参数。好了分析完上面的代码之后，我们一起来看一下WebForm_CallbackComplete究竟做了什么呢？
下面的是完整的函数示例：
function WebForm_CallbackComplete() {
for (i = 0; i < __pendingCallbacks.length; i++) {
callbackObject = __pendingCallbacks[i];
if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
WebForm_ExecuteCallback(callbackObject);
if (!__pendingCallbacks[i].async) {
__synchronousCallBackIndex = -1;
}
__pendingCallbacks[i] = null;
var callbackFrameID = "__CALLBACKFRAME" + i;
var xmlRequestFrame = document.getElementById(callbackFrameID);
if (xmlRequestFrame) {
xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
}
}
}
我们看一下，_pendingCallbacks怎样来的，var __pendingCallbacks = new Array()；原来_pendingCallbacks是一个数组变量来的，其实从循环也可以猜到了。接着就将它赋给一个callback对象了，其实callback对象上面已经实例化了(上面那个callback构造函数)。最后就是判断xmlRequest的状态码来执行WebForm_ExecuteCallback函数。
最后，如果大家有什么好的看法可以反馈给我。
1、Client端异步Callback的介绍:它是通过前端Client端向后端服务器传递参数数据，服务器再以接收到的参数进行查询或处理，最后将结果回传给前端显示结果的技术。
2、如果大家AJAX 异步技术比较熟悉的话，那么对Client-Callback技术应该也不会陌生的。Client-Callback技术与AJAX其实实现的效果是一样的，只不过实现的技术与方式不同罢了。她们异步传送与接收少量数据，实现局步刷新，而非Postback整个ViewState状态。这样比起传统的给用户一个不错的体验！
3、上面已经粗略介绍了一下Client-Callback技术，下面我将会举一个例子来阐述一下实现的过程吧。
客户端Callback.aspx页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallBack.aspx.cs" Inherits="CallBack" %>
<!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>Client端的异步Callback</title>
<script language="javascript" type="text/javascript">
function Sum()
{
var Result=document.getElementById("txtResult");
CallServer(Result.innerText,"");
}
function ReceiveServerData(rvalue)
{
txtResult.innerText=rvalue;
}
window.setInterval("Sum()",1000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="txtResult">0</div>
</div>
</form>
</body>
</html>
服务器端的Callback.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 CallBack : System.Web.UI.Page,ICallbackEventHandler
{
public int Num = 0;//初始化计数器;
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;//定义一个管理客户端脚本的方法cs
string cbReference = cs.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");//获取一个对ReceiveServerData客户端函数的引用,将启动一个对服务器端事件的客户端回调
string CallBackScript="function CallServer(arg,context){"+cbReference+";}";
cs.RegisterClientScriptBlock(this.GetType(), "CallServer", CallBackScript, true);//动态注册js脚本
}
public void RaiseCallbackEvent(string i)
{
Num = Convert.ToInt32(i) + 1;
}
public string GetCallbackResult()
{
return Num.ToString();//返回计算器
}
}
本人认为实现该技术的有两大重点：
第一、在Page_Load方法中获取ReceiveServerData客户端函数的引用，并进行回调。
第二、页面必须继承IcallbackEventHandler，实现该接口需要两种方法：RaiseCallbackEvent()和GetCallbackResult()。要注意的是第一个RaiseCallbackEvent()方法不用返回值的，参数类型只有一个并且是string类型的；而GetCallbackResult()方法要返回string类型值，并且是无参数的。
最后，本人可能分析得不怎么够好，若有什么错或者其他原因请不吝请教。
Client端异步Callback实现的原理
我已经介绍了Client-Callback技术,那么让我们来探讨一下Client-Callback技术怎样实现异步刷新吧(实现原理)。正所谓"知其然，知其所以然"。
运行前一篇文章的(http://blog.csdn.net/goalbell/archive/2007/09/16/1787213.aspx)例子,用firebug调试并打开查看一下WebResource.axd?d=23ERqfzqTJs6_Rg9n1je_Q2&t=633249794114687500。你会发现里面大有文章，呵呵！微软已经帮你封装好实现异步所需要的技术了，即是XmlHttpRequest对象。从firebug里面的js代码总共有537行，实现的技术大部分围绕XmlHttpRequest对象以及Dom技术。下面分析核心代码(core)的实现过程吧。Let's Start！
下面的一段代码取自WebForm_DoCallback的函数里面：
var xmlRequest,e;
try {
xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
}
}
var setRequestHeaderMethodExists = true;
try {
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) {}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) {
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
xmlRequest.open("POST", theForm.action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(postData);
return;
}
分析一下：
首先实例化一个兼容三种浏览器(IE、FF、SF)的XmlHttpRequest对象，接着调用javascript内置的Object类来建立一个callback构造函数，该构造函数总共有四个属性。至于Callback构造函数有什么用呢？接下来这一句callback.xmlRequest=xmlRequest可以看到，将XmlHttpRequest的实例赋给了callback的属性了。最后XmlHttpRequest的实例(xmlRequest)，即xmlRequest的回调方法onreadystatechange指向了WebForm_CallbackComplete，而WebForm_CallbackComplete这个函数干什么的呢？下面会分析的；xmlRequest向服务器发送请求，theForm.action怎样获得的呢？她是通过WebForm_DoPostBackWithOptions函数来获得的。由于xmlRequest是用"POST"方法向服务器请求的，所以要标明请求的头格式以及发送的参数。好了分析完上面的代码之后，我们一起来看一下WebForm_CallbackComplete究竟做了什么呢？
下面的是完整的函数示例：
function WebForm_CallbackComplete() {
for (i = 0; i < __pendingCallbacks.length; i++) {
callbackObject = __pendingCallbacks[i];
if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
WebForm_ExecuteCallback(callbackObject);
if (!__pendingCallbacks[i].async) {
__synchronousCallBackIndex = -1;
}
__pendingCallbacks[i] = null;
var callbackFrameID = "__CALLBACKFRAME" + i;
var xmlRequestFrame = document.getElementById(callbackFrameID);
if (xmlRequestFrame) {
xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
}
}
}
我们看一下，_pendingCallbacks怎样来的，var __pendingCallbacks = new Array()；原来_pendingCallbacks是一个数组变量来的，其实从循环也可以猜到了。接着就将它赋给一个callback对象了，其实callback对象上面已经实例化了(上面那个callback构造函数)。最后就是判断xmlRequest的状态码来执行WebForm_ExecuteCallback函数。
最后，如果大家有什么好的看法可以反馈给我。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Client端异步Callback的应用与介绍
- HttpClient异步,及连接池应用
- 智能客户端应用学习系列：SmartClient Software factory中的Composite UI Application Block(Cab)技术了解(十):异步调用，离线处理，队列管理的关系
- 农国苏：asp.net在Client端使用另一种异步技术CallBack （完善中……）
- .net知识系列之四：（Page类介绍，Page的生命周期，IsPostBack属性，ClientScriptManager类，回调技术(CallBack)
- Client端异步Callback实现的原理
- linux（or Windows） 异步网络编程 simple client-server-select 应用
- 微服务框架Finagle介绍 Part3: 在Finagle中开发基于Thrift协议的应用
- 优化介绍及应用实践
- Windows 8 Metro应用中画面初期化时await异步取得数据后的画面数据绑定
- Fine Uploader文件上传组件应用介绍
- [原创]WCF技术剖析之十一：异步操作在WCF中的应用（下篇）
- Anthem 异步调用简单应用
- Sqlite的简单介绍和应用
- 前缀树的介绍和应用
- 负载均衡技术应用介绍
- FLEX SharedObject介绍及应用
- Linux rpm 命令参数使用详解［介绍和应用］
- [Python]网络爬虫（四）：Opener与Handler的介绍和实例应用(转)
- PeopleSoft学习-第一章 应用环境介绍