四.Rate me:使用AJAX
在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西 ( 译者Keel注:就是对某些东西投票 ),就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下 rate.php代码。
虽然这些例子也可以不使用AJAX来实现,但显然我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating"。
这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。
如果你没有一个安装过PHP的webserver,你可以看看这个 在线的例子。
这是一个比较粗糙的例子,更完美的例子可以访问 softonic.de 点击 "Kurz bewerten!"。
更多的AJAX方法可以从 这里找到,或者看看 API文档下面的AJAX。
(译者Keel注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)
一个在载入AJAX时经常发生的问题是:当载入一个事件句柄到一个需要载入内容的HTML文档时,你只能在内容载入后再加载这些句柄,为了防止代码重复执行,你可能用到如下一个function:
现在,addClickHandlers只在DOM载入完成后执行一次,并且是在用户点击具有clickMeToLoadContent 这个样式的链接后。
请注意addClickHandlers函数是作为一个本地变量定义的,而不是全局变量(如:function addClickHandlers() {...}),这样做是为了防止与其他的全局变量或者函数相冲突。
另一个常见的问题是关于回传(callback)的参数。你可以通过一个额外的参数指定回叫的方法,简单的办法是将这个回叫方法包含在一个其它的function中:
用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将如谈到这些效果。
感兴趣的链接:
前一篇: http://keelsike.blogspot.com/2006/12/jqueryjquery_10.html
在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西 ( 译者Keel注:就是对某些东西投票 ),就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下 rate.php代码。
虽然这些例子也可以不使用AJAX来实现,但显然我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating"。
$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) { ratingMarkup[ratingMarkup.length] = " " +
i + " ";
}
// 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,你可以看看这个 在线的例子。
这是一个比较粗糙的例子,更完美的例子可以访问 softonic.de 点击 "Kurz bewerten!"。
更多的AJAX方法可以从 这里找到,或者看看 API文档下面的AJAX。
(译者Keel注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)
一个在载入AJAX时经常发生的问题是:当载入一个事件句柄到一个需要载入内容的HTML文档时,你只能在内容载入后再加载这些句柄,为了防止代码重复执行,你可能用到如下一个function:
// lets use the shortcut
$(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
前一篇: http://keelsike.blogspot.com/2006/12/jqueryjquery_10.html