jQuery起點教程之使用AJAX(4)

在這一部分我們寫了一個小小的AJAX應用，它能夠rate一些東西（譯Keel註：就是對某些東西投票），就像在youtube.com上面看到的一樣。
首先我們需要一些伺服器端代碼，這個例子中用到了一個PHP檔案，讀取rating參數然後返回rating總數和平均數。看一下rate.php代碼.
雖然這些例子也可以不使用AJAX來實現，但顯示我們不會那麼做，我們用jQuery產生一個DIV容器，ID是"rating".

$(document).ready(function() {
        //
generate markup
        var ratingMarkup = ["lease rate: "];
    
   for(var i=1; i <= 5; i++) {
               
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a>
";
        }
        // add markup to container and applier click handlers
to anchors
        $("#rating").append( ratingMarkup.join('')
).find("a").click(function(e) {
                e.preventDefault();
    
           // send requests
                $.post("rate.php", {rating:
$(this).html()}, function(xml) {
                        // format
result
                        var result = [
                            
   "Thanks for rating, current average: ",
                            
   $("average", xml).text(),
                                ", number of
votes: ",
                                $("count", xml).text()
       
                ];
                        // output result
             
          $("#rating").html(result.join(''));
                } );
    
   });
});

這段代碼產生了5個連結，並將它們追加到id為"rating"容器中，當其中一個連結被點擊時，該連結標明的分數就會以rating參數形式發送到rate.php，然後，結果將以XML形式會從伺服器端傳回來，添加到容器中，替代這些連結。

如果你沒有一個安裝過PHP的webserver，你可以看看這個線上的例子.
不使用javascript實現的例子可以訪問
softonic.de 點擊 "Kurz bewerten!"

更多的AJAX方法可以從這裡 找到，或者看看API文檔 下面的AJAX filed
under
AJAX.

（譯者註：這個線上執行個體從國內訪問還是比較慢的，點擊後要等一會兒才能看到結果，可以考慮對它進行修改，比如加上loading，投票後加上再投票的返回連結等。此外，這個例子中還是有很多需要進一步消化的地方，看不懂的地方請參考API文檔。）

一個在使用AJAX載入內容時經常發生的問題是：當載入一個事件控制代碼到一個HTML文檔時，還需要在載入內容上應用這些事件，你不得不在內容載入完成後應用這些事件控制代碼，為了防止代碼重複執行，你可能用到如下一個function:

$(function() {
        var
addClickHandlers = function() {
               
$("a.clickMeToLoadContent").click(function() {
                      
 $("#target").load(this.href, addClickHandlers);
                });
    
   };
    
   addClickHandlers();
});

現在，addClickHandlers只在DOM載入完成後執行一次，這是在使用者每次點擊具有clickMeToLoadContent
這個樣式的連結並且內容載入完成後.

請注意addClickHandlers函數是作為一個局部變數定義的，而不是全域變數(如：function
addClickHandlers()
{...})，這樣做是為了防止與其他的全域變數或者函數相衝突.

另一個常見的問題是關於回調(callback)的參數。你可以通過一個額外的參數指定回調的方法，簡單的辦法是將這個回調方法包含在一個其它的function中:

// get some data
var foobar = ...;
//
specify handler, it needs data as a paramter
var handler = function(data)
{
  ...
};
// add click handler and pass foobar!
$('a').click(
function(event) { handler(foobar); } );

// if you need the context of the
original handler, use apply:
$('a').click( function(event) {
handler.apply(this, [foobar]); }
);

用到簡單的AJAX後，我們可以認為已經非常之“web2.0”了，但是到現在為止，我們還缺少一些酷炫的效果。下一節將會談到這些效果.

本章的相關連結:

• jQuery AJAX Module
• jQuery
  API: Contains description and examples for append and all other jQuery
  methods
• ThickBox: A jQuery plugin that uses jQuery to enhance the famous
  lightbox