jQuery学习笔记8 - Ajax(2)

jQuery的AJAX方法

工具方法——用于协助发送或处理AJAX请求，简化AJAX操作.

jQuery.ajaxPrefilter()函数

jQuery.ajaxPrefilter()函数用于指定预先处理Ajax参数选项的回调函数。
在所有参数选项被jQuery.ajax()函数处理之前，你可以使用该函数设置的回调函数来预先更改任何参数选项。

你还可以指定数据类型(dataType)，从而只预先处理指定数据类型的参数选项。
该函数可以调用多次，以便于为不同数据类型的AJAX请求指定不同的回调函数。

语法
jQuery.ajaxPrefilter( [ dataType ,] handler )

• dataType： 可选/String类型
  一个或多个用空格隔开的数据类型所组成的字符串。如果未指定该参数，则表示所有数据类型。可用的数据类型为”xml”、 “html”、 “text”、 “json”、 “jsonp”、 “script”。该字符串为它们之间的任意组合(多种类型用空格隔开)，例如：”xml”、 “text html”、 “script json jsonp”。
• handler：Function类型
  用于预处理参数选项的回调函数。它有以下3个参数：
  – options：(Object对象)当前AJAX请求的所有参数选项。
  – originalOptions：(Object对象)传递给$.ajax()方法的未经修改的参数选项。
  – jqXHR：当前请求的jqXHR对象(经过jQuery封装的XMLHttpRequest对象)。
• jQuery.ajaxPrefilter()函数没有返回值，或者说其返回值为undefined。

示例：

//设置AJAX的全局默认选项
$.ajaxSetup( {
    url: "/index.html" , // 默认URL
    aysnc: false , // 默认同步加载
    type: "POST" , // 默认使用POST方式
    headers: { // 默认添加请求头
        "Author": "CodePlayer" ,
        "Powered-By": "CodePlayer"
    } ,
    error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数
        // 提示形如：发送AJAX请求到"/index.html"时出错[404]：Not Found
        alert( '发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg );        
    }
} );

// 指定预处理参数选项的函数
$.ajaxPrefilter( function(options, originalOptions, jqXHR){
    // options对象 包括accepts、crossDomain、contentType、url、async、type、headers、error、dataType等许多参数选项
    // originalOptions对象 就是你为$.ajax()方法传递的参数对象，也就是 { url: "/index.php" }
    // jqXHR对象 就是经过jQuery封装的XMLHttpRequest对象(保留了其本身的属性和方法)
    options.type = "GET"; // 将请求方式改为GET
    options.headers = { }; // 清空自定义的请求头
});

// 执行AJAX请求
$.ajax( {
    url: "/index.php"
} );

jQuery.ajaxSetup() 函数

jQuery.ajaxSetup()函数用于设置AJAX的全局默认设置。

该函数用于更改jQuery中AJAX请求的默认设置选项。之后执行的所有AJAX请求，如果对应的选项参数没有设置，将使用更改后的默认设置。

语法
jQuery.ajaxSetup( settings )

• settings: Object类型 一个对象，其中的每个属性表示需要更改默认设置的选项，属性值表示更改后的默认值。

示例：

//设置AJAX的全局默认选项
$.ajaxSetup( {
    url: "/index.html" , // 默认URL
    aysnc: false , // 默认同步加载
    type: "POST" , // 默认使用POST方式
    headers: { // 默认添加请求头
        "Author": "CodePlayer" ,
        "Powered-By": "CodePlayer"
    } ,
    error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等

        // 提示形如：发送AJAX请求到"/index.html"时出错[404]：Not Found
        alert( '发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']：' + errorMsg );        
    }
} );

// 未设置任何参数，但url、async、type、headers、error等参数的默认值均已被$.ajaxSetup()更改(如上)
$.ajax( );

jQuery.param() 函数

jQuery.param()函数用于将一个JS数组或纯粹的对象序列化为字符串值，以便用于URL查询字符串或AJAX请求。

如果传入的不是数组或”纯粹的对象”，则返回空字符串(“”)；如果传入的是null、undefined等无法访问属性的值，则直接报错。

所谓”纯粹的对象”，就是通过{}或new Object()自行创建的对象。JS内置的Boolean、Number、String、Date、RegExp、Function、Window等类型的对象都不算是”纯粹的对象”。

返回的字符串已经过URL编码处理(采用的字符集为UTF-8)。

语法
jQuery.param( obj [, traditional ] )

