推薦這個blog:

Award


(ASP.NET 2010~2014年)

協作出版作品

其他資源

簡體中文blog

最新回應

前言

之前沒太多xmlHttpRequest與撰寫CallBack javascript的經驗,
一開始寫程式,就被AJAX.NET的UpdatePanel養壞了。

慢慢瞭解到UpdatePanel只是個偽裝的ajax,背後付出的effort仍然相當龐大後,
才慢慢的想去瞭解ajax該如何撰寫。

想要擺脫AutoPostBack付出的龐大成本,javascript與ajax的能力就一定要能養成。

這邊搭配jQuery的ajax功能,來示範一下在ASP.NET上的作法。

 

Play it

這邊範例的需求是,我們有兩個textbox,一個是ID,一個是Name,
當輸入ID改變時,要帶出Name的資料。(學會之後,就可以擺脫AutoPostBack=true,Text_Changed的方式啦...)

在這裡我把ID帶Name的程式碼,分別寫在三種檔案上來處理。

  1. .ashx(泛型處理常式)
  2. .aspx(一般網頁頁面)
  3. .asmx(Web Service)

為方便各位下載sample code後可以直接跑,
這邊的Name,就是取first name,加上js傳過來的第二個參數MiddleName:『middle』字樣,
last name的部分,則是測試Session值能否被Server端讀取到,所以再補上Session的值『91』來紀念代表從server端回傳的Name。

