Hello World Level jQuery.ajax

通常在寫 ASP.NET Web Form 的時候我們很習慣會把一些 html tag 以 Server control 來使用。

但是這些控制項若放在表單中，每次的POST動作都會把這些控制項的內容和狀態一起送回伺服器端，若是有需要的話倒還好，偏偏很多控制項的狀態是根本不需要維護的。像是 Button 啦～ Literal 啦～這些東西其實大多數的時候是死都不會改變的，不過因為天生架構的關係所以每次 POST 回去都會要把這些東西一起送回 Server，實在有點麻煩。所以若是這個時候可以用jQuery來取代 form 傳回 Server 並處理的話可以減輕不少流量的負擔。

實作

一開始我們先開啟一個空的 Web From 專案～

OpenNewEmptyProject

然後新增一個Index.aspx頁面並設定為起始頁面。

在body中新增下列標籤：

1
2
3
4
5
6
7
<input type="text" id="textbox1" /><input type="button" id="button1" value="jQuery way" />
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="formTextbox1" runat="server"></asp:TextBox>
        <asp:Button ID="formbutton1" runat="server" Text="form way" OnClick="formbutton1_Click" />
    </div>
</form>

並且在body中新增下列script：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function jqueryAjax() {
    $.ajax({
        url: 'ajaxhandler.ashx',
        type: 'POST',
        dataType: 'text',
        cache: 'false',
        success: function (result) {
            $('#textbox1').val(result);
        }
    })
};
$(function () {
    $('#button1').bind('click', jqueryAjax)
});

這段script的作用就在於，把id為button1的按鈕的click事件與jqueryAjax函式進行綁定。而jqueryAjax函式的工作就只是呼叫名為ajaxhendler.ashx的泛型處理常式來回應client端的呼叫。

而這次我們在泛型處理常式就直接用最原始的樣貌(就是新增泛型處理常式後直接用)，不做任何修改。像是底下這樣：

1
2
3
4
5
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Write("Hello World");
}

是的這次就是個標準的 hello world 級別的程式，不過其實這邊是可以進行資料庫的存取動作的。藉由把資料庫的存取放到這邊來我們可以讓UI的部份動的更順利(ps.若我富堅的毛病沒犯的話，這會在下回分享 = =)

以上這些就算是做好了使用jQuery.ajax方法來與 Server溝通的最簡單方式。底下就是使用jQuery的ajax方法來與Server互動的截圖，附上傳輸量：

jqueryajax

另外，我們也要比較一下若是用web form來進行server的溝通的話傳輸量又會是如何：

webformway

這邊我們可以發現到，web form 就算是簡單的 “Hello Word” 文字的傳送也需要 1.27kb 的傳送量，反觀若是用 jQuery.ajax 來溝通的話只需要 344byte 的傳輸量，若是傳輸的頁面更複雜的話，兩者的差距會越來越誇張!

所以囉～若是要與 Servre 溝通的話會建議儘量用 ajax 來傳輸，減輕網路流量的負擔，但這個範例是用 web form，難免會有要用到控制項或是 UpdatePanel 這種恐怖的東西，若是轉換到 ASP.NET MVC 架構的話就可以避免和這種怪物正面對決的機會。

不過…若是在做專案的話是要和 web form 戰鬥還是要跟 MVC 快樂的舞蹈應該就不是我們工程師能決定的事了….

實作#

實作