• obj: String类型 需要被序列化的JS对象。
• traditional: Boolean类型 指示是否执行一个传统的”浅层”序列化。如果为false，它将递归处理包含嵌套内容的深层对象；如果为true，则对属性值或元素直接浅层处理，不进行递归处理。
• jQuery.param()函数的返回值为String类型，返回解析指定的数组或对象的编码字符串。

示例：

var v1 = $.param( true ); // ""
var v2 = $.param( 100 ); // ""
var v3 = $.param( 12.34 ); // ""
var v4 = $.param( "" ); // ""
var v5 = $.param( function(){ return 18; } ); // ""
var v6 = $.param( /\d+/ ); // ""
var v7 = $.param( new Date() ); // ""
var v8 = $.param( null ); // 报错
var v9 = $.param( undefined ); // 报错

// 字符串将被看作一个字符数组
var v10 = $.param( "name" ); // "0=n&1=a&2=m&3=e"

var v11 = $.param( { name:"CodePlayer", age:18 } ); // "name=CodePlayer&age=18"

var array = [
    { name: "name", value: "张三" },
    { name: "age", value: 18, extra: "忽略该属性" },
    { name: "grade" }, // 没有value属性，则value值为undefined，将被转为空字符串""
    { name: "orderId", value: 2 },
    { name: "orderId", value: 3 },
];
var v12 = $.param( array ); // "name=%E5%BC%A0%E4%B8%89&age=18&grade=&orderId=2&orderId=3"

// jQuery将数组的每个元素视作对象，并调用其name和value属性
// 由于这些元素没有name属性，所以为undefined，并被转为字符串"undefined"
// 由于这些元素没有value属性，所以为undefined，并被转为空字符串""
var v13 = $.param( [ "name", 2, 3 ] ); // "undefined=&undefined=&undefined="

var v14 = $.param( { 
    name:"Jim",
    age: function(){ return 18; }
} );
// 1.3之前返回："name=Jim&age=function+()%7B+return+18%3B+%7D"
// 1.3+返回："name=Jim&age=18"

// 返回的字符串已经过URL编码，原始字符串为："name=CodePlayer&age=18&uid[]=2&uid[]=3&uid[]=5"
var complexV = $.param( obj, false ); // "name=CodePlayer&age=18&uid%5B%5D=2&uid%5B%5D=3&uid%5B%5D=5"

// 传统的浅层序列化
var simpleV = $.param( obj, true ); // "name=CodePlayer&age=18&uid=2&uid=3&uid=5"

jQuery.serialize() 函数

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化，以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在

标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

语法
jQueryObject.serialize( )

示例：

//html
<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

//javascript
// 序列化<form>内的所有表单元素,序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

// 序列化所有的text、select、checkbox表单元素,序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

//serialize()函数通常用于将表单内容序列化，以便通过AJAX方式提交。
$("#btn").click( function(){
    // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );       
    } );        
} );

jQuery.serializeArray() 函数

serializeArray()函数用于序列化一组表单元素，将表单内容编码为一个JavaScript数组。

serializeArray()函数常用于将表单内容序列化为JSON对象，以便于被编码为JSON格式的字符串。

该函数会将可用于提交的每个表单控件封装成一个Object对象，该对象有name和value属性，对应该表单控件的name和value属性。然后将这些Object对象封装为一个数组并返回。

该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。

语法
jQueryObject.serializeArray( )

示例：

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

