jQuery学习笔记7 - Ajax(1)

发表于   |   分类于   |     |   阅读次数

jQuery核心：Ajax

jQuery还对Ajax进行了封装了，我们可以非常方便地发送一个Ajax请求，并对响应进行处理。
例如：

  • 在发送AJAX请求之前，序列化JS内容或表单内容，以便用作AJAX请求发送的数据。
  • 快速发送AJAX请求，并处理响应数据(支持html、xml、text、json、jsonp、script等多种数据类型)。
  • 监听AJAX事件，绑定事件触发时执行的处理函数。

    jQuery的AJAX方法

方法 版本 描述
核心方法——发送并处理AJAX请求的方法
jQuery.ajax() 1.0 全局方法发送并处理AJAX请求。这是jQuery底层的AJAX实现，包含处理AJAX请求所需的一切功能。其他发送AJAX请求的方法都是对该方法的进一步封装。
jQuery.get() 1.0 全局方法发送并处理GET方式的AJAX请求。
jQuery.post() 1.0 全局方法发送并处理POST方式的AJAX请求。
jQuery.getJSON() 1.0 全局方法发送并处理GET方式、返回数据为JSON格式的AJAX请求。
jQuery.getScript() 1.0 全局方法发送GET请求，用于加载一个JS脚本文件。
jQuery.load() 1.0 全局方法发送AJAX请求，用于加载一个HTML文件并替换匹配元素中的内容。
工具方法——用于协助发送或处理AJAX请求，简化AJAX操作
jQuery.ajaxPrefilter() 1.5 全局方法在$.ajax()处理参数选项之前，预处理参数选项。
jQuery.ajaxSetup() 1.1 全局方法设置$.ajax()的全局默认选项。
jQuery.param() 1.0 全局方法将JS数组或对象序列化为字符串，以便用于URL查询字符串或AJAX请求。
serialize() 1.0 将表单元素序列化为字符串，以便用于URL查询字符串或AJAX请求。
serializeArray() 1.2 将表单元素序列化为一个JS数组。
事件方法——用于为AJAX事件绑定处理一个或多个函数
ajaxComplete() 1.0 设置当AJAX请求完成(无论成功或失败)时执行的处理函数。
ajaxSuccess() 1.0 设置当AJAX请求成功时执行的处理函数。
ajaxError() 1.0 设置当AJAX请求失败时执行的处理函数。
ajaxStart() 1.0 设置当前第一个AJAX请求开始时执行的处理函数。
ajaxSend() 1.0 设置在AJAX请求被发送前执行的处理函数。
ajaxStop() 1.0 设置当前最后一个AJAX请求结束时执行的处理函数。

jQuery.ajax() 函数

jQuery.ajax()函数用于通过后台HTTP请求加载远程数据。

jQuery.ajax()函数是jQuery封装的AJAX技术实现，通过该函数，我们无需刷新当前页面即可获取远程服务器上的数据。

jQuery.ajax()函数是jQuery的底层AJAX实现。jQuery.get()、 jQuery.post()、 load()、 jQuery.getJSON()、 jQuery.getScript()等函数都是该函数的简化形式(都调用该函数，只是参数设置有所不同或有所省略)。

jQuery.ajax()函数有以下两种用法：
用法一：
jQuery.ajax( [ settings ] ] )
用法二：jQuery 1.5 新增支持该用法。
jQuery.ajax( url [, settings ] ] )
用法二是用法一的变体，它只是将参数对象settings中的可选属性url单独提取出来作为一个独立的参数。

参数

  • url: String类型 URL请求字符串。
  • settings: 可选/Object类型 一个Object对象，其中的每个属性用来指定发送请求所需的额外参数设置。
  • 参数settings是一个对象，jQuery.ajax()可以识别该对象的以下属性(它们都是可选的)：
    accepts async beforeSend cache complete contents contentType
    context converters crossDomain data dataFilter dataType
    error global headers ifModified isLocal jsonp jsonpCallback
    mimeType password processData scriptCharset statusCode success
    timeout traditional type url username xhr xhrFields

（详见：http://www.365mini.com/page/jquery_ajax.htm ）

如果没有给jQuery.ajax()指定任何参数，则默认请求当前页面，并且不对返回数据进行处理。

jQuery.ajax()函数的settings对象中，常用的属性有：url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

返回值
jQuery.ajax()函数的返回值为jqXHR类型，返回当前该请求的jqXHR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="content"></div>
<!-- javascript代码 -->
$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});

$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
        alert("请求失败：" + errorMsg);
    }
});

jQuery.get()函数

jQuery.get()函数用于通过HTTP GET形式的AJAX请求获取远程数据。

jQuery.get()函数用于实现简单的GET形式的AJAX请求，它在底层是使用jQuery.ajax()来实现的，只是省略了大多数不常用的参数设置，并仅限于HTTP GET方式。
请注意，该函数是通过异步方式加载数据的。

语法
jQuery.get( url [, data ] [, success ] [, type ] )

