WEB开发网
开发学院网页设计JavaScript 使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚... 阅读

使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚本编程究竟有多简单

 2010-03-09 00:00:00 来源:WEB开发网   
核心提示: 在前一个例子中您可能已经注意到,jQuery 中的另一个功能强大的特性就是方法链接(method chaining),使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚本编程究竟有多简单(4),每次对 jQuery 对象调用方法时,方法都会返回相同的 jQuery 对象,您

在前一个例子中您可能已经注意到,jQuery 中的另一个功能强大的特性就是方法链接(method chaining)。每次对 jQuery 对象调用方法时,方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法,那么您不必重新键入选择器就可以实现这一目的:

$('#message').css('background', 'yellow').html('Hello!').show(); 

使 Ajax 变得简单

使用 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 文档的示例。

上一页  1 2 3 4 5 6 7 8 9  下一页

Tags:使用 jQuery 简化

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接