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

2024-07-21 02:30:20

字体：大中小

来源：转载

供稿：网友

本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理，欢迎访问。

　　本文实现的只是一个最基本的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>

|||

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

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