//javascript
//对<form>元素进行序列化可以直接序列化其内部的所有表单元素。
var formArray = $("form").serializeArray();
/* 以下是序列化后的结果数组formArray的内容：
[
    { name: "uid", value: "1" },
    { name: "username", value: "张三" },
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "sex", value: "1" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

//我们也可以直接对部分表单元素进行序列化。
var result = $(":text, select, :checkbox").serializeArray();
/* 以下是序列化后的结果数组result的内容：
[ 
    { name: "username", value: "张三" }, 
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

事件方法——用于为AJAX事件绑定处理一个或多个函数

jQuery.ajaxComplete()事件

ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。
这是一个全局AJAX事件函数，用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数。当AJAX请求完成(无论成功或失败)时，将触发ajaxComplete事件，并执行绑定的事件处理函数。

该函数必须在jQuery对象实例上调用，ajaxComplete()将为每个匹配元素的ajaxComplete事件绑定处理函数。当AJAX请求完成后，所有匹配元素上的处理函数都将被触发执行。事件处理函数内的this将指向当前DOM元素。

你可以在同一元素多次调用该函数，从而绑定多个事件处理函数。触发ajaxComplete事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象的ajaxComplete事件绑定处理函数，为其他元素绑定的事件处理函数不会起作用。

如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

语法
jQueryObject.ajaxComplete( handler )
回调函数handler有3个参数：

• 其一是表示当前事件的Event对象，
• 其二是发送当前AJAX请求的jqXHR对象，jqXHR对象是经过jQuery封装的类似XMLHttpRequest的对象。
• 其三是包含为本次AJAX请求设置的所有参数选项(包括无需指定的默认参数选项)的Object对象。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

//javascript
$(document).ajaxComplete( function(event, jqXHR, options){
    alert("处理函数1：请求的url为" + options.url);
} );
$(document).ajaxComplete( function(event, jqXHR, options){
    alert("处理函数2：请求方式为" + options.type);
} );

// 执行该AJAX请求，会弹出2次对话框,因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
//  , global: false // 可以禁止触发全局的Ajax事件
} );

// 执行该AJAX请求，会弹出3次对话框,因为$.ajax()自己通过complete选项绑定了一个局部的ajaxComplete事件处理函数，它也在document对象上，会执行一次
// 我们还通过ajaxComplete()额外绑定了两个事件处理函数，会再弹出2次
$.ajax( {
    url: "myurl" ,
    complete: function(jqXHR, textStatus){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为：null、'success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror'等
       alert( "ajax()" );
    }
//  , global: false // 可以禁止触发全局的Ajax事件
} );

jQuery.ajaxSuccess() 函数

ajaxSuccess()函数用于设置当AJAX请求成功完成时执行的回调函数。

这是一个全局AJAX事件函数，用于为任何AJAX请求的ajaxSuccess事件绑定事件处理函数。当AJAX请求成功完成时(不包括失败的情况，例如：找不到页面、服务器内部错误等)，将触发ajaxSuccess事件，并执行绑定的事件处理函数。
如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

该函数必须在jQuery对象实例上调用，ajaxSuccess()将为每个匹配元素的ajaxSuccess事件绑定处理函数。当AJAX请求成功完成后，所有匹配元素上的处理函数都将被触发执行。事件处理函数内的this将指向当前DOM元素。

你可以在同一元素多次调用该函数，从而绑定多个事件处理函数。触发ajaxSuccess事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象的ajaxSuccess事件绑定处理函数，为其他元素绑定的事件处理函数不会起作用。

语法
jQueryObject.ajaxSuccess( handler )
回调函数handler有4个参数：

• 其一是表示当前事件的Event对象，
• 其二是发送当前AJAX请求的jqXHR对象，
• 其三是包含为本次AJAX请求设置的所有参数选项(包括无需指定的默认参数选项)的Object对象，
• 其四是当前AJAX请求返回的数据。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

//javascript,不论当前jQuery为何版本，如果不是特殊需求，我们都应该将ajaxSuccess事件的处理函数绑定到document对象上。
$(document).ajaxSuccess( function(event, jqXHR, options, data){
    alert("处理函数1：请求的url为" + options.url);
} );
$(document).ajaxSuccess( function(event, jqXHR, options, data){
    alert("处理函数2：请求方式为" + options.type);
} );

// 执行该AJAX请求，会弹出2次对话框,因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
//  , global: false // 可以禁止触发全局的Ajax事件
} );

// 执行该AJAX请求，会弹出3次对话框,因为$.ajax()自己通过success选项绑定了一个局部的ajaxSuccess事件处理函数，它会执行一次,我们还通过ajaxSuccess()额外绑定了两个事件处理函数，会再弹出2次
$.ajax( {
    url: "myurl" ,
    success: function(data, jqXHR, textStatus){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert( "success" );
    }
    //, global: false // 可以禁止触发全局的Ajax事件
} );

jQuery.ajaxError() 函数

ajaxError()函数用于设置当AJAX请求失败时执行的回调函数。
这是一个全局AJAX事件函数，用于为任何AJAX请求的ajaxError事件绑定事件处理函数。当AJAX请求失败时(例如：找不到页面、服务器内部错误、数据解析失败等)，将触发ajaxError事件，并执行绑定的事件处理函数。
如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

该函数必须在jQuery对象实例上调用，ajaxError()将为每个匹配元素的ajaxError事件绑定处理函数。当AJAX请求失败后，所有匹配元素上的处理函数都将被触发执行。事件处理函数内的this将指向当前DOM元素。

你可以在同一元素多次调用该函数，从而绑定多个事件处理函数。触发ajaxError事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

请注意，跨域”script”和跨域”JSONP”请求不会调用ajaxError事件的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象的ajaxError事件绑定处理函数，为其他元素绑定的事件处理函数不会起作用。

语法
jQueryObject.ajaxError( handler )
回调函数handler有4个参数：

• 其一是表示当前事件的Event对象；
• 其二是发送当前AJAX请求的jqXHR对象；
• 其三是表示本次AJAX请求的所有参数设置(包括无需指定的默认参数选项)的Object对象；
• 其四是错误信息字符串(响应状态的文本描述部分，例如’Not Found’或’Internal Server Error’)。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

//javascript
$(document).ajaxError( function(event, jqXHR, options, errorMsg){
    alert("处理函数1：请求的url为" + options.url);
} );
$(document).ajaxError( function(event, jqXHR, options, data){
    alert("处理函数2：请求方式为" + options.type + "，错误描述为" + errorMsg);
} );

// 执行该AJAX请求，会弹出2次对话框,因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
//  , global: false // 可以禁止触发全局的Ajax事件
} );

// 执行该AJAX请求，会弹出3次对话框,因为$.ajax()自己通过error选项绑定了一个局部的ajaxError事件处理函数，它会执行一次,我们还通过ajaxError()额外绑定了两个事件处理函数，会再弹出2次
$.ajax( {
    url: "myurl" ,
    error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为null、 'timeout'、 'error'、 'abort'和'parsererror'等
        // errorMsg 是错误信息字符串(响应状态的文本描述部分，例如'Not Found'或'Internal Server Error')

        alert( "error:" + errorMsg );
    }
    //, global: false // 可以禁止触发全局的Ajax事件
} );

jQuery.ajaxStart() 函数

ajaxStart()函数用于为AJAX请求的ajaxStart事件绑定处理函数。
这是一个全局AJAX事件函数，用于在ajaxStart事件被触发时执行绑定的事件处理函数。
当开始一个AJAX请求的时候，此时没有其他活跃的AJAX请求，该请求就会触发ajaxStart事件。

一般而言，连续执行多个AJAX请求，只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后，再次连续执行多个AJAX请求，还是只有其中的第一个AJAX请求会触发ajaxStart事件。

如果某个AJAX请求被禁止触发全局AJAX事件，则它不会被视为活跃的AJAX请求。

该函数必须在jQuery对象实例上调用，ajaxStart()将为每个匹配元素绑定事件处理函数。当ajaxStart事件被触发时，所有匹配元素上绑定的处理函数都将被调用。事件处理函数内的this将指向当前DOM元素。

你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象绑定事件处理函数，为其他元素绑定的事件处理函数不会起作用。
如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

语法
jQueryObject.ajaxStart( handler )
handler: Function类型触发该事件时，需要执行的事件处理函数。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

//javascript
var $doc = $( document );

$doc.ajaxStart( function(){
    alert("处理函数1" );
} );
$doc.ajaxStart( function(){
    alert("处理函数2" );
} );

// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求开始时，此时没有其他活跃的AJAX请求，因此会触发ajaxStart事件
    // 它会弹出2次对话框 ，因为我们为document绑定了2个事件处理函数
    $.ajax( { url: "index.html" } );
    
    // 该AJAX请求开始时，上一个AJAX请求尚未执行完毕，因此不会触发ajaxStart事件，也不会弹出对话框
    $.ajax( { url: "myurl.php" } );
    
    /*
    延迟3秒执行第二个AJAX请求
    setTimeout( function(){
        
        // 该AJAX请求开始时，此时没有其他活跃的AJAX请求(上一个请求已经执行完毕)
        // 因此会触发ajaxStart事件，会弹出2次对话框
        $.ajax( { url: "myurl.php" } );
        
    }, 3000);       
    */
} );

