用jQuery简化Ajax开发实现方法第1/2页
更新时间：2010年04月05日 23:39:03 作者：
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
一些简单的代码简化
下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。
清单 1 ：没有使用 jQuery 的 DOM 脚本
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('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，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在 清单 2 中，#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了
$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊的 jQuery 函数。比方说，您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。
还可以向 $() 函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象，比方说 window 对象。例如，我们通常会像下面这样把函数分配给加载事件：
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）就可以了。通过在文档中创建特殊的 ready 事件，jQuery 解决了这个问题，方法如下：
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
这个代码围绕 document 元素创建了一个 jQuery 对象，然后建立一个函数，用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式，使用快捷方式调用这个函数。这很简单，只需向 $() 函数传递一个函数就可以了：
$(function() {
// run this when the HTML is done downloading
});
到目前以止，我已经向大家介绍了 $() 函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。
清单 3. 创建和附加一个简单的段落
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：使 Ajax 变得简单
$('#message').css('background', 'yellow').html('Hello!').show();
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：
$('#stats').load('stats.html');
通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 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 显示了 success 函数的一个扩展，它为 XML 中的每个 <item> 元素都添加了一个列表项到 Web 页面中。
清单 6. 使用 jQuery 处理 XML 文档
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。
清单 1 ：没有使用 jQuery 的 DOM 脚本
复制代码 代码如下:
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('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，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在 清单 2 中，#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了
$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊的 jQuery 函数。比方说，您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。
还可以向 $() 函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象，比方说 window 对象。例如，我们通常会像下面这样把函数分配给加载事件：
复制代码 代码如下:
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）就可以了。通过在文档中创建特殊的 ready 事件，jQuery 解决了这个问题，方法如下：
复制代码 代码如下:
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
这个代码围绕 document 元素创建了一个 jQuery 对象，然后建立一个函数，用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式，使用快捷方式调用这个函数。这很简单，只需向 $() 函数传递一个函数就可以了：
复制代码 代码如下:
$(function() {
// run this when the HTML is done downloading
});
到目前以止，我已经向大家介绍了 $() 函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。
清单 3. 创建和附加一个简单的段落
复制代码 代码如下:
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：使 Ajax 变得简单
复制代码 代码如下:
$('#message').css('background', 'yellow').html('Hello!').show();
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：
复制代码 代码如下:
$('#stats').load('stats.html');
通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据
复制代码 代码如下:
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 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 显示了 success 函数的一个扩展，它为 XML 中的每个 <item> 元素都添加了一个列表项到 Web 页面中。
清单 6. 使用 jQuery 处理 XML 文档
复制代码 代码如下:
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
相关文章
这篇文章主要介绍了jQuery实现基本动画效果的方法,结合实例形式分析了jQuery animate()方法实现动画效果相关操作技巧,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了jquery中使用.each()遍历元素学习笔记,本文从实际项目经验总结而来,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下2015-06-06
从今天起正式学习Jquery（实际严格讲已经用了几个月的Jquery的一丁点东西），边学边做边记笔记；阅读书籍《锋利的Jquery》+Jquery API Doc。2009-10-10![[jQuery] 事件和动画详解](//img.jbzj.com/images/xgimg/bcimg4.png)
这篇文章主要介绍了JQ事件和动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了jquery实现鼠标滑过小图查看大图的方法,涉及jquery鼠标事件及图片样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了使用jquery清空、复位整个输入域，非常的简单实用，这里推荐给大家,需要的朋友可以参考下2015-04-04
本文详细讲解了JQuery中this的指向，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下2014-12-12
深入分析jQuery的ready函数是如何工作的(工作原理)
这篇文章主要介绍了jQuery的ready函数是如何工作的,深入分析了jQueryready函数的运作流程及相应的工作原理,需要的朋友可以参考下2015-12-12
![[jQuery] 事件和动画详解](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论