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去呼叫他，送出時會暫時不讓使用者再次點擊該鈕，等到打包服務完成後才會恢復該按鈕為可按。