也就是ajax return回來的值是:畫面上輸入的first name+『middle』+ Session[“LastName”]
接著,讓我們繼續看下去。

  1. .ashx
    • 先新增一個泛型處理常式檔案,記得引用System.Web.SessionState與實作IReadOnlySessionState,我們才能在程式碼裡面讀到Session。
    • 接參數的部分,使用context.Request.Form["參數名稱]
    • 最後return的值,則是使用context.Response.Write(回傳值)
      ashx
  2. .aspx
    • 先新增一個.aspx,接著只保留第一行<%@ Page %>那行
    • 在Page_Load的事件撰寫要處理的程式碼
    • 接參數的部分,使用的是Request.Form["參數名稱]
    • 最後return的值,則是直接Response.Write(回傳值)
      aspx
  3. .asmx
    • 先新增一個.asmx,接著把[System.Web.Script.Services.ScriptService]取消註解
    • 新增一個public的method,叫做GetFullName,method上頭加上[WebMethod(EnableSession=true)],才能使用Session
    • return的資料直接return即可,雖然return的型別是string,但是javascript實際接到的是xml格式的字串
      asmx

有了這三種處理ID回傳Name的程式後,
來看看我們的頁面要怎麼撰寫。

網頁的部分,用三組來當試驗:

<body>
    <form id="form1" runat="server">
    <div>
        .ashx: first name<asp:TextBox ID="txtIDbyAshx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAshx" runat="server"></asp:TextBox><br />
        
        .aspx: first name<asp:TextBox ID="txtIDbyAspx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAspx" runat="server"></asp:TextBox><br />
        
        .ashx: first name<asp:TextBox ID="txtIDbyAsmx" runat="server"></asp:TextBox>
        full name<asp:TextBox ID="txtNamebyAsmx" runat="server"></asp:TextBox><br />
    </div>
    </form>
</body>

接著使用jQuery的ajax功能,注意的地方:

  1. 註冊在change事件
  2. ajax option:
    • type:使用post
    • url的部分,web service需加上method名稱
    • 傳入參數的部分,可用json,或一般字串使用『&』串接,如同一般的post或QueryString
    • ajax成功的話,會進入success,失敗會進入error
    • 成功回傳的字串,在success的function(回傳值)
    • web service回傳為XML格式,需自行parse使用

jQuery 

 

結論

ajax的能力未來一定得具備,因為不管是一般的html、畫面冗重的Web form、或是ASP.NET MVC,
要等待Post的過程,對User來說都是種折磨。

既然沒有多難,就順手把它學起來吧!

In 91 it!!

Sample Code: jQueryAjax.zip


關連文章

[jQuery plugin-COOKIE]保留區塊的顯示/隱藏狀態

[ASP.NET]Session遺失的幾種可能

[OCUP課程重點-2]Class Diagram(基礎)

[獨自murmur]品質與開發時間的平衡

回應

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by aliceyeh

    慢慢瞭解到UpdatePanel只是個偽裝的ajax,背後付出的effort仍然相當龐大後...

    Really!? 我還在想要不要開始導入 Microsoft AJAX 4.0 了咧, 如果連最基本的 UpdatePanel 都效率不彰的話, 其他的控項就更糟糕了啊!

    ps. .aspx 我覺得放在 Page_init 會比 Page_load 來的快速, 回應完畢之後直接 Response.End, 避免再觸發其他頁面事件, 雖然這些事件都是空的, 也是會消耗掉Server一點點的時間, 既然是AJAX就是要快速回應, 在 Page_init 至少頁面還沒有載入, 可以搶到一點點時間。

    2010/1/13 上午 10:39 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to aliceyeh :

    UpdatePanel個人覺得只是用來當過渡時期的產物,
    要有效率,還是得透過client端的Ajax做。

    另外就是UpdatePanel就跟Page event一樣,會有一些『magic』的處理是看不見的,也因為這樣,沒完全懂他特性的話,偵錯是相當痛苦的。

    aspx的部分,謝謝您的建議唷,這我倒是沒留意到 :)
    因為我後來都直接用ashx了,比較乾脆且可讀性比較高。

    2010/1/13 下午 12:17 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by gipi

    to aliceyeh :
    我自己的看法,說他是偽裝是沒有不妥啦,但我自己會覺得他的目的是為了讓一些人更容易去使用AJAX技術,因此將許多的細節隱藏了,你只要將元件放到UpdatePanel中,設定好trigger,就有了AJAX效果---Magic....
    但若你不知道他跟PageMethods這一類的AJAX呼叫方法有什麼差別,那你可能會無止盡的使用UpdatePanel,最後系統出了問題你也不知道為什麼,甚至當你知道時你的系統已經改不動了....

    UpdatePanel在某些場合中會非常好用,但在某些場合就不合適,重底還是你要熟悉它的特性...一些淺見..

    2010/1/13 下午 08:02 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by shine

    請問這樣可以抓到不同機器的SESSION嗎?

    2010/4/16 下午 04:43 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by

    請問一下 那個jquery-1.3.2.min.js檔 的東西需要瞭解才能學會嗎?我好像不太能瞭解內容也

    2010/10/22 下午 06:33 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 雨 :
    jQuery官網請參考:http://jquery.com/

    學的話可以參考黑暗大的邊做邊學:http://msdn.microsoft.com/zh-tw/dd310332.aspx#jQuery

     點部落也可以參考topcat整理的文章:http://www.dotblogs.com.tw/topcat/category/1656.aspx

    2010/10/23 上午 12:09 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 阿良

    91大大你好:
    首先謝謝大大po出這麼淺顯易懂的文章^^
    另外~
    想請教你一下,這方法有辦法套用在Gridview上的某一個欄位嗎?因GridView上的TextBox會自已自動產生Client_ID
    這樣一來,文中的txtIDbyAsmx將無法指定…請問有什麼方法可以處理此一問題嗎?

    2011/1/18 上午 09:45 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 阿良 :
    jQuery定位DOM的方式是它最具優勢的地方,不一定要用id,您可以用多個條件、Xpath、class等等來解決這個問題,也可以用(this)的方式,甚至server端吐出clientID,或是在註冊js時用<%%>的方式把ClientID放進去。

    2011/1/18 上午 10:44 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 日人

    感謝91哥分享,小弟最近想用 jQuery 取代 asp.net AJAX ,始終覺得這是漫漫長路,加上本身資質駑鈍,一直找不到入手的資源,來到這邊似乎看到一絲希望。

    2011/5/16 上午 10:18 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 使用.asmx找不到回傳的值

    謝謝91哥的教學
    小弟實地run過之後發現
    使用.asmx存取的方法,在firefox和chrome都不行
    chrome的錯誤提示如下:
    Default.aspx:47Uncaught TypeError:Cannot read property 'firstChild' of null[repeated 2 times]

    請問要如何解決?

    2011/6/22 上午 11:54 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 使用.asmx找不到回傳的值 :

    參考:http://social.msdn.microsoft.com/Forums/zh-TW/236/thread/384800f1-d366-484e-bd30-aaeac5d07d85#9125942a-cc8a-41d5-981e-882fe0894f82

    可以練習用firebug或開發者工具去檢查,為什麼回來的值會有問題,找到原因之後,要解決就簡單的多。

     

    2011/6/22 下午 01:56 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by to 91

    感謝您的回覆
    使用firebug去檢查後
    發現:
    Default.aspx頁面的第46程式碼
    var name = xmlDoc.childNodes(1).firstChild.nodeValue;

    似乎撰寫有誤
    我將它改寫成以下語法,就可以了
    var name = xmlDoc.childNodes[0].firstChild.nodeValue;

    2011/6/22 下午 03:33 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 狗兒

    請問版主我可以用 jquery ajax 單純的呼叫
    PageMethod 嗎?若該 PageMethod 不須傳入任何參數,請問又該如何撰寫?

    2011/8/11 下午 08:54 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 狗兒 :

    請參考:http://pastie.org/2356308

    可以想像他是params object[]的用法,第一個參數直接放callback function,就代表呼叫的PageMethods沒有參數。
     

    2011/8/11 下午 11:36 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by wkyoti

    請問版大~
    關於.asmx 的保謢
    以ajax的方式 不就任何的網頁都可以呼叫.asmx
    並在呼叫的時後,傳入惡意的字串或值
    有什麼方式 可以過濾或限制後端的處理頁面

    2011/10/24 上午 10:51 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to wkyoti :

    分兩段來討論:

    1.任何網頁都可以呼叫的部份,您可以透過『authorization』的部份來限制授權。

    2.傳入惡意的字串或值,就如同如何防範XSS攻擊一樣,您得去過濾進來的值,例如透過AntiXSS Library來過濾。

     

    2011/10/24 上午 11:01 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by wkyoti

    謝謝版大~
    AntiXSS Library 解決了我很大的困惑!
    authorization 限制授權部分 我還在努力

    2011/10/28 下午 04:13 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by Vasili

    請問,
    .aspx 的方式,
    可在一個網頁裡面定義多個方法嗎?
    還是一個 .aspx 只能提供一個方法?
    例如:查、刪兩個方法一定要寫成 2 個 .aspx 來呼叫?還是可在同一個 .aspx ?

    2012/3/7 下午 03:09 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to Vasili : 

    就跟.ashx一樣,重點是HttpHandler,最後要回傳的是什麼。

    .aspx,最後回傳的就是Response.Write的內容。

    而是不是可以定義多個方法,當然可以,只要最後Render出來的內容是你要回傳的就可以。

    例如:

    判斷Request.Form["action"]是"Query",還是"Delete",轉呼叫您.aspx.cs上的Query或是Delete方法。

    這樣不就是兩個方法囉?就是對xxx.aspx作Request,並依據post的data,來執行相關的邏輯與回傳。

        protected void Page_Load(object sender, EventArgs e)
        {
            var action = Request.Form["action"];
            if (action == "Query")
            {
                this.QueryData();
            }
            else if (action == "Query")
            {
                this.DeleteData();
            }
    
        }
    
        private void QueryData()
        {
            throw new NotImplementedException();
        }
    
        private void DeleteData()
        {
            throw new NotImplementedException();
        }

     

    2012/3/7 下午 05:36 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 陳先生

    謝謝提供寶貴的參考

    但真正在實做不可能這麼簡單,尤其設計會用到WebGridView、WebFormView時,控制項ID是變動性的

    比較希望有這二個元件方面的資料參考,因為這二個元件的jQuery參考在網路上實在太少了。

    2013/3/15 上午 09:48 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 陳先生 :

    首先,建議留言發問的朋友們,至少要留個email啊...不然感覺我好像在回給空氣一樣。

    再來,您這樣子的發問描述,就可能代表著您沒從 jQuery 的角度去了解,而是 base on server control。

    建議您去了解 jQuery 的 selector 的意義與使用方式,server control 最終就是被 Render 成 HTML 。

    jQuery 操縱的也是 HTML 的 DOM,只有這樣子串起來,您才不會被 server control 綁住。

    所以您的「真正實作不可能會這麼簡單」,其實只是因為您對 jQuery 還不夠熟悉罷了。事實上,selector 定位就這麼簡單。
     

    2013/3/15 上午 11:46 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 阿尼尼

    您好 我是用您的sample : asmx

    執行後會出現 ajax Fail 這有可能問題出在哪裡? 謝謝

    2013/6/14 下午 03:09 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by 91

    to 阿尼尼 :
    偵錯看看囉,您只有這樣發問,我很難幫您找到問題的原因。

    另外也建議您到MSDN上發問,那邊的發問方式比較好整理,也會有比較多人一起協助你。

    重點還是您得動手偵錯一下,把相關的錯誤訊息、程式碼提供出來。否則光這樣問,我也只能說:我自己的 code 不會有 ajax fail 的情況。

    MSDN forum: http://social.msdn.microsoft.com/Forums/zh-TW/236/threads/

    2013/6/16 下午 12:23 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by SHAO-WEI

    感謝 91 老師的分享~

    2013/7/1 下午 10:38 | 回覆

  • # re: [ASP.NET & jQuery]使用jQuery的Ajax存取資料(ashx,aspx,asmx) by <TF>

    <TF>

    2014/9/4 下午 02:21 | 回覆

登入後使用進階評論

Please add 1 and 8 and type the answer here: