您的位置:首页 > 编程语言 > ASP

在 ASP.NET 网页中不经过回发而实现客户端回调(需要实现ICallbackEventHandler接口)

2007-10-25 16:47 746 查看
在 ASP.NET 网页的默认模型中,用户会与页交互,单击按钮或执行导致回发的一些其他操作。此时将重新创建页及其控件,并在服务器上运行页代码,且新版本的页被呈现到浏览器。但是,在有些情况下,需要从客户端运行服务器代码,而不执行回发。如果页中的客户端脚本维护一些状态信息(例如,局部变量值),那么发送页和获取页的新副本就会损坏该状态。此外,页回发会导致处理开销,这会降低性能,且会让用户不得不等待处理并重新创建页。

若要避免丢失客户端状态并且不导致服务器往返的处理开销,可以对 ASP.NET 网页编码,使其能执行客户端回调。在客户端回调中,客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员,然后调用特别标记的方法。该方法执行代码中编写的处理过程,然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中,该页一直驻留在浏览器中。

有几个 Web 服务器控件使用客户端回调。例如,TreeView 控件使用客户端回调实现其即需填充功能。

不过也就是如此:

(请区分好:客户端回发即客户端浏览器提交机制;

窗体回发即asp.net回发机制;-ipostbackeventhandler.数据回

发;-ipostbackdatahandler.客户端回调-

icallbackeventhandler.这四个概念)

<!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 id="Head1"><title>

Hello Ajax---asp.net2.0的CallBack

</title>

<script type="text/javascript">

//接收服务器返回的数据,在页面显示出来。

function ReceiveServerData(arg, context)

{

document.getElementById ("msg_display").innerHTML=arg;

}

//向服务器发送请求

function CallTheServer(arg, context)

{

WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false);

}

</script>

</head>

<body>

<div style="text-align: left; width: 420px">

<form name="form1" method="post" action="Default3.aspx" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExOTc0MjQyMjVkZI/JG4Tv4rIu0lB0mfEPax355B58" />

</div>

<script type="text/javascript">

<!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

// -->

</script>

<script src="/Web/WebResource.axd?d=bnE6Ae_N73xYeDUzyhEqkA2&t=633247839062656250" type="text/javascript"></script>

<br />

<input id="testmsg" type="text" value="Hello AJAX" style="width: 214px" /><br />

<button onclick="CallTheServer(document.getElementById('testmsg').value)">

提交给服务器的CallBack</button>

<div id="msg_display" style="background: yellow; font-weight: bold; font-size: 13px">

从服务器返回的信息在这里显示...</div>

<script type="text/javascript">

<!--

WebForm_InitCallback();// -->

</script>

</form>

</div>

</body>

</html>

function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {

this.eventTarget = eventTarget;

this.eventArgument = eventArgument;

this.validation = validation;

this.validationGroup = validationGroup;

this.actionUrl = actionUrl;

this.trackFocus = trackFocus;

this.clientSubmit = clientSubmit;

}

function WebForm_DoPostBackWithOptions(options) {

var validationResult = true;

if (options.validation) {

if (typeof(Page_ClientValidate) == 'function') {

validationResult = Page_ClientValidate(options.validationGroup);

}

}

if (validationResult) {

if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {

theForm.action = options.actionUrl;

}

if (options.trackFocus) {

var lastFocus = theForm.elements["__LASTFOCUS"];

if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {

if (typeof(document.activeElement) == "undefined") {

lastFocus.value = options.eventTarget;

}

else {

var active = document.activeElement;

if ((typeof(active) != "undefined") && (active != null)) {

if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {

lastFocus.value = active.id;

}

else if (typeof(active.name) != "undefined") {

lastFocus.value = active.name;

}

}

}

}

}

}

if (options.clientSubmit) {

__doPostBack(options.eventTarget, options.eventArgument);

}

}

var __pendingCallbacks = new Array();

var __synchronousCallBackIndex = -1;

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");

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"]) {

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

callbackValidationFieldElement.type = "hidden";

callbackValidationFieldElement.name = "__EVENTVALIDATION";

callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;

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

}

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

callbackIndexFieldElement.type = "hidden";

callbackIndexFieldElement.name = "__CALLBACKINDEX";

callbackIndexFieldElement.value = callbackIndex;

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

xmlRequestFrame.document.forms[0].submit();

}

}, 10);

}

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);

}

}

}

}