jQuery.ajaxStop() 函数

ajaxStop()函数用于为AJAX请求的ajaxStop事件绑定处理函数。这是一个全局AJAX事件函数，用于在ajaxStop事件被触发时执行绑定的事件处理函数。
当一个AJAX请求结束的时候，此时没有其他活跃的AJAX请求，该请求就会触发ajaxStop事件。

一般而言，连续执行多个AJAX请求，只有其中最后一个结束的AJAX请求会触发ajaxStop事件。等到所有AJAX请求执行完毕后，再次连续执行多个AJAX请求，还是只有其中最后一个结束的AJAX请求会触发ajaxStop事件。

如果某个AJAX请求被禁止触发全局AJAX事件，则它不会被视为活跃的AJAX请求。

该函数必须在jQuery对象实例上调用，ajaxStop()将为每个匹配元素绑定事件处理函数。当ajaxStop事件被触发时，所有匹配元素上绑定的处理函数都将被调用。事件处理函数内的this将指向当前DOM元素。

你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象绑定事件处理函数，为其他元素绑定的事件处理函数不会起作用。
如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

语法
jQueryObject.ajaxStop( handler )
handler: Function类型 触发该事件时，需要执行的事件处理函数。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

//javascript
var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1");
} );
$divs.ajaxStop( function(){
    alert("处理函数2");
} );

