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: "];

  for(var i=1; i <= 5; i++) {http://www.hrbfkyy120.com

  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,你可以看看这个在线的例子.

  不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"

  更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.

  (译者注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)

  一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:

  $(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); } );http://www.mlybyby.com

  // if you need the context of the original handler, use apply:

  $(‘a‘).click( function(event) { handler.apply(this, [foobar]); } );

  用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

时间: 2024-12-27 18:04:01

jQuery起点教程之使用AJAX的相关文章

jQuery起点教程之插件制作

jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. 为你的插件取一个名字,在这个例子里面我们叫它"foobar". 创建一个像这样的文件:jquery.[yourpluginname].j

Ajax本地跨域问题 Cross origin requests are only supported for HTTP(针对jQuery基础教程第四版第六章)

出现的问题: 解决的步骤: 谷歌浏览器出现的效果: 针对jQuery基础教程(第四版),第六章  成功: 原文地址:https://www.cnblogs.com/qinghui258/p/8432569.html

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jQuery 入门教程(一): 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使 jQu

jQuery 入门教程(三): Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有<p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元素 $(document).ready(function()

《jQuery基础教程》读书笔记

最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与javascript原生的window.onload()区别: $(document).ready():通过该方法注册的事件处理程序,会在DOM完全就绪并使用时调用.虽然这意味着所有元素对脚本而言都是可访问的,但是,却不意味着所有关联的文件都下载完毕.当HTML下载 完成并解析成DOM树之后,代码就可以开始运行

jquery学习(三)-ajax

来自锋利的jquery第二版 1.Ajax的优势和不足 1.优势 A.不需要插件支持:不需要任何浏览器插件,且大多数主流浏览器支持: B.优秀的用户体验:实现局部刷新,使得web应用能够迅速的回应用户操作: C.提高web程序性能:在传统模式中数据交换时通过from表达实现,而数据获取靠的是全页面刷新来获取正页内容,效率非常低.而Ajax模式通过XMLHttpRequest对象向服务器提交希望提交的数据,实现按需发送和加载. D.减轻服务器和带宽负担:Ajax工作原理相当与早用户和服务器之间加了

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc