理解才能创新 轻松打造自己的AJAX框架_AJAX教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
推荐：站长推荐：Ajax技术概述与现状应用AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术，它所使用的所有技术都是在
本文实现的只是一个最基本的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()
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>
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介绍
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();
}
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<Argus.length;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);
}
{
var args = "";
for(var i=0;i<Argus.length;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"来处理。
<httpHandlers>
<add verb="POST,GET" path="*.czq" type="Czhenq.HttpHandlerFactory,
Czhenq.AJAX"/>
</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;
}
{
return TextBox1.Text;
}
3.在页面中放置一个HiddenField控件，命名为AssemblyName。 并在Page_Load中添加如下代码：
string assemblyName = Czhenq.AJAX.Class1.Encode(typeof(_Default).AssemblyQualifiedName);
AssemblyName.Value = assemblyName;
AssemblyName.Value = assemblyName;
4.页面中添加如下脚本：
var assemblyName = document.getElementById("AssemblyName");
var argus = new Array();
argus.push("100");
argus.push("200");
CallMethod(assemblyName,"Add",argus);
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);
}
{
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);
}
作者：陈振泉 来源：天极网
分享：剖析AJAX成为“时尚”的十大主要理由现在说AJAX是目下最时髦的技术一点不假，当然也有人认为其中有很多炒作的成分；估计两边谁也不能说服谁。因此让我们一起分析为什么AJAX在这个时候出现，以及它为什么会继续成长并且仍将徘徊一段时间。简言之，我把它归结为下面列举的十个最主要的理由。 按数
相关AJAX教程：
- 相关链接：
- 教程说明：
AJAX教程-理解才能创新 轻松打造自己的AJAX框架
。