1、Ajax.net 做為Ajax技術(shù)在dotNet 框架下的實(shí)現(xiàn),作者M(jìn)ichael Schwarz采取了一種封裝效果相當(dāng)棒的技術(shù):將客戶端處理XML、事件調(diào)用方式都封裝在2個(gè)Javascript文件中(AjaxPro.prototype.js 和AjaxPro.core.js),同時(shí)將這2個(gè)重要文件以資源的形式編譯于dll中,在處理客戶端請(qǐng)求其自定義的.ashx文件時(shí),返回這兩個(gè)文件。所以我們?cè)谑褂肁jax.net時(shí)需要在Web.config中添加如下httpHandlers以AjaxPro.AjaxHandlerFactory來(lái)處理.ashx文件:
在<system.web>與</system.web>之間插入以下代碼
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
2、在此基礎(chǔ)上,Ajax.net開(kāi)始對(duì)要求其處理的方法進(jìn)行封裝,以便在客戶端通過(guò)Javascript來(lái)調(diào)用。首先在用戶必須調(diào)用的另一個(gè)ashx文件即converter.ashx中做了方法的封裝,當(dāng)然要支持任意多數(shù)量的參數(shù)及返回值的處理,然后就是對(duì)于服務(wù)端的邏輯處理方法所在類的封裝處理。
如何開(kāi)始使用Ajax.net
A:獲取Ajax.net 可以到
http://www.schwarz-interactive.de/ 下載(目前最新版6.4.15.1.)。
B:解壓zip并在需要使用的項(xiàng)目中添加對(duì)dll的引用(其中AjaxPro.dll為dotnet1.1版,AjaxPro.2.dll 為2.0版)
C:如同上面所說(shuō),在web.config中添加對(duì)ashx的處理
D:在服務(wù)端添加Ajax.net要處理的方法,假如我們要提供的服務(wù)是返回用戶輸入的字符的MD5校驗(yàn)碼,那么我們首先要做的是給這個(gè)方法加入需要Ajax.net處理使客戶端可以直接調(diào)用的屬性[AjaxPro.AjaxMethod]如下:
[AjaxPro.AjaxMethod]
public string Md5Hash(string sSou)
{
string sResult ="";
byte[] byBuffer = System.Text.Encoding.UTF8 .GetBytes(sSou);
System.Security.Cryptography.MD5CryptoServiceProvider md = new System.Security.Cryptography.MD5CryptoServiceProvider();
byte[] result = md.ComputeHash(byBuffer);
for(int i=0; i< result.GetLength(0); i++)
{
sResult += result[i].ToString("X2");
}
return sResult;
}
然后在Page_Load中注冊(cè)此類
private void Page_Load(object sender, System.EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax
(typeof(WebForm1));
}
E:在客戶端調(diào)用方法:
<script type="text/javascript">
function getMd5()
{
var a = document.getElementById("source").value;
var c = TAjax.WebForm1.Md5Hash(a);
alert(c.value);
}
</script>
<input type="text" id="source" name="source" >
<input type="button" name="sub" onclick="getMd5()" value="提交">
當(dāng)然這里Tajax.WebForm1就是實(shí)現(xiàn)類的全名了(包括namespace).
這樣一個(gè)簡(jiǎn)單應(yīng)用就算完成了,怎么樣,是不是簡(jiǎn)單的很?在這么簡(jiǎn)單的使用了Ajax.net后你是不是和我一樣覺(jué)得不滿足,好像還有一些工作可以做?對(duì)了,接下來(lái)我們將繼續(xù)深度使用并實(shí)現(xiàn)無(wú)aspx文件的邏輯層和表現(xiàn)層的徹底分離。
應(yīng)用Ajax.net在Asp.net中實(shí)現(xiàn)無(wú)aspx文件應(yīng)用,徹底分離邏輯層和表現(xiàn)層
Asp.net中居然沒(méi)有aspx文件,要如何實(shí)現(xiàn)呢?我不知道你想過(guò)沒(méi)有,我反正覺(jué)得這是個(gè)艱巨的任務(wù);因?yàn)閍spx文件做為一個(gè)橋梁連接了前臺(tái)和后臺(tái),一個(gè)runat=server為我們做了太多的事情,我們自己實(shí)現(xiàn)也不是完全不可以,不過(guò)費(fèi)盡周折的意義可能并不大;說(shuō)到意義——這樣做的意義我想不用我說(shuō),大家自己想想吧,呵呵。閑話少絮。我們接著進(jìn)入正題。
通過(guò)前面的描述,我想大家一定可以猜到關(guān)鍵點(diǎn)。對(duì)了,就是那幾個(gè)js,我們啟動(dòng)程序,查看源文件,奧妙就在這里:
<script type="text/javascript" src="/TAjax/ajaxpro/prototype.ashx"></script>
<script type="text/javascript" src="/TAjax/ajaxpro/core.ashx"></script>
<script type="text/javascript" src="/TAjax/ajaxpro/converter.ashx"></script>
<script type="text/javascript" src="/TAjax/ajaxpro/TAjax.WebForm1,TAjax.ashx"></script>
注:TAjax在VB中稱為項(xiàng)目名稱.在C#上則為名稱空間名.WebForm1為類名
前面3個(gè)文件我就不在多說(shuō),前面已經(jīng)說(shuō)過(guò),我們只看最后一個(gè),那不正是Ajax.net對(duì)我們服務(wù)端類的封裝嗎?
addNamespace("TAjax");
TAjax.WebForm1_class = Class.create();
Object.extend(TAjax.WebForm1_class.prototype, Object.extend(new AjaxPro.AjaxClass(), {
Md5Hash: function(sSou) {
return this.invoke("Md5Hash", {"sSou":sSou}, this.Md5Hash.getArguments().slice(1));
},
initialize: function() {
this.url = '/TAjax/ajaxpro/TAjax.WebForm1,TAjax.ashx';
}
}));
TAjax.WebForm1 = new TAjax.WebForm1_class();
既然原理明白了,分離就簡(jiǎn)單了,參照上一部份,我們的步驟從D開(kāi)始改變
D:新建一個(gè)類Admin,將WebForm1.aspx.cs中的代碼拿過(guò)來(lái)。
注:在VB.NET中拷過(guò)來(lái)時(shí)只需拷貝Md5Hash那段函數(shù)即可.不必再構(gòu)造函數(shù)中注冊(cè)此類.C#中我沒(méi)試過(guò)
<AjaxPro.AjaxMethod()> _
Public Function Md5Hash(ByVal sSou As String) As String
Dim sResult As String = ""
Dim byBuffer As Byte() = System.Text.Encoding.UTF8.GetBytes(sSou)
Dim md As System.Security.Cryptography.MD5CryptoServiceProvider = New System.Security.Cryptography.MD5CryptoServiceProvider
Dim result As Byte() = md.ComputeHash(byBuffer)
Dim i As Integer
For i = 0 To result.GetLength(0) - 1
sResult += result(i).ToString("X2")
Next
Return sResult
End FunctionE:在客戶端調(diào)用方法:
新建一個(gè)htm文件include.htm,將前述四行調(diào)用放在這里
新建一個(gè)htm文件test.htm,內(nèi)容當(dāng)然就是前面的客戶端表示層。重要的一點(diǎn)就是要添加一個(gè)iframe如下:
<iframe name="include" marginwidth=0 marginheight=0 src="include.htm" frameborder=0></iframe>
同樣,修改調(diào)用為
<script type="text/javascript">
function getMd5()
{
var a = document.getElementById("source").value;
var c = include.TAjax.Admin.Md5Hash(a);
alert(c.value);
}
</script>
擴(kuò)展:如果多處調(diào)用而且調(diào)用方法較長(zhǎng),你當(dāng)然可以再對(duì)應(yīng)每個(gè)業(yè)務(wù)類做個(gè)js文件,將其中的調(diào)用放在一起。
==============================================================================
前段時(shí)間要用到Ajax,不過(guò),完全靠自己來(lái)寫嫌太煩,不愿做些麻煩事。
碰巧看到了ajaxpro,嘗試了一下,覺(jué)得很簡(jiǎn)單,很實(shí)用,兼容性也很好。
AjaxPro的官網(wǎng)是http://ajaxpro.info,你可以下載到最新的AjaxPro組件。如果你想下載,可以點(diǎn)里這里。
在下載的的文件中,有VS2005的模板,安裝了VS2005模板,就可以在VS2005中直接建立AjaxProWebSite了,在建立的AjaxProWebSite中,有一個(gè)默認(rèn)的Demo,其實(shí)通過(guò)它,就能夠完全了解AjaxPro的用法。
如果你用的是.NET2.0,且不用VS2005的話。你只需要把AjaxPro.2.dll放入應(yīng)用程序的bin文件夾中,而且也只需要如下幾步:
1、修改web.config
在system.web節(jié)點(diǎn)下添加
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
2、將你的.NET方法添加AjaxMethod屬性
[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
3、在.NET方法中向客戶端注冊(cè)javascript,用以javascript使用
namespace MyDemo
{
public class _Default
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
}
}
4、在客戶端用javascript調(diào)用服務(wù)器端的方法,語(yǔ)法也很簡(jiǎn)單
function getServerTime()
{
MyDemo._Default.GetServerTime(getServerTime_callback); // asynchronous call
}
// This method will be called after the method has been executed
// and the result has been sent to the client.
function getServerTime_callback(res)
{
alert(res.value);
}
就這樣,簡(jiǎn)單的幾步,就已經(jīng)完成了。在客戶端用javascript異步調(diào)用服務(wù)器端的C#方法,并可以得到服務(wù)器端的返回值,這個(gè)值會(huì)傳到j(luò)avascript,javascript可以處理這個(gè)返回的值,這個(gè)示例是官方給出的示例,服務(wù)器端返回的是一個(gè)DateTime,不過(guò),我們也可以返回復(fù)雜的數(shù)據(jù)類型,像DataTable之類,總之,AjaxPro把Ajax搞得很簡(jiǎn)單。
不過(guò),還有一點(diǎn)我沒(méi)完全弄清楚,就是AjaxPro.OnLoading,它可以在服務(wù)器未發(fā)送回值的時(shí)候向客戶顯示的loading一類的東西;我在使用過(guò)程中,有時(shí)會(huì)出現(xiàn)AjaxPro沒(méi)有定義的情況。關(guān)于這一點(diǎn),也在google groups上看到相關(guān)解答,不過(guò)自己還是沒(méi)有完全搞清楚
===============================================================================
AjaxPro可以寫Session
在服務(wù)器端page_load
AjaxPro.Utility.RegisterTypeForAjax(typeof(test));
this.Button_Write.Attributes.Add("onclick","WriteSession();");//寫session
this.Button_Read.Attributes.Add("onclick", "ReadSession();");//讀session
其他寫和讀的方法
/// <summary>
/// 寫session
/// </summary>
/// <param name="str"></param>
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public void WriteSession(string str)
{
Session["UserName"] = str;
}
/// <summary>
/// 讀session
/// </summary>
/// <returns></returns>
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string ReadSession()
{
string str = "";
if (Session["UserName"] != null)
{
str = Session["UserName"].ToString();
}
return str;
}
客戶端代碼:
//4、訪問(wèn)Session的值
//寫入
function WriteSession()
{
var str = "HAHA";
test.WriteSession(str,CallBack_WriteSession);
}
function CallBack_WriteSession(res)
{
if(res.error == null)
{
alert("OK");
}
else
{
alert(res.error.message);
}
}
//訪問(wèn)
function ReadSession()
{
test.ReadSession(CallBack_ReadSession);
}
function CallBack_ReadSession(res)
{
if(res.error == null)
{
alert(res.value);
}
else
{
alert(res.error.message);
}
}
=============================================================================
基本功能實(shí)現(xiàn),下一步當(dāng)然是更進(jìn)一步的實(shí)踐了。接著做的例子是個(gè)簡(jiǎn)單的登錄操作,并將用戶名和密碼用Session記錄下來(lái)。代碼和上面的類似,就不貼了,占地方,呵呵。
但有2點(diǎn)需要注意
1 關(guān)于Session,如果想在AjaxMethod中使用Session的話,那么AjaxMethod標(biāo)簽必須帶AjaxPro.HttpSessionStateRequirement.ReadWrite參數(shù)
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string CheckPassword()

{
}
2 關(guān)于屬性,我們注冊(cè)了一個(gè)屬性,運(yùn)行之后,在客戶端JS中的確就可以訪問(wèn)了
[AjaxPro.AjaxProperty()]
public string UserName

{
set

{
Session["UserName"] = value;
}

get

{
return Session["UserName"].ToString();
}
}
AjaxProSample.SampleSession.UserName = document.getElementById("txtUserName").value;

alert(AjaxProSample.SampleSession.UserName);
但此時(shí)如果在服務(wù)器端代碼中企圖使用的話,就會(huì)出現(xiàn)空引用異常,如果非要在客戶段和服務(wù)器端同時(shí)使用這個(gè)屬性的話,請(qǐng)?jiān)黾右粋€(gè)設(shè)置值的方法。例如:
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public void SetValue(string value)

{
UserName = value;
}
AjaxProSample.SampleSession.UserName = document.getElementById("TextBox1").value;
AjaxProSample.SampleSession.SetValue(AjaxProSample.SampleSession.UserName);