在這一部分我們寫了一個小小的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)!