// 点击执行AJAX请求1:
$("#btn").click( function(){
    // 该AJAX请求结束时，下一个AJAX请求正在执行，因此不会触发ajaxStop事件，也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时，上一个AJAX请求已经执行完毕，因此会触发ajaxStop事件
    // 它会弹出2次对话框 ，因为我们为document绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
} );

// 点击执行AJAX请求2:
$("#btn").click( function(){
    // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(下一个请求尚未执行)，因此会触发ajaxStop事件
    // 它会弹出2次对话框
    $.ajax( { url: "index.html" } );

    // 延迟3秒执行第二个AJAX请求
    setTimeout( function(){
        // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(上一个请求早已经执行完毕)
        // 因此会触发ajaxStop事件，会弹出2次对话框
        $.ajax( { url: "myurl.php" } );
    }, 3000);   
    
} );

// 点击执行AJAX请求3:
$("#btn").click( function(){
    // 该AJAX请求开始时，此时没有其他活跃的AJAX请求(下一个请求虽然尚未执行完成，但它被禁止触发全局AJAX事件，jQuery在检查活跃请求时会忽略掉它)
    // 因此会触发ajaxStop事件，会弹出2次对话框
    $.ajax( { url: "index.html" } );
    
    // 该AJAX请求开始时，此时没有其他活跃的AJAX请求，但它不会触发ajaxStop事件
    // 因为它的global选项为false，被禁止触发任何AJAX事件，所以它不会弹出对话框
    $.ajax( { 
        url: "myurl.php" ,
        global: false // 禁止触发全局AJAX事件
    } );
    
} );

请注意：并不是先执行的AJAX请求就一定先结束，这与整个AJAX请求过程中的网络、数据量、相关代码执行时间等方面密切相关。

jQuery.ajaxSend() 函数

ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数。

这是一个全局AJAX事件函数，用于为任何AJAX请求的ajaxSend事件绑定事件处理函数。当AJAX请求即将被发送时，将触发ajaxSend事件，并执行绑定的事件处理函数。
如果在jQuery.ajax()或jQuery.ajaxSetup()中将选项参数global设为false，可以禁止该AJAX请求触发全局的AJAX事件。

该函数必须在jQuery对象实例上调用，ajaxSend()将为每个匹配元素的ajaxSend事件绑定处理函数。当AJAX请求即将被发送完成后，所有匹配元素上的处理函数都将被触发执行。事件处理函数内的this将指向当前DOM元素。

你可以在同一元素多次调用该函数，从而绑定多个事件处理函数。触发ajaxSend事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.8开始，该函数只能为document对象的ajaxSend事件绑定处理函数，为其他元素绑定的事件处理函数不会起作用。

语法
jQueryObject.ajaxSend( handler )
回调函数handler有3个参数：

• 其一是表示当前事件的Event对象，
• 其二是发送当前AJAX请求的jqXHR对象，jqXHR对象就是经过jQuery封装的XMLHttpRequest对象(保留了其大多数属性和方法)。
• 其三是包含为本次AJAX请求设置的所有参数选项(包括无需指定的默认参数选项)的Object对象。

示例：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

//javascript
$(document).ajaxSend( function(event, jqXHR, options){
    alert("处理函数1： 当前元素的id为" + this.id + "，请求的url为" + options.url);
} );
$(document).ajaxSend( function(event, jqXHR, options){
    alert("处理函数2：请求方式为" + options.type);
} );

// 执行该AJAX请求，会弹出2次对话框,因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
} );

// 执行该AJAX请求，会弹出3次对话框,因为$.ajax()自己通过beforeSend选项绑定了一个局部的ajaxSend事件处理函数，它会执行一次
// 我们还通过ajaxSend()额外绑定了两个事件处理函数，会再弹出2次
$.ajax( {
    url: "myurl" ,
    // global: false , // 可以禁止触发全局的Ajax事件
    beforeSend: function(jqXHR, options){
        alert( "即将开始发送!" );
        // return false; // 如果返回false，可以取消本次请求
    }
} );