参数 描述
url String类型指定请求的目标URL。
data 可选/String/Object类型发送请求传递的数据。
success 可选/Function类型请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如”success”、 “notmodified”)，其三是当前jqXHR对象(在jQuery 1.4及之前版本中，该参数为原生的XMLHttpRequest对象)。
type 可选/String类型指定请求返回的数据类型，可以为xml、 html、 script、 json、 jsonp、text。如果省略该参数，jQuery将会根据请求进行智能猜测，猜测范围为：xml、 json、 script 或html。

参数success指定的回调函数只有在请求成功时才会执行，如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
jQuery.get(url, data, success, dataType);
//jQuery.get()是jQuery.ajax()函数的如下简写形式,其 等价于
$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: dataType
});

// 以GET请求方式获取http://localhost/index.php?id=5的数据，但不作任何处理
$.get( "http://localhost/index.php?id=5" );

// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.get( "http://localhost/index.php?id=5", "orderId=5&money=100" );

// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.get( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );

/* ***** 一般不会使用上述不对获取的数据作任何处理的用法***** */

// 以GET请求方式获取http://localhost/index.php?id=5的数据，将返回的html内容追加到body标签内
$.get( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    $("body").append( data );
} );

$.get( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
    // 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
    // 由于get()指定了返回数据的类型为JSON，则jQuery将会尝试将返回数据转换为JSON对象
    // 如果转换成功，这里的data就已经是一个js对象
    alert( data.name ); // CodePlayer       
}, "json" );

jQuery.post() 函数

jQuery.post()函数用于通过HTTP POST形式的AJAX请求获取远程数据。

jQuery.post()函数用于实现简单的POST形式的Ajax请求，它在底层是使用jQuery.ajax()来实现的，只是省略了大多数不常用的参数设置，并仅限于HTTP POST方式。
语法
jQuery.post( url [, data ] [, success ] [, type ] )

参数 描述
url String类型 指定请求的目标URL。
data 可选/String/Object类型 发送请求传递的数据。
success 可选/Function类型 请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如”success”、 “notmodified”)，其三是当前jqXHR对象(在jQuery 1.4及之前版本中，该参数为原生的XMLHttpRequest对象)。
type 可选/String类型 指定请求返回的数据类型，可以为xml、 html、 script、 json、 jsonp、text。如果省略该参数，jQuery将会根据请求进行智能猜测，猜测范围为：xml、 json、 script 或html。

参数success指定的回调函数只有在请求成功时才会执行，如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
jQuery.post(url, data, success, dataType);
// jQuery.post()是jQuery.ajax()函数的简写形式,等价于：
$.ajax({
 url: url,
 type: "POST",
 data: data,
 success: success,
 dataType: dataType
});

// 以POST请求方式获取http://localhost/index.php?id=5的数据，但不作任何处理
$.post( "http://localhost/index.php?id=5" );

// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.post( "http://localhost/index.php?id=5", "orderId=5&money=100" );

// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.post( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );

/* ***** 一般不会使用上述不对获取的POST数据作任何处理的用法***** */

// 以POST请求方式获取http://localhost/index.php?id=5的数据，将返回的html内容追加到body标签内
$.post( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    $("body").append( data );
} );

$.post( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
    // 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
    // 由于post()指定了返回数据的类型为JSON，则jQuery将会尝试将返回数据转换为JSON对象
    // 如果转换成功，这里的data就已经是一个js对象
    alert( data.name ); // CodePlayer
        
}, "json" );

jQuery.getJSON() 函数

jQuery.getJSON()函数用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据。

JSON是一种数据格式，JS原生支持JSON格式，通过jQuery.getJSON()从服务器获得的JSON数据，jQuery会先尝试将其转为对应的JS对象。

如果请求的URL中包括”callback=?”等类似的部分，jQuery会自动将其视作JSONP，并执行对应的回调函数来获取JSON数据。

语法
jQuery.getJSON( url [, data ] [, success ] )

参数 描述
url String类型 指定请求的目标URL。
data 可选/String/Object类型 发送请求传递的数据。
success 可选/Function类型 请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如”success”、 “notmodified”)，其三是当前jqXHR对象(在jQuery 1.4及之前版本中，该参数为原生的XMLHttpRequest对象)。

参数success指定的回调函数只有在请求成功时才会执行，如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//jQuery.getJSON()是jQuery.ajax()函数的如下简写形式：
jQuery.getJSON(url, data, success);

// 等价于

$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: "json"
});

//获取index.php?type=json的JSON数据，但不作任何处理
$.getJSON( "index.php?type=json" );

// 等价于 index.php?id=5&orderId=5&money=100
$.getJSON( "index.php?id=5", "orderId=5&money=100" );

// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );

/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */

// 获取index.php?type=json的JSON数据，获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)

    // 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
    // JSON格式的数据的属性名称必须加双引号，字符串值必须加双引号。
    // jQuery已经将其转换成对应的JS对象
    alert( data.id ); // 5
    alert( data.name ); // CodePlayer
} );

// 获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){
    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery将获取的JSON格式数据转换为JS数组
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }
} );

