jQuery入门-使用AJAX

在这一部分我们写一个小小的AJAX应用，它能够rate一些东西，就像在youtube.com上面看到的一样。

首先我们需要一些服务器端代码，这个例子中用到了一个PHP文件，读取rating参数然后返回rating总数和平均数。

虽然这些例子也可以不使用AJAX来实现，但显示我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating".

$(document).ready(function() {

        // generate markup

        var ratingMarkup = ["Please 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形式会从服务器端传回来，添加到容器中，替代这些链接。

更多的AJAX方法可以从这里找到，或者看看API文档下面的AJAX filed under 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”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将会谈到这些效果.