理解才能创新 轻松打造自己的AJAX框架

打败菲律宾

打败菲律宾

2016-02-19 18:48

下面图老师小编跟大家分享一个简单易学的理解才能创新 轻松打造自己的AJAX框架教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

  本文实现的只是一个最基本的AJAX框架,虽然AJAX并不是什么新技术,但是做为一个框架并不是一篇文章就能说明白的。写这篇文章的目的:希望能帮助初学者更好的学习、运用AJAX框架。

  我始终相信只有你真正理解了一种技术,了解了技术本身,你才能更好、更灵活的使用它。一个程序员对技术的了解并不能仅仅停留在对技术的应用上。

  环境:Window Xp sp2 + .Net FramwWork 2.0.50727。

  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:
script type="text/javascript"
function LookUpStock()
{
 var product = "";
 var lb = document.forms[0].ListBox1;
 if(lb.selectedIndex = 0)
  product = lb.options[lb.selectedIndex].text;
  CallServer(product, "");
}
function ReceiveServerData(rValue) { Results.innerText = rValue; }
/script

  更多内容查看MSDN。
  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();
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  2. 客户端Javascript代码:

function CallMethod(AssemblyName,MethodName,Argus)
{
 var args = "";
 for(var i=0;iArgus.length;i++)
  args += Argus[i] + ",";
  if(args.length0) 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);
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

  使用自己的AJAX:

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

httpHandlers
add verb="POST,GET" path="*.czq" type="Czhenq.HttpHandlerFactory,
Czhenq.AJAX"/
/httpHandlers

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

展开更多 50%)
分享

猜你喜欢

理解才能创新 轻松打造自己的AJAX框架

Web开发
理解才能创新 轻松打造自己的AJAX框架

创新源于理解 轻松打造自己的AJAX框架(1)

Web开发
创新源于理解 轻松打造自己的AJAX框架(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

创新源于理解 轻松打造自己的AJAX框架(2)

Web开发
创新源于理解 轻松打造自己的AJAX框架(2)

AJAX框架汇总

PHP
AJAX框架汇总

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax 框架学习笔记

Web开发
Ajax 框架学习笔记

无框架 Ajax分页

Web开发
无框架 Ajax分页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在AJAX开发中集成数据库技术(1)

在AJAX开发中集成数据库技术(1)

黑白图像的缩小灰度级显示算法的编写

黑白图像的缩小灰度级显示算法的编写
下拉加载更多内容 ↓