理解才能創(chuàng)新 輕松打造自己的AJAX框架_AJAX教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
推薦：站長(zhǎng)推薦：Ajax技術(shù)概述與現(xiàn)狀應(yīng)用AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。 Ajax技術(shù)是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術(shù)的集合。Ajax并沒有創(chuàng)造出某種具體的新技術(shù)，它所使用的所有技術(shù)都是在
本文實(shí)現(xiàn)的只是一個(gè)最基本的AJAX框架，雖然AJAX并不是什么新技術(shù)，但是做為一個(gè)框架并不是一篇文章就能說明白的。寫這篇文章的目的:希望能幫助初學(xué)者更好的學(xué)習(xí)、運(yùn)用AJAX框架。我始終相信只有你真正理解了一種技術(shù)，了解了技術(shù)本身,你才能更好、更靈活的使用它。一個(gè)程序員對(duì)技術(shù)的了解并不能僅僅停留在對(duì)技術(shù)的應(yīng)用上。
環(huán)境：Window Xp sp2 + .Net FramwWork 2.0.50727。
Asp.Net 2.0自帶的客戶端回調(diào)
Asp.Net 2.0已經(jīng)發(fā)布。2.0有了許多新特性，客戶端回調(diào)就是其中之一�？蛻舳嘶卣{(diào)允許我們不經(jīng)過回發(fā)而調(diào)用服務(wù)器端的方法，與AJAX提供的功能是一致的，但是不如AJAX靈活，AJAX可以自定義調(diào)用的方法， 2.0自帶的回調(diào)功能卻不行。
要使用客戶端回調(diào)功能必須實(shí)現(xiàn)System.Web.UI.IcallbackEventHandler接口。
這個(gè)接口包含兩個(gè)方法：
//客戶端回調(diào)時(shí)固定調(diào)用此方法
public void RaiseCallbackEvent(String eventArgument)
//執(zhí)行完RaiseCallbackEvent后將調(diào)用此方法。此方法的返回值將被發(fā)回客戶端
public string GetCallbackResult()
public void RaiseCallbackEvent(String eventArgument)
//執(zhí)行完RaiseCallbackEvent后將調(diào)用此方法。此方法的返回值將被發(fā)回客戶端
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>
更多內(nèi)容查看MSDN。
AJAX介紹
AJAX并不是一種新的技術(shù)，而是一些已有技術(shù)的有機(jī)結(jié)合，主要包括：XmlHttp、Reflect。一個(gè)AJAX框架基本上包括：一個(gè)自定義的HttpHandler、一段JavaScript代碼。
AJAX運(yùn)行機(jī)制：
以前我們使用XmlHttp實(shí)現(xiàn)無刷新頁面的時(shí)候，是用XmlHttp來請(qǐng)求一個(gè)隱藏的頁面，使用(Asp/Asp.Net)自帶的HttpHandler，而在AJAX中，我們請(qǐng)求的也是一個(gè)隱藏的頁面，不同的是這個(gè)頁面的HttpHandler是由我們自己來實(shí)現(xiàn)。 打造自己的AJAX：
1． 首先我們要實(shí)現(xiàn)一個(gè)Http處理程序(HttpHandler)來響應(yīng)客戶端的請(qǐng)求：
實(shí)現(xiàn)自定義的HttpHandler需要實(shí)現(xiàn)IHttpHandler接口。
該接口包含一個(gè)屬性和一個(gè)方法：
bool IHttpHandler.IsReusable
void IHttpHandler.ProcessRequest(HttpContext context)
Example:
bool IHttpHandler.IsReusable
{
get { return true; }
}
void IHttpHandler.ProcessRequest(HttpContext context)
{
context.Response.Clear(); //獲取要調(diào)用的方法
string methodName = context.Request.QueryString["me"];
//獲取程序集信息。
//Czhenq.AJAX.Class1.Dencode是自定義的字符串編碼方法
string AssemblyName = Czhenq.AJAX.Class1.Dencode(context.Request.QueryString["as"]); //獲取方法的參數(shù)
string Arguments = context.Request.QueryString["ar"]; //開始調(diào)用方法
Type type = Type.GetType(AssemblyName);
MethodInfo method = type.GetMethod(methodName, BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Static | BindingFlags.Instance);
if (method != null)
{
//參數(shù)使用","分隔
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) {
//因?yàn)閄mlHttp傳遞過來的參數(shù)全部時(shí)String類型，所以必須進(jìn)行轉(zhuǎn)換
//這里只將參數(shù)轉(zhuǎn)換為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");
}
//處理結(jié)束
context.Response.End();
}
void IHttpHandler.ProcessRequest(HttpContext context)
Example:
bool IHttpHandler.IsReusable
{
get { return true; }
}
void IHttpHandler.ProcessRequest(HttpContext context)
{
context.Response.Clear(); //獲取要調(diào)用的方法
string methodName = context.Request.QueryString["me"];
//獲取程序集信息。
//Czhenq.AJAX.Class1.Dencode是自定義的字符串編碼方法
string AssemblyName = Czhenq.AJAX.Class1.Dencode(context.Request.QueryString["as"]); //獲取方法的參數(shù)
string Arguments = context.Request.QueryString["ar"]; //開始調(diào)用方法
Type type = Type.GetType(AssemblyName);
MethodInfo method = type.GetMethod(methodName, BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Static | BindingFlags.Instance);
if (method != null)
{
//參數(shù)使用","分隔
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) {
//因?yàn)閄mlHttp傳遞過來的參數(shù)全部時(shí)String類型，所以必須進(jìn)行轉(zhuǎn)換
//這里只將參數(shù)轉(zhuǎn)換為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");
}
//處理結(jié)束
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.一個(gè)簡(jiǎn)單的AJAX框架已經(jīng)實(shí)現(xiàn)�，F(xiàn)在寫段代碼來測(cè)試.
使用自己的AJAX:
1.新建一個(gè)網(wǎng)站，并應(yīng)用剛才你編寫的HttpHandler。并在網(wǎng)站的Web.config中注冊(cè)你的HttpHandler,說明那些請(qǐng)求將使用你編寫的Handler來處理。下面的內(nèi)容說明:所有以"czq"結(jié)尾的請(qǐng)求，都將使用"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.添加一個(gè)web頁面，將剛才的腳本拷貝到頁面中，并添加一個(gè)你要調(diào)用的方法。
private string Add(int i, int j)
{
return TextBox1.Text;
}
{
return TextBox1.Text;
}
3.在頁面中放置一個(gè)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);
總結(jié):
AJAX并不是一種新的技術(shù),它只是一些已有技術(shù)的有機(jī)結(jié)合.我們可以將AJAX簡(jiǎn)單的理解為:AjAx是對(duì)JavaScript調(diào)用XmlHttp的封裝.它改變的是代碼書寫方式.
附 Encode 與 Dencode實(shí)現(xiàn):
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);
}
作者：陳振泉 來源：天極網(wǎng)
分享：剖析AJAX成為“時(shí)尚”的十大主要理由現(xiàn)在說AJAX是目下最時(shí)髦的技術(shù)一點(diǎn)不假，當(dāng)然也有人認(rèn)為其中有很多炒作的成分；估計(jì)兩邊誰也不能說服誰。因此讓我們一起分析為什么AJAX在這個(gè)時(shí)候出現(xiàn)，以及它為什么會(huì)繼續(xù)成長(zhǎng)并且仍將徘徊一段時(shí)間。簡(jiǎn)言之，我把它歸結(jié)為下面列舉的十個(gè)最主要的理由。 按數(shù)
相關(guān)AJAX教程：
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
猜你也喜歡看這些
- ajax struts2 下拉框賦值(適合所有)
- ASP+AJAX+ACCESS數(shù)據(jù)庫實(shí)例講解三個(gè)步驟分享
- 怎樣學(xué)習(xí)AJAX
- Ajax技術(shù)實(shí)踐之完成Ajax自動(dòng)完成功能
- 談在AJAX中GET回的ResponseText中文亂碼的最簡(jiǎn)解決辦法
- AJAX入門XMLHttpRequest慨述
- 談更正用AJAX實(shí)現(xiàn)IE TREE無刷新取值的方法
- 輕量級(jí)的Ajax解決方案——DynAjax:直接在客戶端調(diào)用C#類的方法
- 解析AJAX中的一些關(guān)鍵技術(shù)
- 如何使用WatiN對(duì)ASP.NET頁面進(jìn)行單元測(cè)試
- 相關(guān)鏈接：
- 教程說明：
AJAX教程-理解才能創(chuàng)新 輕松打造自己的AJAX框架
。