萬盛學電腦網 >> 網絡編程 >> .net編程 >> 基於.NET三種Ajax技術的運用——原生js、ASP.NET Ajax和.NET回調
基於.NET三種Ajax技術的運用——原生js、ASP.NET Ajax和.NET回調
第一種方式是我們親自手動編寫Javascript代碼實現，關於這個方式我前面有一篇博文 《跟我一起創建一個簡單的javascript ajax對象》介紹過了。具體實現在此不再贅述。那麼使用這樣的方式的一大好處是使用靈活，便於我們自己把握整個異步通信的過程，但是要求開發人員具備較好的Javascript基礎，另外一點就是要創建編寫新的Handler.ashx文件或者一個ASPX文件。
微軟向來都是喜歡降低開發入門門檻，因而在.NET2.0之後就發布了他們的ASP.NET AJAX框架，該框架使得我們可以像開發webform一樣簡單的拖放一些控件就能實現AJAX，下面引出一個例子說明。ASPX頁面代碼如下
View Code
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<p>
<asp:Label ID="lblNonAjax" runat="server" Text="No Ajax"></asp:Label>
</p>
<hr />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server"></asp:Label>
<p>
<asp:Button ID="btnAjax" runat="server" Text="Ajax Event"
onclick="btnAjax_Click" />
<asp:Button ID="btnNonAjax" runat="server" Text="Post Black Event"
onclick="btnNonAjax_Click" />
</p>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnNonAjax" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
雖然我們對ScriptManager控件未做任何改動，該控件也不顯示任何信息，但是我們要使用ajax框架就必須將該控件拖放到其他ajax控件之前。然後我們用得最多的莫過於UpdatePanel控件了，該控件也確實非常令人振奮。我們可以在該控件裡面指定那些事件需要局部刷新與整頁刷新，默認是異步的局部刷新。如果要想實現整頁刷新提交，像平時不用ajax控件的效果，只需要在<Triggers>標簽裡面指定<asp:PostBackTrigger ControlID="btnNonAjax" />，ControlID就是不需要異步提交的控件，如此指定後該控件的任何事件都是整頁刷新提交。
接下來看cs代碼如下
View Code
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
//因為以下控件不在Update內，所以觸發Ajax事件時無法對其進行更新
lblNonAjax.Text = "觸發了回發事件！";
}
}
protected void btnAjax_Click(object sender, EventArgs e)
{
this.lblText.Text = "這是一個Ajax事件的觸發";
//Response.Write("<script>alert('這是一個Ajax事件的觸發')</script>");
//觸發AJAX事件，不能使用該方式或其他方式向頁面輸出，除非使用下面的方式
//觸發的是UpdatePanel裡的控件的事件，輸出腳本必須使用以下方式
ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ajaxScript", "alert('這是一個Ajax事件的觸發');", true);
}
protected void btnNonAjax_Click(object sender, EventArgs e)
{
this.lblText.Text = "這是一個頁面回發刷新事件的觸發";
Response.Write("<script>alert('這是一個頁面回發刷新事件的觸發')</script>");
}
}
使用這個第二種Ajax技術開發效率較高，而且幾乎不需要任何Javascript基礎就可以實現。但是不好之處就是生成HTML代碼量較大，而且我們不好掌握細節的實現，靈活性也不高，發布的時候可能會有些莫名其妙的錯誤。
最後呢我們來看下回調技術實現Ajax。先貼代碼，ASPX頁面代碼如下
View Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<script type="text/javascript">
function setCallback(value,dom){
dom.style.color = "red";
dom.innerHTML = "正在請求...........";
var aa = "123";
<%= ClientScript.GetCallbackEventReference(this,"aa", "successCallback","dom") %>
}
function successCallback(result,dom){
dom.style.color = "red";
dom.innerHTML = result;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" onblur="setCallback(this.value,document.getElementById('lblMsg'));" />
<label id="lblMsg"></label>
</div>
</form>
</body>
</html>
cs代碼為
View Code
public partial class CallbackDemo : System.Web.UI.Page, ICallbackEventHandler
{
private string callbackResult = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
}
#region ICallbackEventHandler 成員
public string GetCallbackResult()
{
return this.callbackResult;
}
public void RaiseCallbackEvent(string eventArgument)
{
this.callbackResult = "The Callback Value Is \"" + eventArgument + "\"";
}
#endregion
}
在腳本中一個關鍵的代碼是<%= ClientScript.GetCallbackEventReference(this,"aa", "successCallback","dom") %>，ClientScript.GetCallbackEventReference方法有三個重載，我使用的這個重載在MSDN的解釋為
View Code
// 摘要:
// 獲取一個對客戶端函數的引用；調用該函數時，將啟動一個對服務器端事件的客戶端回調。此重載方法的客戶端函數包含指定的控件、參數、客戶端腳本和上下文。
//
// 參數:
// argument:
// 從客戶端腳本傳遞給服務器端的一個參數 System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)
// 方法。
//
// context:
// 啟動回調之前在客戶端計算的客戶端腳本。腳本的結果傳回客戶端事件處理程序。
//
// control:
// 處理客戶端回調的服務器 System.Web.UI.Control。該控件必須實現 System.Web.UI.ICallbackEventHandler
// 接口並提供 System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)
// 方法。
//
// clientCallback:
// 一個客戶端事件處理程序的名稱，該處理程序接收成功的服務器端事件的結果。
//
// 返回結果:
// 調用客戶端回調的客戶端函數的名稱。
//
// 異常:
// System.ArgumentNullException:
// 指定的 System.Web.UI.Control 為 null。
//
// System.InvalidOperationException:
// 指定的 System.Web.UI.Control 未實現 System.Web.UI.ICallbackEventHandler 接口。
這種方式的代碼量比較少，但是實現的功能比較有限，它要求開發人員要有Javascript基礎。
以上就是在ASP.NET中三種主要ajax技術的實現。
.net編程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved