jQuery 學習心得筆記 (4) – Ajax (上)

因為是第四篇，所以要介紹四個字的 Ajax！(冷)

在這個號稱 web 2.0 的時代，寫網站，尤其是還用到了大量的 JavaScript，如果與使用者的互動還沒有用到 Ajax 技術的話，似乎是一件很神奇的事，至於 Ajax 是什麼東西？想瞭解的人可以到這裡去看維基百科上的解釋，這篇就專心寫一下 jQuery 中的 Ajax 部份。

產生一個 Ajax 呼叫

我們來把之前的例子翻修成為 Ajax 版本，也就是說，之前的版本是我們把 "Hello" 字樣寫死在 JavaScript 裡，改成使用 Ajax 版本的目標，是希望顯示的字樣從 server 上取得。所以，我們先在 server 上寫一個處理 request 的小程式（這裡用 PHP 作為示範），假設名為 msg.php：

這個 PHP 程式很簡單，任何對 msg.php 的 request，它只回應一個 "Hello" 的字串，所以我們現在要做的事情便是：按下按鈕後，向 server 端的 msg.php 發出一個 request，然後把它回應的東西放在要顯示的地方。所以我們把 showMsg 函式的部份改寫成這樣：

function showMsg(e) {
$(e.target).attr('disabled', true);
$.ajax({
url: 'msg.php',
error: function(xhr) {
alert('Ajax request 發生錯誤');
$(e.target).attr('disabled', false);
},
success: function(response) {
$('#msg').html(response);
$('#msg').fadeIn();
setTimeout(function(){
$('#msg').fadeOut();
$(e.target).attr('disabled', false);
}, 3000);
}
});
}

在這段程式碼中，當我一把按鈕功能關閉時，馬上就利用 jQuery 中的 ajax() 函式來產生一個 Ajax request，注意這裡的寫法是 $.ajax，因為 ajax () 函式是定義在 jQuery 這個物件下，而且不用指定網頁元件（當然你要也是可以），所以可以直接用 jQuery.ajax() 來呼叫使用，不過 jQuery 提供了一個 alias，也就是 $ 相當於 jQuery，所以我通常會把 code 寫成 $.ajax(...) 囉。

而 jQuery.ajax() 函式中需要帶一個 key-value pair 的參數，以此例來說：

所以我把之前做的事都移到了 success 的 callback 函式中，不過值得注意的是：

目前版本（註）的 jQuery/Ajax success callback 帶的參數（code 中的 response）直接就是 server 回應的內容，而不像其它 error/complete callback 帶回來的是一個 XMLHttpRequest 物件。

所以我就直接把 response 塞進 $('#msg') 裡了。

參數傳遞

上面的例子，只有單純作一個 ajax request，如果我們同時要在 Ajax request 時傳一些數值給 server 作處理的話，那就要在 $.ajax() 函式中帶入 data 的參數。我們把之前一直使用的例子再作點修改，傳送兩個參數給 msg.php ，好讓它的回應訊息會根據傳入的參數而有所不同，先在按鈕前加入兩個輸入元件：

#gender 是一個下拉式選單，可以選擇是 Male 或 Female；而 #name 則是一個文字輸入元件，用來輸入名稱，這時我們將 showMsg 再改寫一下 $.ajax 的部份：

$.ajax({
url: 'msg.php',
data: {gender: $('#gender').val(), name: $('#name').val()},
error: function(xhr) { .... },
success: function(response) { ... }
});

這次我們加入了 data 的參數，用意是在作 ajax request 時，帶兩個參數：gender 及 name，這兩個參數的值就是在輸入欄位輸入的值， val() 函式是針對輸入欄位而設計的，它可以抓出目前該輸入欄位所輸入的值。

所以 msg.php 也要做適當的修改以接收 ajax request 所送來的參數：

這樣，若下拉式選單傳遞的是 Male 則回應 "Hello, Mr. XXX" 否則回應 "Hello, Miss XXX"。

回傳資料型態

當 Ajax request 成功後，jQuery 的 ajax 函式會把回應的資料塞給 success 的 callback，這個參數預設是以 HTML 的資料格式來看待，以上述的例子而言，在沒有指定回傳資料型態的情況下，response 預期會是一份 HTML 資料，所以可以直接利用 jQuery 的 html 函式來塞入 HTML 資料。但是如果 server 端程式的回應值不是 HTML 的時候呢？要怎麼改變 response 的資料型態？答案就是在 $.ajax 函式中加入 dataType 的參數來指定。

假設我 server 端的回傳值是一個 JSON 物件，裡面可能只是一個成員是 HTML 資料，那我就不能直接把 response 當成 HTML 來塞了。舉個例子，若 server 端的程式（這裡用 Ruby on Rails 說明）在回應時都以 JSON 來送：

def msg
....
....
render :json => {:success => true, :msg => 'Hello'}.to_json
end

那我的 $.ajax 在呼叫時，就必須要加入 dataType: 'json' 來指定回傳的資料型態為何，這樣 response 就會是一個 JSON object，你可能就會把 success 的 callback 寫成這樣：

...
success: function(response) {
if (response.success) {
$('#msg').html(response.msg);
...
}
...
}

另外，在 Ruby on Rails 上也蠻多人會利用 RJS 來設計 server/client 間的互動，此時 dataType 就必須要指定為 'script'，這樣當 ajax 成功後，你的瀏覽器才會知道要把回傳的資料當 JavaScript 來執行。

下一篇將會介紹 jQuery 的 Ajax 部份會帶動哪些 event，以及我在使用 jQuery/Ajax 時碰過的一些問題。

, , jquery, jquery-tut

Pingback: sshlog » Blog Archive » [ASP] asp + jquery + json()

Pingback: [jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單 | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()

mos

想請教。。。。
１、如何削除cache的東東、程式不時不能即時産生変化、、、需要人手delete..、是否追加sid於link内、但写法是点様的ya
２、我同時導入了min 和 ui 後、只開啓了tab,dialog,datepicker、但頁面変慢了很多、、、有否方法解決

呉該！

Ren Jun

推推～ 太感謝大大的分享，學很多！

JQuery真的好直覺唷！

Nick

• 共2页:
• 上一页
• 1
• 2
• 下一页