jQuery学习（四）

精选转载

th116594960 2014-01-09 16:12:20

Ajax无疑是当今WEB开发的重要技术，也是目前RIA（富互联网应用）的主要实现方式之一。本文将在前几篇的基础上，介绍如何利用jQuery使得操作Ajax变得更方便，实现更强大的功能。
就算到目前为止，Ajax的技术标准还是没有统一起来，主要体现在微软与非微软浏览器上面。虽然IE7之后提供了标准版本XHR（XMLHttpRequest）对象，但早期的IE6及以前版本则是另一种实现方式（XMLHTTP）。所以在使用Ajax之前都得先检测当前浏览器提供哪种对象，然后再进行后续的操作，相信有过这种经历的朋友都应该印象深刻。总之一句话，非常不爽！
如今有了jQuery，使得操作Ajax变得极其简单！你不必再去关心当前是哪种浏览器，你只需要关注你的程序想实现什么功能。jQuery已经为我们处理好了浏览器（应该是当前大多数）的兼容问题，而且提供了很多很好用的方法来实现Ajax功能。
jQuery提供了六种请求方式实现Ajax。load、getScript、getJSON、get、post、ajax。这里面getScript和getJSON是最上层的方法调用，get和post是倒数第二层调用，而ajax则是最底层的调用函数，所有的调用最终都会转换为调用ajax函数。如果对这段话存有疑惑的朋友请看下源码，不用完全看懂，只需要了解他们之间的调用顺序即可。另外load方法一般是用来加载页面内容到匹配的元素上。如果省略load方法的parametera参数，发送GET请求；如果有parametera参数，则是POST请求。如果想带参数又想发送GET请求怎么办呢？可以把参数写到url中。
大象在这里建议并推荐大家采用$.ajax()方式来实现Ajax调用。一是这种方式最直接，效率最高；二是这种方式功能最强大；三是从写法来看，key:value（键值对）可以减少出错。当然了，我并不是强制不能使用其它方式，我只是善意的建议，根据具体的情况作出最适当的选择。
记得在jQuery学习总结（二）最后第四部分，我用一个项目实例来说明如何利用$.ajax实现Ajax，下面进行详细讲解。
先来看看$.ajax()函数常用参数说明，有个总体印象。
jQuery学习（四）_学习总结

在实际开发中，我们大多数情况下，只会使用这样几个参数:url、type、data、dataType、success。它们的使用频率是非常高的，基本上实现Ajax的调用，这样几个参数够用了。当然，jQuery还提供其它更丰富的参数，来满足你不同的需求。帮助文档中有完整的说明。
在实际应用中，我们很多时候都会用到相同的参数，这时可以利用jQuery提供的属性工具，设置一组默认的Ajax属性简化开发。

$.ajaxSetup({
type: 'POST',
dataType: 'text',
error: function(xhr){
$("#errorDiv").html("Ajax错误信息："+xhr.status+' '+xhr.statusText);
}
});

这样设置后，将确保后面的每个Ajax调用（不包括load）使用这些默认值。
接下来看看全局Ajax事件。注意global参数，它的默认值为true，所以会自动触发全局Ajax函数。如果显示的设为false，则不会触发。ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop等等。这些全局函数将在Ajax请求处理的不同阶段被触发。看个示例：

$(function(){
$("#success_msg").html("成功加载完成！").hide();
$("#tip").html("图形正在加载...").hide();
$("#btn_show ").click(
function(){
$("#div_info").empty(); //清空它里面的内容
$("#tip").ajaxStart(function(info){
$(info.target).show(300);
}).ajaxStop(function(info){
$(info.target).hide(300);
});
$("#success_msg").ajaxSuccess(function(info){
$(info.target).show().hide(1000);
});
$.ajax({
type:"GET",
url:"b.html",
success:function(info){
$("#div_info").append(info);
}
});
}
);
});

b.html很简单，就是在body之间插入这一段代码。

现在对这个例子做下说明。
首先初始化时，对ID为success_msg和tip的两个DIV设置页面内容，并将其隐藏。再对显示按钮绑定事件，同时定义全局Ajax函数的回调函数，在不同的执行阶段，进行不同的结果处理。当触发时，会执行ajax调用，ajax方法执行后，会在div_info中显示出b.html中的内容，我这里是为了演示，所以将样式写到style属性中，大家不要这样写，应该采取我前面讲过的规范方法做。
ajaxStart 是在发起Ajax请求时，并在XHR实例被创建之前执行。回调函数也在这个时候被触发，这里我让初始化时设置的tip信息在300毫秒内显示出来。
ajaxStop 是在Ajax请求结束后，没有进行中的Ajax，任何回调函数执行完成之后调用。这里当请求结束后，让tip在300毫秒内隐藏起来。
最后是请求成功的ajaxSuccess函数，先让它显示出来，再让它在1秒内逐渐隐藏。
全局事件的回调函数都有一个对象参数，它有两个属性。
type：全局函数类型字符串，就是全局事件的名称。比如：ajaxStart、ajaxStop等。
target：被引用的DOM元素。比如：tip、success_msg等。
除此之外还有一个XHR对象参数，这个参数只有ajaxStart和ajaxStop没有，其它的函数都有。

到这里Ajax的内容基本上都说完了，剩下的就是实际运用。如果大家有什么好的想法和意见还请提出来，大象喜欢和各位交流经验，共同提高。以上代码是在jquery-1.2.6版本下测试通过。