2010年11月22日 星期一

JQuery_呼叫後端服務(WebService)

前一陣子因為討論asp.net2.0的callback機制,就讓正巧對jQuery有興趣的我很好奇jQuery要怎麼樣跟後端連結,所以目標是:利用jQuery呼叫後端的WebService,並將回傳的資料結果顯示於頁面上。

先來看看要被呼叫的WebService作了哪些事情?

內容非常少,傳入兩個字串,延遲四秒後將傳入字串組起來,回傳UsrID說:SAY的字串回去。

接下來看看怎麼樣在jQuery呼叫WebSerivce?

1. 當然,要使用jQuery當然要先引入jQuery,這邊是使用1.4.3版。
2. 在頁面只放上一個按鈕(id="btn1"),以jQuery註冊按鈕的事件。
3. 接下來就是接服務的程式碼:

$('#btn1').click(function () {
$.ajax({
type: "POST",
dataType: "json",
url: "../WebService/WebService.asmx/myTest1",
contentType: "application/json; charset=utf-8",
data: "{UsrID:'ola', SAY:'jQuery接服務成功!好耶~'}",
success: function (response) {
alert(response.d); //檢視回傳的結果 DeBug用
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});

需要注意的參數有三個:
1. url:輸入WebService的位置,並在後面加上要呼叫的方法名稱(本例方法名稱為myTest1)
2. data:本例使用Json的資料形式傳輸,注意文字須加單引號。
3. success:服務呼叫成功後,會執行的程式內容。
4. error:服務呼叫失敗會執行的程式內容。

執行結果就是當按下按鈕時,等待約略4秒會有一個alert。


為什麼測試要等待四秒?其實這跟最近作的專案有關,裡面有一個功能需要去搜尋需要檔案後,進行檔案壓縮打包的動作,所以目前的作法是,將打包成zip檔的動作寫成一個服務,利用jQuery去呼叫他,送出時會暫時不讓使用者再次點擊該鈕,等到打包服務完成後才會恢復該按鈕為可按。

沒有留言:

張貼留言