jQuery.getScript() 函数

jQuery.getScript()函数用于通过HTTP GET形式的加载JavaScript文件并运行它。

该函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。
该函数可以加载跨域的JS文件。请注意，该函数是通过异步方式加载数据的。

语法
jQuery.getScript( url [, success ] )

参数 描述
url String类型 指定请求的目标URL。
success 可选/Function类型 请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如”success”、 “notmodified”)，其三是当前jqXHR对象(在jQuery 1.4及之前版本中，该参数为原生的XMLHttpRequest对象)。

参数success指定的回调函数只有在请求成功时才会执行，如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//jQuery.getScript()是jQuery.ajax()函数的如下简写形式：
jQuery.getScript(url, success);

// 等价于
$.ajax({
 url: url,
 type: "GET",
 success: success,
 dataType: "script"
});

// 加载并执行js文件：http://www.365mini.com/static/js/jquery-util.js
$.getScript( "http://www.365mini.com/static/js/jquery-util.js" );

// 加载并执行js文件：js.php?f=kissy,util,ui&version=1.3
$.getScript( "js.php?f=kissy,util,ui&version=1.3" );

//加载并执行js文件：http://www.365mini.com/static/js/jquery-util.js?v=1.3
//并在成功后执行回调函数
$.getScript( "http://www.365mini.com/static/js/jquery-util.js?v=1.3", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    alert( "加载成功" );
    // 这里假设加载的js文件中定义了函数renderUI()，这里即可执行
    renderUI();
} );

注意：

  • 如果多次加载相同URL的js文件，即使服务器对js文件启用了缓存，在第二次及以后加载该js文件时，jQuery.getScript()仍然不会缓存。因为该函数会在js文件的URL后面添加一个时间戳参数后缀，从而避免浏览器获取缓存的js文件。
  • 不要直接在jQuery.getScript()执行后直接调用该js文件中的变量或函数，因为jQuery.getScript()是异步加载的，在你访问其中的某个变量或函数时，可能该js文件尚未完全加载完毕。建议你最好在success回调函数中处理，或者你能够确认此时该js文件已经加载完毕。

jQuery.load() AJAX函数

load()函数用于从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。
load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。
load()函数只会替换每个匹配元素的内部内容(innerHTML)。

你还可以在URL字符串后面追加指定的选择器(与URL之间用空格隔开)，以便于只使用加载的html文档中匹配选择器的部分内容来替换当前匹配元素的内容。如果该文档没有匹配选择器的内容，就使用空字符串(“”)来替换当前匹配元素的内容。

如果当前jQuery对象没有匹配任何元素，则不会执行远程加载请求。

语法
jQueryObject.load( url [, data ] [, complete ] )

参数 描述
url String类型 请求的目标URL字符串。
data 可选/String/Object类型 发送请求传递的数据。
complete 可选/Function类型 请求完成(无论成功或失败)后执行的回调函数。它有3个参数：其一是请求返回的文本内容，其二是请求状态文本(“success”、 “notmodified”、 “error”、 “timeout”、 “abort”或”parsererror”)，其三是当前jqXHR对象。

如果参数data为Object对象，jQuery会自动将其转换为字符串。属性名就是对应的请求参数名，属性值就是参数值，如果属性值为数组，jQuery会自动将其拆分为参数名相同、每个元素作为参数值的请求参数。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//使用以下jQuery代码，我们可以加载指定的html内容来替换每个匹配元素的内容(innerHTML)。

// 加载http://localhost/index.php的html内容来替换当前文档的每一个div元素, jQuery会过滤掉该文档中的DOCTYPE以及html、head、body标签后再进行替换(以免与当前文档的标签起冲突)
$("div").load("http://localhost/index.php");

//加载指定的html文档数据，然后使用其中匹配选择器的元素内容来替换每个匹配元素的内容。
// 加载http://localhost/index.php?id=2的html内容,只使用其中id为site-title的元素来替换所有div元素
$("div").load("http://localhost/index.php?id=2 #site-title");

// 请分别执行以下三个加载方法

// 也可将URL直接写为："action.php?id=5&username=CodePlayer&age=15"
$("div").load("action.php?id=5", "username=CodePlayer&age=15");

// 由于数据是对象形式，因此自动转为POST方式
$("div").load("action.php?id=5", { username: "CodePlayer", age: 15 });

// 由于数据是对象形式，因此自动转为POST方式
// 注意： new String("username=CodePlayer&age=15") 也是一个Object对象，会使用POST方式
$("div").load("action.php?id=5", { username: "CodePlayer", age: 15 }, function(responseText, textStatus, jqXHR){
    // responseText 是响应(返回)的原始文本数据
    // textStatus 可能是 "success"、 "notmodified"、 "error"、 "timeout"、 "abort"或"parsererror"中的一个
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    if(textStatus == "success" || textStatus == "notmodified"){
        alert("加载成功!");
    }
});

Demo示例：

通过Ajax实现在线聊天室动态更新。
Demo地址：在线地址

坚持原创技术分享，您的支持将鼓励我继续创作！