详解如何实现最基本的AJAX框架

日期: 2008-04-06 来源:TechTarget中国

  Asp.Net 2.0自带的客户端回调


  Asp.Net 2.0已经发布。2.0有了许多新特性,客户端回调就是其中之一。客户端回调允许我们不经过回发而调用服务器端的方法,与AJAX提供的功能是一致的,但是不如AJAX灵活,AJAX可以自定义调用的方法,2.0自带的回调功能却不行。要使用客户端回调功能必须实现System.Web.UI.IcallbackEventHandler接口。


  这个接口包含两个方法


  //客户端回调时固定调用此方法


  public void RaiseCallbackEvent(String eventArgument)


  //执行完RaiseCallbackEvent后将调用此方法。此方法的返回值将被发回客户端


  public string GetCallbackResult()


  例:


  .cs:


  String cbReference = Page.ClientScript.GetCallbackEventReference(


  this,”arg”, “ReceiveServerData”, “context”);


  String callbackScript;


  callbackScript = “function CallServer(arg, context)” + “{ ” + cbReference + “} ;”;


  Page.ClientScript.RegisterClientScriptBlock(


  this.GetType(),”CallServer”, callbackScript, true);


  javascript:


  AJAX介绍


  AJAX并不是一种新的技术,而是一些已有技术的有机结合,主要包括:XmlHttp、Reflect。一个AJAX框架基本上包括:一个自定义的HttpHandler、一段JavaScript代码。


  AJAX运行机制


  以前我们使用XmlHttp实现无刷新页面的时候,是用XmlHttp来请求一个隐藏的页面,使用(Asp/Asp.Net)自带的HttpHandler,而在AJAX中,我们请求的也是一个隐藏的页面,不同的是这个页面的HttpHandler是由我们自己来实现。


  打造自己的AJAX:


  1.首先我们要实现一个Http处理程序(HttpHandler)来响应客户端的请求:


  实现自定义的HttpHandler需要实现IHttpHandler接口。


  该接口包含一个属性和一个方法:


  bool IHttpHandler.IsReusable
  void IHttpHandler.ProcessRequest(HttpContext context)


  Example:


  bool IHttpHandler.IsReusable


  {


  get { return true; }


  }


  void IHttpHandler.ProcessRequest(HttpContext context)


  {


  context.Response.Clear(); //获取要调用的方法


  string methodName = context.Request.QueryString[“me”];


  //获取程序集信息。


  //Czhenq.AJAX.Class1.Dencode是自定义的字符串编码方法


  string AssemblyName = Czhenq.AJAX.Class1.Dencode(context.Request.QueryString[“as”]);


  //获取方法的参数


  string Arguments = context.Request.QueryString[“ar”]; //开始调用方法


  Type type = Type.GetType(AssemblyName);


  MethodInfo method = type.GetMethod(methodName,


  BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Static | BindingFlags.Instance);


  if (method != null)


  {


  //参数使用”,”分隔


  string[] args = Arguments.Split(“,”.ToCharArray());


  ParameterInfo[] paras = method.GetParameters();


  object[] argument = new object[paras.Length];


  for (int i = 0; i < argument.Length; i++)


  {


  if (i < args.Length) {


  //因为XmlHttp传递过来的参数全部时String类型,所以必须进行转换


  //这里只将参数转换为Int32,并不做其他考虑。


  argument[i] = Convert.ToInt32(args[i]);


  }


  }


  object value = method.Invoke(Activator.CreateInstance(type, true), argument);


  if (value != null) context.Response.Write(value.ToString());


  else context.Response.Write(“error”);


  }


  //处理结束


  context.Response.End();
 
  2. 客户端Javascript代码:


  function CallMethod(AssemblyName,MethodName,Argus)
  {


  var args = “”;


  for(var i=0;i


  args += Argus[i] + “,”;


  if(args.length>0) args = args.substr(0,args.length-1);


  var xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP’);


  url = “AJAX/AJAX.czhenq?as=” + AssemblyName + “&me=” + MethodName +”&ar=”+ args;


  xmlhttp.open(“POST”,url,false);


  xmlhttp.send();


  alert(xmlhttp.responseText);


  }


  3.一个简单的AJAX框架已经实现。现在写段代码来测试.


  使用自己的AJAX


  1.新建一个网站,并应用刚才你编写的HttpHandler。并在网站的Web.config中注册你的HttpHandler,说明那些请求将使用你编写的Handler来处理。下面的内容说明:所有以”czq”结尾的请求,都将使用”Czhenq.HttpHandlerFactory”来处理。


  type=”Czhenq.HttpHandlerFactory, Czhenq.AJAX”/>


  2.添加一个web页面,将刚才的脚本拷贝到页面中,并添加一个你要调用的方法。


  private string Add(int i, int j)
  {


  return TextBox1.Text;


  }


  3.在页面中放置一个HiddenField控件,命名为AssemblyName。 并在Page_Load中添加如下代码:


  string assemblyName = Czhenq.AJAX.Class1.Encode(
  typeof(_Default).AssemblyQualifiedName);


  AssemblyName.Value = assemblyName;


  4.页面中添加如下脚本:


  var assemblyName = document.getElementById(“AssemblyName”);
  var argus = new Array();


  argus.push(“100”);


  argus.push(“200”);


  CallMethod(assemblyName,”Add”,argus)


  总结 AJAX并不是一种新的技术,它只是一些已有技术的有机结合,我们可以将AJAX简单的理解为:AjAx是对JavaScript调用XmlHttp的封装,它改变的是代码书写方式。


  附 Encode 与 Dencode实现:


  public static string Encode(string value)
  {


  byte[] bytes = ASCIIEncoding.ASCII.GetBytes(value);


  return Convert.ToBase64String(bytes);


  }


  public static string Dencode(string value)


  {


  byte[] bytes = Convert.FromBase64String(value);


  return ASCIIEncoding.ASCII.GetString(bytes);


  }

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