[jQuery]Ajax的应用

1. load()方法

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中，它的结构为：

load(url[, data][, callback])

url参数表示请求HTML页面的URL地址，data参数表示发送至服务器的key/value数据，callback参数表示请求完成时的回调函数，例如：

$(function(){
  $("#send").click(function(){
    $("#resText").load("test.html");
  });
});

load()方法的URL参数的语法结构为"url selector"，比如只需加载test.html页面中class为"para"的内容，例如：

$("#resText").load("test.html .para");

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式，反之则自动转换为POST方式，例如：

$("#resText").load("test.php", {name:"rain", age:"22"}, function(){
});

load()方法的回调函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，例如：

$("#resText").load("test.html", function(
  responseText, textStatus, XMLHttpRequest)) {
}

2. $.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，如果需要传递一些参数给服务器上的页面，那么可以使用$.get()或$.post()方法。

$.get()方法使用GET方式来进行异步请求，它的结构为：

$.get(url[, data][, callback][, type])

url参数代表请求的HTML页的URL地址，data参数代表发送至服务器的key/value数据会作为QueryString附加到请求URL中，callback参数代表载入成功时回调函数，type参数代表服务器端返回内容的格式，包括xml、html、script、josn、text和_default，例如：

$("#send").click(function(){
  $.get("get1.php", {
        username: $("#username").val(),
        content: $("#content").val()
  }, callback);
});

$.get()方法的回调函数只有两个参数，例如：

function(data, textStatus) {
}

data参数代表请求返回的内容，textStatus参数代表请求状态，而且回调函数只有当数据成功返回后才被调用，这与load()方法不同。

$.post()方法与$.get()方法的结构和使用方法相同。

3. $.getScript()方法和$.getJson()方法

有时候在页面初次加载时获取所需的全部JavaScript文件是没有必要的，jQuery提供了$.getScript()方法来直接加载.js文件，与加载一个HTML片段一样简单方法，例如：

$(function(){
  $("#send").click(function(){
    $.getScript("test.js");
  });
});

与其他Ajax方法一样，$.getScript()方法也有回调函数，它会在JavaScript文件成功载入后运行。

$.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同，例如：

$(function(){
  $("#send").click(function(){
    $.getJSON("test.josn");
  });
});

4. $.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的结构为：

$.ajax(options)

该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的，常见的参数如下：

参数名称	类型	说明
url	String	发送请求的地址。
type	String	请求方式（GET或POST），默认为GET。
timeout	Number	设置请求超时时间（毫秒）。
data	Object或String	发送到服务器的数据。
dataType	String	预期服务器返回的数据类型。
beforeSend	Function	发送请求前可以修改XMLHttpRequest对象的函数。
complete	Function	请求完成后调用的回调函数。
success	Function	请求成功后调用的回调函数。
error	Function	请求失败时被调用的函数。
global	Boolean	默认为true，表示是否触发全局Ajax事件。

5. Ajax全局事件

通过jQuery提供的一些自定义全局函数，能够为各种 与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数，当Ajax请求结束时，会触发ajaxStop()方法的回调函数，这些方法都是全局方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们，例如：

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

jQuery的Ajax全局事件还有几个方法，也可以在使用Ajax方法的过程中为其带来方便，如下表：

方法名称	说明
ajaxComplete(callback)	Ajax请求完成时执行的函数。
ajaxError(callback)	Ajax请求发生错误时执行的函数。
ajaxSend(callback)	Ajax请求发送前执行的函数。
ajaxSuccess(callback)	Ajax请求成功时执行的函数。