理解才能創新輕松打造自己的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接口。
這個接口包含兩個方法:
例一:
更多內容查看MSDN。
AJAX介紹
AJAX并不是一種新的技術,而是一些已有技術的有機結合,主要包括:XmlHttp、Reflect。一個AJAX框架基本上包括:一個自定義的HttpHandler、一段JavaScript代碼。
AJAX運行機制:
以前我們使用XmlHttp實現無刷新頁面的時候,是用XmlHttp來請求一個隱藏的頁面,使用(Asp/Asp.Net)自帶的HttpHandler,而在AJAX中,我們請求的也是一個隱藏的頁面,不同的是這個頁面的HttpHandler是由我們自己來實現。 打造自己的AJAX:
1. 首先我們要實現一個Http處理程序(HttpHandler)來響應客戶端的請求:
實現自定義的HttpHandler需要實現IHttpHandler接口。
該接口包含一個屬性和一個方法:
2. 客戶端Javascript代碼:
3.一個簡單的AJAX框架已經實現。現在寫段代碼來測試.
使用自己的AJAX:
1.新建一個網站,并應用剛才你編寫的HttpHandler。并在網站的Web.config中注冊你的HttpHandler,說明那些請求將使用你編寫的Handler來處理。下面的內容說明:所有以"czq"結尾的請求,都將使用"Czhenq.HttpHandlerFactory"來處理。
2.添加一個web頁面,將剛才的腳本拷貝到頁面中,并添加一個你要調用的方法。
3.在頁面中放置一個HiddenField控件,命名為AssemblyName。 并在Page_Load中添加如下代碼:
4.頁面中添加如下腳本:
總結:
AJAX并不是一種新的技術,它只是一些已有技術的有機結合.我們可以將AJAX簡單的理解為:AjAx是對JavaScript調用XmlHttp的封裝.它改變的是代碼書寫方式.
附 Encode 與 Dencode實現:
我始終相信只有你真正理解了一種技術,了解了技術本身,你才能更好、更靈活的使用它。一個程序員對技術的了解并不能僅僅停留在對技術的應用上。
環境: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介紹
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<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); } |