jQuery起點教程之使用AJAX

在這一部分我們寫了一個小小的AJAX應用，它能夠rate一些東西（譯Keel註：就是對某些東西投票），就像在youtube.com上面看到的一樣。
首先我們需要一些伺服器端程式碼，這個範例中用到了一個PHP文件，讀取rating參數然後回傳rating總數和平均數。看一下rate.php程式碼.
雖然這些範例也可以不使用AJAX來實現，但顯示我們不會那麼做，我們用jQuery產生一個DIV容器，ID是"rating".$(document).ready(function( ) {
        // generate markup
        var ratingMarkup = ["lease rate: "];
        ratingMarkup[ratingMarkup.length] = "" + i + " ";
        }
        // add markup to container and applier click handlers to anchors
) "a").click(function(e) {
                e.preventDefault();
          "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()
                        ];
                         $("#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，投票後加上再投票的返回連結等。發生的問題是：當載入一個事件句柄到一個HTML文件時，還需要在載入內容上套用這些事件，你必須在內容載入完成後套用這些事件句柄，為了防止程式碼重複執行，你可能用到下列一個function:$(function() {
        var addClickHandlers = function() {
                           $("#target").load(this.href, addClickHandlers );
                });
        };
        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」了，但是到現在為止，我們還缺少一些酷炫的效果。下一節將會談到這些效果.

 更多相關文章請關注PHP中文網（www.php.cn）！