在ASP.NET中使用Callback实现AJAX

cetusz

浏览: 79710 次
性别:
来自: 深圳

最近访客更多访客>>

pong333

arnold.deng

woodding2008

hotsunshine

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

asp.net

ASP.net .net ASP Ajax WebForm

在许多时候，我们需要从客户端运行服务器代码而不执行回发，要实现这样的效果有非常多的方法，可以使用ASP.NET 中的 AJAX 功能，也可以使用象AjaxPro这样的第三方控件。这里我们要讨论的是使用Callback来实现AJAX。

要实现客户端回调的ASP.NET页的CS代码与创建ASP.NET页的过程类似，但也存在一些区别。该页的服务器代码必须：1、实现ICallbackEventHandler接口；2、提供RaiseCallbackEvent方法的实现；3、提供GetCallbackResult方法的实现。同时在客户端必须三个脚本函数：1、一个函数调用帮助器方法，该方法执行对服务器的实际请求；2、客户端回调函数，处理回调事件的服务器代码的结果调用并接收该结果；3、第三个函数是执行实际服务器请求的 Helper 函数。当在服务器代码中使用 GetCallbackEventReference方法生成对此函数的引用时，ASP.NET 将自动生成此函数。

现在，我们从实例来分析Callback的实现方法。

.aspx页源代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallbackDemo.aspx.cs" Inherits="CallbackDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>CallbackDemo</title>

function GetServerDateTime(context) {

<%= ClientScript.GetCallbackEventReference(this, "", "ReceiveServerData", "")%>;

}

function ReceiveServerData(rValue) {

document.getElementById("ResultsSpan").innerHTML = rValue;

}

</script>

</head>

<body>

<div>

<br />

</div>

</form>

</body>

</html>

.aspx.cs源代码：

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class CallbackDemo : System.Web.UI.Page,ICallbackEventHandler

{

protected void Page_Load(object sender, EventArgs e)

{

}

public void RaiseCallbackEvent(String eventArgument)

{

}

public String GetCallbackResult()

{

return DateTime.Now.ToString();

}

演示中客户端注册的脚本函数：<%= ClientScript.GetCallbackEventReference(this, "", "ReceiveServerData", "")%>;。这句动态生成一个客户端函数，该函数包含对来自GetCallbackEventReference方法的返回值的调用。ClientScriptManager.GetCallbackEventReference方法有4个重载函数，上面这个方法中，"this"是处理客户端回调的服务器控件，它必须实现ICallbackEventHandler 接口并提供RaiseCallbackEvent 方法，它的类型是System.Web.UI.Control。第二个参数是从客户端脚本传递给服务器的一个参数，它是String类型的。第三个函数是客户端事件处理程序的名称，它接收成功的服务器事件的结果，这里把回调结果返回给JS中的ReceiveServerData()方法。最后一个参数是启动回调之前在客户端计算的客户端脚本。脚本的结果传回客户端事件处理程序。

JS方法：

function ReceiveServerData(rValue) {

document.getElementById("ResultsSpan").innerHTML = rValue;

}

接收服务器事件的结果，并将结果呈现出来。

而服务器端的RaiseCallbackEvent()方法没有内容，因为这里是最简单的演示，我们没有回调参数，如果有回调参数在这个方法中处理。GetCallbackResult()则是返回当前的系统时间。

在VS中测试刚才的DEMO，发现会在浏览器源代码中自动生成一段这样的代码：

这个DEMO产生的WebResource.axd有21KB大小，测试了一下，所有的文件都是一样的体积。它是在这个文件中创建了AJAX请求：

function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) {

var postData = __theFormPostData +

"__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +

"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);

if (theForm["__EVENTVALIDATION"]) {

postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);

}

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; charset=utf-8");

xmlRequest.send(postData);

return;

}

callback.xmlRequest = new Object();

var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;

var xmlRequestFrame = document.frames[callbackFrameID];

if (!xmlRequestFrame) {

xmlRequestFrame = document.createElement("IFRAME");

xmlRequestFrame.width = "1";

xmlRequestFrame.height = "1";

xmlRequestFrame.frameBorder = "0";

xmlRequestFrame.id = callbackFrameID;

xmlRequestFrame.name = callbackFrameID;

xmlRequestFrame.style.position = "absolute";

xmlRequestFrame.style.top = "-100px"

xmlRequestFrame.style.left = "-100px";

try {

if (callBackFrameUrl) {

xmlRequestFrame.src = callBackFrameUrl;

}

catch(e) {}

document.body.appendChild(xmlRequestFrame);

}

var interval = window.setInterval(function() {

xmlRequestFrame = document.frames[callbackFrameID];

if (xmlRequestFrame && xmlRequestFrame.document) {

window.clearInterval(interval);

xmlRequestFrame.document.write("");

xmlRequestFrame.document.close();

xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');

xmlRequestFrame.document.close();

xmlRequestFrame.document.forms[0].action = theForm.action;

var count = __theFormPostCollection.length;

var element;

for (var i = 0; i < count; i++) {

element = __theFormPostCollection[i];

if (element) {

var fieldElement = xmlRequestFrame.document.createElement("INPUT");

fieldElement.type = "hidden";

fieldElement.name = element.name;

fieldElement.value = element.value;

xmlRequestFrame.document.forms[0].appendChild(fieldElement);

}

var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");

callbackIdFieldElement.type = "hidden";

callbackIdFieldElement.name = "__CALLBACKID";

callbackIdFieldElement.value = eventTarget;

xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);

var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");

callbackParamFieldElement.type = "hidden";

callbackParamFieldElement.name = "__CALLBACKPARAM";

callbackParamFieldElement.value = eventArgument;

xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);

if (theForm["__EVENTVALIDATION"]) {

</span

分享到：

ASP.net中的cookies读写

2009-07-12 06:52
浏览 1260
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论