jQuery.ajax() 的 callback 方式

Home / Javascript / JQuery / jQuery.ajax() 的 callback 方式

jQuery.ajax()提供的 jQuery.ajax() 的 callback 函式其中有 4 個 callbacks: beforeSend, complete, error, 以及 success,當一個 Ajax request 送出到完成,會依照:

1、beforeSend
2、success or error
3、complete

這樣的順序來呼叫你所定義的 callback 函式也就是不管成功或者失敗,beforeSend 及 complete 定義的 callbacks 都會被呼叫到,而 success 或 error 的 callback 則是視 Ajax request 的成敗來決定誰會被呼叫。

另外值得一提的是,jQuery 1.2 開始加入 JSONP 的支援,當你的 dataType 設成 jsonp 的時候,jQuery 的 ajax 函式會將 dataType 改為 script 並且多送一個 callback 參數到 server,然後 server 可以利用 callback 參數的值來輸出適當的 script 送回給 browser 來執行,也許這樣講很抽象,直接來看之前的例子改成 JSONP 的作法:
把php檔案命名為:msg.php

然後 JavaScript 的部份改成:

先看 msg.php 最後的輸出,其實是根據 callback 參數的值來決定,以這個例子而言可能就會輸出

processData({msg: ‘Hello, Mr. XXX’});

所以 jQuery 會自動幫你把 dataType 設成 script 好讓 browser 認得要執行,這樣就不會去呼叫 success 或 complete 的 callback ,而是去呼叫你自己定義的 callback function 。
JSONP 的應用愈來愈多,像是 Google Calendar API 或是 twitter API 都有用到 JSONP

當 Ajax request 產生時,如果你希望網頁上其它的元件能根據 Ajax 進行中不同的流程而做些動作的話,jQuery 已經定義好了一組 event handlers (見文件中的 ajaxXXXX)。而在 jQuery.ajax 函式中,如果 global 參數設為 true 的時候(預設就是 true),它會在 ajax 的流程中,適時去 trigger 這些 event,如果有網頁元件使用這些函式來 bind 住這些 event 的話,就會去呼叫設定的 callback function。而它 trigger 的順序為:

ajaxStart » ajaxSend » ajaxSuccess or ajaxError » ajaxComplete » ajaxStop
假設我們在按鈕旁加上一個 loading… 的圖案,預設是不顯示,但是當 ajaxStart 的時候把它打開,而在 ajaxComplete 的時候再關閉。先在按鈕後加上:

<img src=”spinner.gif” style=”display:none” id=”loading” />
然後在 script 中幫 #loading 去 bind 必要的 event:

這樣一來,當按鈕按下後建立一個 Ajax request 後,所有 bind ajaxStart event 的元件就會去呼叫定義好的 callback,而整個 Ajax request 完成後,ajaxComplete event 又會被 trigger。

jQuery/Ajax 部份所提供的 API 真是讓我們減輕不少使用 Ajax 上的負擔,再加上自訂 ajaxXXXX event 的架構,讓你不用把所有的動作擠在同一個 callback function 之中,完全符合 jQuery 的以網頁元件為中心的理念。
如果不想每一次使用 ajax 都設定那麼多參數的話,其實 jQuery/Ajax API 還定義了一些快速的函式(如:load, post, getJSON, getScript),一樣是兩三下就完成 ajax 的動作。

5502 全部 14 今日

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*