function WebForm_ExecuteCallback(callbackObject) {

var response = callbackObject.xmlRequest.responseText;

if (response.charAt(0) == "s") {

if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {

callbackObject.eventCallback(response.substring(1), callbackObject.context);

}

}

else if (response.charAt(0) == "e") {

if ((typeof(callbackObject.errorCallback) != "undefined") && (callbackObject.errorCallback != null)) {

callbackObject.errorCallback(response.substring(1), callbackObject.context);

}

}

else {

var separatorIndex = response.indexOf("|");

if (separatorIndex != -1) {

var validationFieldLength = parseInt(response.substring(0, separatorIndex));

if (!isNaN(validationFieldLength)) {

var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);

if (validationField != "") {

var validationFieldElement = theForm["__EVENTVALIDATION"];

if (!validationFieldElement) {

validationFieldElement = document.createElement("INPUT");

validationFieldElement.type = "hidden";

validationFieldElement.name = "__EVENTVALIDATION";

theForm.appendChild(validationFieldElement);

}

validationFieldElement.value = validationField;

}

if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {

callbackObject.eventCallback(response.substring(separatorIndex + validationFieldLength + 1), callbackObject.context);

}

}

}

}

}

function WebForm_FillFirstAvailableSlot(array, element) {

var i;

for (i = 0; i < array.length; i++) {

if (!array[i]) break;

}

array[i] = element;

return i;

}

var __nonMSDOMBrowser = (window.navigator.appName.toLowerCase().indexOf('explorer') == -1);

var __theFormPostData = "";

var __theFormPostCollection = new Array();

function WebForm_InitCallback() {

var count = theForm.elements.length;

var element;

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

element = theForm.elements[i];

var tagName = element.tagName.toLowerCase();

if (tagName == "input") {

var type = element.type;

if ((type == "text" || type == "hidden" || type == "password" ||

((type == "checkbox" || type == "radio") && element.checked)) &&

(element.id != "__EVENTVALIDATION")) {

WebForm_InitCallbackAddField(element.name, element.value);

}

}

else if (tagName == "select") {

var selectCount = element.options.length;

for (var j = 0; j < selectCount; j++) {

var selectChild = element.options[j];

if (selectChild.selected == true) {

WebForm_InitCallbackAddField(element.name, element.value);

}

}

}

else if (tagName == "textarea") {

WebForm_InitCallbackAddField(element.name, element.value);

}

}

}

function WebForm_InitCallbackAddField(name, value) {

var nameValue = new Object();

nameValue.name = name;

nameValue.value = value;

__theFormPostCollection[__theFormPostCollection.length] = nameValue;

__theFormPostData += name + "=" + WebForm_EncodeCallback(value) + "&";

}

function WebForm_EncodeCallback(parameter) {

if (encodeURIComponent) {

return encodeURIComponent(parameter);

}

else {

return escape(parameter);

}

}

var __disabledControlArray = new Array();

function WebForm_ReEnableControls() {

if (typeof(__enabledControlArray) == 'undefined') {

return false;

}

var disabledIndex = 0;

for (var i = 0; i < __enabledControlArray.length; i++) {

var c;

if (__nonMSDOMBrowser) {

c = document.getElementById(__enabledControlArray[i]);

}

else {

c = document.all[__enabledControlArray[i]];

}

if ((typeof(c) != "undefined") && (c != null) && (c.disabled == true)) {

c.disabled = false;

__disabledControlArray[disabledIndex++] = c;

}

}

setTimeout("WebForm_ReDisableControls()", 0);

return true;

}

function WebForm_ReDisableControls() {

for (var i = 0; i < __disabledControlArray.length; i++) {

__disabledControlArray[i].disabled = true;

}

}

function WebForm_FireDefaultButton(event, target) {

if (event.keyCode == 13 && !(event.srcElement && (event.srcElement.tagName.toLowerCase() == "textarea"))) {

var defaultButton;

if (__nonMSDOMBrowser) {

defaultButton = document.getElementById(target);

}

else {

defaultButton = document.all[target];

}

if (defaultButton && typeof(defaultButton.click) != "undefined") {

defaultButton.click();

event.cancelBubble = true;

if (event.stopPropagation) event.stopPropagation();

return false;

}

}

return true;

}

function WebForm_GetScrollX() {

if (__nonMSDOMBrowser) {

return window.pageXOffset;

}

else {

if (document.documentElement && document.documentElement.scrollLeft) {

return document.documentElement.scrollLeft;

}

else if (document.body) {

return document.body.scrollLeft;

}

}

return 0;

}

function WebForm_GetScrollY() {

if (__nonMSDOMBrowser) {

return window.pageYOffset;

}

else {

if (document.documentElement && document.documentElement.scrollTop) {

return document.documentElement.scrollTop;

}

else if (document.body) {

return document.body.scrollTop;

}

}

return 0;

}

