Using jQuery.ajax in a "Hello World" way

前言：

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

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



實作：

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

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

在body中新增下列標籤：

<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：

<script type="text/javascript">
    function jqueryAjax() {
        $.ajax({
            url: 'ajaxhandler.ashx',
            type: 'POST',
            dataType: 'text',
            cache: 'false',
            success: function (result) {
                $('#textbox1').val(result);
            }
        })
    };
    $(function () {
        $('#button1').bind('click', jqueryAjax)
    });
</script>

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

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

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互動的截圖，附上傳輸量：

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

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

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

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

(ps.以後有機會會分享web form中使用jQuery.ajax的心得...一樣，若我富堅病沒犯的話...)