創新源于理解輕松打造自己的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);
}