使用 jQuery 简化 Ajax 开发

文档选项 打印本页 将此页作为电子邮件发送 级别： 中级 Jesse Skinner, Web 开发人员, Freelance 2007 年 5 月 16 日 jQuery 是一个JavaS cript 库，它有助于简化 JavaS cript? 以及 Asynchronous JavaS cript + XML (Ajax) 编程。与类似的 JavaS cript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习 jQuery 基本原理，探索其特性和功能，执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。 jQuery 是什么？ 请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。 jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家，jQuery 都会是您的首选。 jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。 毫无疑问，jQuery 的原理是独一无二的：它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后，便可以开始学习本教程了，看看 jQuery 对我们的编程方式有多少改进吧。 回页首 一些简单的代码简化 下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。 清单 1. 没有使用 jQuery 的 DOM 脚本 var external_links = document.getElementByIdx('external_links'); var links = external_links.getElementsByTagName_r('a'); for (var i=0;i < links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit: ' + this.href); }; } 清单 2 显示了使用 jQuery 实现的相同的功能。 清单 2. 使用了 jQuery 的 DOM 脚本 $('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href); }); 是不是很神奇？ 使用 jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，de<click()de< 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。 理解这一代码的工作原理可能会有一点复杂。首先，我们使用了 de<$()de< 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。 如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在 清单 2 中，de<#external_linksde< 用于检索 de<idde< 为 de<external_linksde< 的元素。de<ade< 后的空格表示 jQuery 需要检索 de<external_linksde< 元素中的所有 de<<a>de< 元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了 de<$()de< 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊的 jQuery 函数。比方说，您可以通过调用 de<clickde< 函数把 click 处理函数指定给 jQuery 对象中的所有元素。 还可以向 de<$()de< 函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象，比方说 de<windowde< 对象。例如，我们通常会像下面这样把函数分配给加载事件： window.onload = function() { // do this stuff when the page is done loading }; 使用 jQuery 编写的功能相同的代码： $(window).load(function() { // run this when the whole page has been downloaded }); 您可能有所体会，等待窗口加载的过程是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（Hypertext Markup Language，HTML）就可以了。通过在文档中创建特殊的de<readyde< 事件，jQuery 解决了这个问题，方法如下： $(document).ready(function() { // do this stuff when the HTML is all ready }); 这个代码围绕 de<documentde< 元素创建了一个 jQuery 对象，然后建立一个函数，用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式，使用快捷方式调用这个函数。这很简单，只需向 de<$()de< 函数传递一个函数就可以了： $(function() { // run this when the HTML is done downloading }); 到目前以止，我已经向大家介绍了 de<$()de< 函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。 清单 3. 创建和附加一个简单的段落 $('<p></p>') .html('Hey World!') .css('background', 'yellow') .appendTo("body"); 在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的： $('#message').css('background', 'yellow').html('Hello!').show(); 回页首 使 Ajax 变得简单 使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。 Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 de<load()de< 函数即可。下面是一个用于更新统计信息的示例： $('#stats').load('stats.html'); 通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 de<$.post()de< 或者de<$.get()de<，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。 清单 4. 使用 Ajax 向页面发送数据 $.post('save.cgi', { text: 'my string', number: 23 }, function() { alert('Your data has been saved.'); }); 如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 de<$.ajax()de< 函数。您可以指定 de<xmlde<、de<scriptde<、de<htmlde< 或者 de<jsonde<，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 de<beforeSendde<、de<errorde<、de<successde< 或者 de<completede< 回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。 清单 5. $.ajax() 使 Ajax 由复杂变简单  $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ // do something with xml } }); 当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 de<successde< 函数的一个扩展，它为 XML 中的每个 de<<item>de< 元素都添加了一个列表项到 Web 页面中。 清单 6. 使用 jQuery 处理 XML 文档 success: function(xml){ $(xml).find('item').each(function(){ var item_text = $(this).text(); $('<li></li>') .html(item_text) .appendTo('ol'); }); } 回页首 为 HTML 添加动画 可以使用 jQuery 处理基本的动画和显示效果。de<animate()de< 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。 下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。 $('#grow').animate({ height: 500, width: 500 }, "slow", function(){ alert('The element is done growing!'); }); jQuery 的内置函数使更多常见的动画更容易完成。可以使用 de<show()de< 和 de<hide()de< 元素，立即显示或者以特定的速度显示。还可以通过使用 de<fadeIn()de< 和de<fadeOut()de<，或者 de<slideDown()de< 和 de<slideUp()de< 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。 $('#nav').slideDown('slow'); 回页首 DOM 脚本和事件处理 或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。 从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 de<append()de< 函数把它们与其它的一些元素链接到一起，使用de<clone()de< 复制元素，使用 de<html()de< 设置内容，使用 de<empty()de< 函数删除内容，使用 de<remove()de< 函数删除所有的元素，即便是使用 de<wrap()de< 函数，用其他元素将这些元素包装起来。 通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 de<siblings()de<、de<parents()de< 和 de<children()de<。还可以选择 de<next()de< 和de<prev()de< 兄弟元素。de<find()de< 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。 如果结合使用 de<end()de< 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 de<find()de< 或 de<parents()de< 函数（或者其它遍历函数）之前的 jQuery 对象。 如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。 清单 7. 轻松地遍历和处理 DOM $('form#login') // hide all the labels inside the form with the 'optional' class .find('label.optional').hide().end() // add a red border to any password fields in the form .find('input:password').css('border', '1px solid red').end() // add a submit handler to the form .submit(function(){ return confirm('Are you sure you want to submit?'); }); 不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用 de<end()de< 返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用 de<end()de< 返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。 处理常见事件就像调用函数（比方说 de<click()de<、de<submit()de< 或 de<mouseover()de<）和为其传递事件处理函数一样简单。此外，还可以使用 de<bind('eventname', function(){})de< 指定自定义的事件处理程序。可以使用 de<unbind('eventname')de< 删除某些事件或者使用 de<unbind()de< 删除所有的事件。有关这些函数的使用方法的完整列表，请参阅 参考资料 中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。 回页首 释放 jQuery 选择器的强大能量 我们经常会使用 ID 来选择元素，比如 de<#myidde<，或者通过类名，比如 de<div.myclassde< 来选择元素。然而，jQuery 提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。 jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath，请参阅 参考资料 中的链接。 CSS3 包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：de<:emptyde< 伪选择器（pseudo-selector）： $('td:empty').html('-'); 如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用 de<:notde< 伪选择器： 如下代码显示了如何隐藏所有不含 de<requiredde<类的输入内容： $('input:not(.required)').hide(); 与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：