jQuery类库新手使用指南之AJAX方法 - 第三部分

日期：2012/03/09  来源：GBin1.com

继续昨天的介绍，我们将介绍最后一个AJAX调用方法及其相关的其它辅助方法帮助你使用jQuery构建AJAX应用。

使用$.ajax()来创建一个一般性的AJAX请求

前 俩篇文章我们介绍了一些上层的ajax方法例 如，$.get()，$.post()，$.load()，$.getJSON()，$.getScript()，今天我们将介绍一个底层的ajax方法 - $.ajax()。前面的方法你可以看做是$.ajax()方法的便捷使用。大多数的情况下都可以很好的满足你对http请求的处理，但是可能有些时候你 需要更底层的去自己处理相关的请求，这个时候你需要自己来调用$.ajax()，而不是使用上层的便捷方法例如，$.get()等。如下：

$.ajax(url, [setting]);

对于以上代码非常好理解，url代表了你请求的服务器地址，setting则用来配置你的选项，这些参数并不是必须的，你可以自己选择使用。通过这些参数你可以很方便的控制ajax的请求。下面是你可以设定的一些选项：

如果大家想了解其它参数的话，请大家访问api.jquery.com，这里就不全部介绍。

这里我们重写前面使用的showSiteInfo.html例子，代码如下：

<script>
$( function() {
$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.ajax( "siteinfo.txt" , {
cache:false,
data:data,
dataType:"json",
success: success,
error: error
});
} );

function success( siteData ) {
var result = "<li>Site Name:" + siteData.site + "</li>";
result += "<li>Creation Date:" + siteData.date + "</li>";
result += "<li>Site tag: " + siteData.tag + "</li>";
result += "<li>Site pages: " + siteData.pages + "</li>";
$("#result").html(result);
}

function error() {
$("#result").html("sorry, failed to get the information for gbin1.com");
}
} );
</script>

在线演示

如果你想看到出错信息，请修改 $.ajax( "siteinfo.txt" 为 $.ajax( "x.txt" 

以上代码中，我们看到其实和$.get()方法大同小异，只不过你可以方便的设定需要的请求参数。

并且你可以方便的控制错误信息，这样你可以完整的控制整个请求的过程。

使用$.ajaxSetup()方法来指定缺省的参数设定

以上我们将介绍了$.ajax的相关参数，如果你使用$.ajax方法来处理所以的请求，而一个一个定义设定的话，将非常的低效，这里我们使 用$.ajaxSetup来全局性的定义参数。当然，你自己在具体某一个$.ajax方法中覆盖初始的参数设定，通过这个方法，我们可以更加非常的为所以 ajax方法定义设定。如下：

$.ajaxSetup({         
cache:true,
   dataType:"jsonp"
}）
其它的全局性事件句柄

和$.ajaxSetup()方法类似，jQuery还拥有其它的全局性的方法，例如， $.ajaxSend，$.ajaxStart()，$.ajaxStop()，$.ajaxSuccess，$.ajaxError()，你可以在这些方法中统一的处理特定的操作，这个操作缺省需要你在$.ajaxSetup()中设定global参数，当然，缺省是true。

使用$.ajaxStart()和$.ajaxStop()方法你可以为你同一页面中所有的ajax请求添加”加载中..."效果。

使用$.ajaxSend()， $.ajaxSuccess，$.ajaxError()等为所有的请求发送，请求成功或者失败添加回调处理函数

可能我们看到以前的所有在线演示中，都有一个问题，如果处理时间比较长，那么用户在很长时间内，都看不到任何页面变化，这对于用户体验是非常糟糕的，所以，这里我们提供一个加强版本，提示后台请求在运行中，如下：

$("#loading").ajaxStart(function(){
$(this).show();
});

$("#loading").ajaxStop(function(){
$(this).hide();
})

在线演示

注意，在JSONP的调用中，以上全局性事件处理将失效。 如果你不清楚什么是JSONP，请参考这篇文章。

来源：jQuery类库新手使用指南之AJAX方法 - 第三部分