注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

xian827991006

专注于DotNet编程,QlikView开发,网站seo,各种软件工具,互联网

 
 
 

日志

 
 
关于我

爱看书、爱探索的人. 目前关注与QlikView开发,推荐一个QlikView资源站。www.qlikviewcn.com

网易考拉推荐

.NET中回调事件的简单分析  

2011-09-13 09:33:22|  分类: 精彩推荐 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在.NET的ASPX页面中,通过实现ICallbackEventHandler接口,可以实现与前台的JavaScript进行交互,同时页面也不会进行刷新操作。可以肯定的是通过Ajax实现的。但是怎么样验证我的想法呢。今天将生成的页面源代码分析了一下,看出了实现的过程了。

首先,按照通常的实现方式,下面以一个验证用户名的例子来做一个分析。例子的过程是如果填写的用户名是juelance,那么就代表用户名已经被占用了。

前台的代码:


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006<!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></title>      <script type="text/javascript">          function result(val) {              alert(val);          }        </script>  </head>  <body>      <form id="form1" runat="server">      <div>          <input id="Text1" type="text" />          <input id="Button1" type="button" value="检查是否被占用" onclick="CheckUserName()" />      </div>      </form>        </body>  </html>  

后台代码:


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006string _arg = string.Empty;      protected void Page_Load(object sender, EventArgs e)      {          string callbackfunc = ClientScript.GetCallbackEventReference(this, "val", "result", null);          string raisefunc = "<script type='text/javascript'>\nfunction CheckUserName(){ \nvar username=document.getElementById('Text1'); \nvar val=username.value;\n" + callbackfunc + " \n}\n</script>";          ClientScript.RegisterClientScriptBlock(this.GetType(), "CheckUserName", raisefunc);      }        public string GetCallbackResult()      {          return _arg;      }        public void RaiseCallbackEvent(string eventArgument)      {          if (eventArgument.ToLower() == "juelance")          {              _arg = "已经占用";          }          else          {              _arg = "可以使用";          }      }  

通过浏览此页面,查看页面源文件,找出关键的五处代码:


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006第一段<script type="text/javascript">          function result(val) {              alert(val);          }    </script>    

.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006第二段<script type='text/javascript'>   function CheckUserName(){    var username=document.getElementById('Text1');    var val=username.value;   WebForm_DoCallback('__Page',val,result,null,null,false)   }  </script>    

.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006第三段<div>          <input id="Text1" type="text" />          <input id="Button1" type="button" value="检查是否被占用" onclick="CheckUserName()" />  </div>    

.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006第四段<script type="text/javascript">  //<![CDATA[    WebForm_InitCallback();//]]>  </script>    


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006第五段<script src="/fileupload/WebResource.axd?d=9Tb_MUlmMDCcCyQuK_rG4FhymHvBLwJp4n0GFDh7eDHQ-LQWHqbCW2mQbjFZuz21VVpqY7H9UUGQdR-NlAisCjFvrHQ1&amp;t=634209066757546466" type="text/javascript"></script>

关键是第二段中WebForm_DoCallback方法,这个js方法是从那里来的呢?浏览最后一段js指向的src,来看看,在文件中查找这个方法,可以看到定义如下:


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006function 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"]) {                  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);  }

在这段代码中与我需求相关的代码:


.NET中回调事件的简单分析 - xian827991006 - xian827991006.NET中回调事件的简单分析 - xian827991006 - xian827991006var 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;      }


大致的原理是:通过一个Ajax请求,将客户端的方法发送到服务器,服务器执行完相关的方法后,再调用客户端的result方法,并将服务器中产生的结果传入,最后执行客户端的JavaScript方法。这样就完成了整个回调事件的过程。

转自:http://www.cnblogs.com/liszt/archive/2011/09/12/2174281.html

  评论这张
 
阅读(833)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018