function WebForm_SaveScrollPositionSubmit() {

if (__nonMSDOMBrowser) {

theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;

theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;

}

else {

theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();

theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();

}

if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {

return this.oldSubmit();

}

return true;

}

function WebForm_SaveScrollPositionOnSubmit() {

theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();

theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();

if ((typeof(this.oldOnSubmit) != "undefined") && (this.oldOnSubmit != null)) {

return this.oldOnSubmit();

}

return true;

}

function WebForm_RestoreScrollPosition() {

if (__nonMSDOMBrowser) {

window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);

}

else {

window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);

}

if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {

return theForm.oldOnLoad();

}

return true;

}

function WebForm_TextBoxKeyHandler(event) {

if (event.keyCode == 13) {

var target;

if (__nonMSDOMBrowser) {

target = event.target;

}

else {

target = event.srcElement;

}

if ((typeof(target) != "undefined") && (target != null)) {

if (typeof(target.onchange) != "undefined") {

target.onchange();

event.cancelBubble = true;

if (event.stopPropagation) event.stopPropagation();

return false;

}

}

}

return true;

}

function WebForm_AppendToClassName(element, className) {

var current = element.className;

if (current) {

if (current.charAt(current.length - 1) != ' ') {

current += ' ';

}

current += className;

}

else {

current = className;

}

element.className = current;

}

function WebForm_RemoveClassName(element, className) {

var current = element.className;

if (current) {

if (current.substring(current.length - className.length - 1, current.length) == ' ' + className) {

element.className = current.substring(0, current.length - className.length - 1);

return;

}

if (current == className) {

element.className = "";

return;

}

var index = current.indexOf(' ' + className + ' ');

if (index != -1) {

element.className = current.substring(0, index) + current.substring(index + className.length + 2, current.length);

return;

}

if (current.substring(0, className.length) == className + ' ') {

element.className = current.substring(className.length + 1, current.length);

}

}

}

function WebForm_GetElementById(elementId) {

if (document.getElementById) {

return document.getElementById(elementId);

}

else if (document.all) {

return document.all[elementId];

}

else return null;

}

function WebForm_GetElementByTagName(element, tagName) {

var elements = WebForm_GetElementsByTagName(element, tagName);

if (elements && elements.length > 0) {

return elements[0];

}

else return null;

}

function WebForm_GetElementsByTagName(element, tagName) {

if (element && tagName) {

if (element.getElementsByTagName) {

return element.getElementsByTagName(tagName);

}

if (element.all && element.all.tags) {

return element.all.tags(tagName);

}

}

return null;

}

function WebForm_GetElementDir(element) {

if (element) {

if (element.dir) {

return element.dir;

}

return WebForm_GetElementDir(element.parentNode);

}

return "ltr";

}

function WebForm_GetElementPosition(element) {

var result = new Object();

result.x = 0;

result.y = 0;

result.width = 0;

result.height = 0;

if (element.offsetParent) {

result.x = element.offsetLeft;

result.y = element.offsetTop;

var parent = element.offsetParent;

while (parent) {

result.x += parent.offsetLeft;

result.y += parent.offsetTop;

var parentTagName = parent.tagName.toLowerCase();

if (parentTagName != "table" &&

parentTagName != "body" &&

parentTagName != "html" &&

parentTagName != "div" &&

parent.clientTop &&

parent.clientLeft) {

result.x += parent.clientLeft;

result.y += parent.clientTop;

}

parent = parent.offsetParent;

}

}

else if (element.left && element.top) {

result.x = element.left;

result.y = element.top;

}

else {

if (element.x) {

result.x = element.x;

}

if (element.y) {

result.y = element.y;

}

}

if (element.offsetWidth && element.offsetHeight) {

result.width = element.offsetWidth;

result.height = element.offsetHeight;

}

else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {

result.width = element.style.pixelWidth;

result.height = element.style.pixelHeight;

}

return result;

}

function WebForm_GetParentByTagName(element, tagName) {

var parent = element.parentNode;

var upperTagName = tagName.toUpperCase();

while (parent && (parent.tagName.toUpperCase() != upperTagName)) {

parent = parent.parentNode ? parent.parentNode : parent.parentElement;

}

return parent;

}

function WebForm_SetElementHeight(element, height) {

if (element && element.style) {

element.style.height = height + "px";

}

}

function WebForm_SetElementWidth(element, width) {

if (element && element.style) {

element.style.width = width + "px";

}

}

function WebForm_SetElementX(element, x) {

if (element && element.style) {

element.style.left = x + "px";

}

}

function WebForm_SetElementY(element, y) {

if (element && element.style) {

element.style.top = y + "px";

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: