RATE ME: USING AJAX
在这个部分,我们将要编写一个小Ajax程序,它可以帮助用户来引用一些东西,就像youtube.com做的那样。
我们需要一些服务器端的代码。这个例子需要一个php文件,它的作用的读取'rating"参数,返回ratings的数量以及平局闹的rating。闲看一下rate.php这个文件。
虽然没有Ajax这个例子也能工作,但是我们并不希望那样做,因此我们需要用jQuery生成必要的标记,为div增加一个ID"rating"。
$(document).ready(function() { // generate markup $("#rating").append("Please rate: "); for ( var i = 1; i <= 5; i++ ) $("#rating").append("<a href='#'>" + i + "</a> "); // add markup to container and apply click handlers to anchors $("#rating a").click(function(e){ // stop normal link click e.preventDefault(); // send request $.post("rate.php", {rating: $(this).html()}, function(xml) { // format and output result $("#rating").html( "Thanks for rating, current average: " + $("average", xml).text() + ", number of votes: " + $("count", xml).text() ); }); }); });
这个代码片段生成了5个anchor元素,并把它们添加到"rating"的容器内。然后,为容器中的每一个anchor添加一个点击的处理器。当点击事件被触发的时候,一个post请求会被发送到rate.php,其中把anchor的内容作为参数。这个请求返回了一个xml,并且它会替代容器内的anchor。
如果你没有可供PHP运行的web服务器的话,那么你可以看一下在线的例子online example。这里还提供了一个没有使用JavaScript的例子,访问softonic.de,然后点击"Kurz bewerten!"。
关于jQuery更多关于Ajax的文档,你可以在Ajax Documentation或者Visual jQuery的Ajax下面找到。
使用Ajax一个常见的问题是:当你增加处理器的时候同时也要考虑被装载的文档,你需要在文档的内容装载完成后再应用这些处理器。为了防止书写重复的代码,你可以通过代理来完成:
function addClickHandlers() { $("a.remote", this).click(function() { $("#target").load(this.href, addClickHandlers); }); } $(document).ready(addClickHandlers);
现在当DOM准备好的时候addClickHandlers只被调用一次,然后每次用户通过class remote点击链接,内容就会被加载。
请注意$("a.remote", this),这个作为上下文。对于文档中的ready事件,this指的是整个文档,因此它会搜索整个文档来查找带class的名字为remote的ahchor。当通过load()对
addClickHandlers进行回调的时候,this又指向一个不同的元素:在这个例子中,指的是带id的元素。
这就有效的组织了点击事件会不断的应用到同一链接上,最后造成崩溃。
另外一个关于回调的问题就是参数。你可能已经指定了一个回调,但是需要传递额外的参数。最简单的方式就是把回调包装在另外一个function里面:
// get some data var foobar = ...; // specify handler, it needs data as a paramter function handler(data) { //... } // add click handler and pass foobar! $('a').click(function(){ handler(foobar); }); // if you need the context of the original handler, use apply: $('a').click(function(){ handler.apply(this, [foobar]); });
通过Ajax,这个例子就包含了很多web2.0的信息。现在我们看到了一些基础的Ajax,现在让我增加了更加新鲜的玩意。
可能感兴趣的链接:
- jQuery Ajax Documentation
- 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
ANIMATE ME: USING EFFECTS
通过show()和
hide()可以添加动态的图片:
$(document).ready(function(){ $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ $(".stuff").show('fast'); }); });
你可以通过animate()
来增加任何的动态效果,例如利用滑块增加渐变的效果:
$(document).ready(function(){ $("a").toggle(function(){ $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); },function(){ $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); }); });
要想看到更多炫的效果,你可以访问interface plugin collection。这个网站提供例子和文档。Interface是jQuery插件排在最靠前的位置,当然还有许多其他的东西。下一部分将会展示如何是用tablesorter插件。
可能感兴趣的链接: