詳解如何實現最基本的AJAX架構 ajax技術

來源:互聯網
上載者:User
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:

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
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"來處理。

 

type="Czhenq.HttpHandlerFactory, Czhenq.AJAX"/>

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

}

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.