Ajax(二)——jQuery实现

前一节讲述了Ajax实现大致要经过新建对象设置触发引用函数创建请求发送请求获取返回数据这么一个流程,那么在jQuery中,Ajax是怎么实现的呢?

jQuery基础

jQuery版本

目前官网jQuery上最新的版本为1.11.1和2.1.1,最新怎么还会有两个呢?这是因为jQuery-2.x系列的版本是不支持IE 6、7、8的,考虑到广大的IE用户群(此处略去20字)。按照官网的说法就是:we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site.

$ 的含义

从基础入手,jQuery中最常见的莫过于$符号了,那这个符号是什么意思呢?和PHP中的变量定义一样?

在jQuery中,$是jQuery的别名,在源码中可以看到如下行:

1
2
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

使用$的地方都可以使用jQuery替换,如$("div").hide();等同于jQuery("div").hide();。然而如果其它javascript库也使用$命名空间呢?冲突可想而知。

解决jQuery与其它库$冲突的方法?

法一:释放$

1
2
3
jQuery.noConflict();
$("div").hide();//使用其它库的$命名空间,如果没有引用其它库或者其它库用的不是$,控制台里则会报错
jQuery("div").hide();//使用jQuery

法二:自定义jQuery别名

1
2
var j = jQuery.noConflict();//取别名j,接下来就可以使用j代替jQuery
j("div").hide();

法三:使用语句块

1
2
3
4
jQuery.noConflict();
jQuery(document).ready(function($) {
("div").hide();//在整个ready事件的方法中使用的$都是jQuery中定义的$
});

$.ajax()方法

下面介绍下几个重要的$.ajax()参数

参数 类型 描述
url String 发送请求的地址(默认: 当前页面)
type String 数据请求方式,POST、GET、PUT、DELETE(默认GET)
data Object, String 发送到服务器的数据,如果不是字符串则自动转换成字符串类型,如果是GET方式,那么字符串将附在url后面
dataType String 服务器返回的数据类型,包含的 script标记会在嵌入页面时执行; ”html”: 返回纯文本 HTML 信息; “text”:返回纯文本字符串; “script”:返回纯文本 javascript 代码; “json”: 返回 JSON 数据; “xml”:返回可以被jQuery处理的xml文档; 如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递
contentType String 发送信息至服务器时内容编码类型(默认: “application/x-www-form-urlencoded”)
beforeSend Function 发送请求前触发的函数,可以在发送前修改XMLHttpRequest对象。如果该函数返回false,则取消本次请求。参数:XMLHttpRequest对象beforeSend:function(XMLHttpRequest) {}
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态success:function(data, textStatus) {}
error Function 请求失败后的回调函数,这个方法有三个参数:XMLHttpRequest 对象,错误信息,捕获的错误对象。error:function(XMLHttpRequest, textStatus, errorObj) {}
complete Function 请求完成后回调函数,无论请求成功还是失败都会调用。参数: XMLHttpRequest 对象,成功信息字符串。complete:function(XMLHttpRequest, textStatus) {}

先success后complete?

对的,complete是在success之后执行的,即先请求成功,后请求完成。正如前面一篇提到的,XMLHttpRequest对象的readyState属性,当属性为3(交互中)时,此刻已经收到HTTP服务器返回的HTTP状态码(即已经请求成功,执行success:function(){}),但是消息主体部分还没有接受完毕,所以还未执行complete:function(){},这也就是为什么先请求成功后请求完成了。

$.ajax()示例

与上一篇类似,html页面中有一个文本框表单,有一个

是用来显示服务器返回数据的区域。

1
2
<input id = "name" type = "text" name = "name" value = "">
<div id = "checkname"></div>

不过没有设置onblur失去焦点时触发的事件,而是调用jQuery中的blur()方法

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
$("#name").blur(function() {
$.ajax({
url : "checkname.php",
type : "POST",
data : {name : $("#name").val()},//post文本框中的值
datatype : "text",
beforeSend : function() {
//设置发送请求时触发的函数
console.log("beforeSend");//控制台里查看请求过程
},
success : function(data) {
//设置请求成功时触发的函数
$("#checkname").html(data);
console.log("success");
},
error : function() {
//设置请求失败时触发的函数
$("#checkname").html("异步请求失败");
console.log("error");
},
complete : function() {
//设置请求完成时触发的函数
console.log("complete");
},
});
});

异步请求的页面checkname.php中只做了一个简单的验证,判断文本框中时候包含中文:

1
2
3
if(isset($_POST['name']) && $_POST['name'] != '') {
echo preg_match("/[\x{4e00}-\x{9fa5}]+/u",$_POST['name']) ? '用户名不能包含中文' : '';
}

Ajax全局函数与全局事件

$.ajaxSetup全局函数

在使用$.ajax()方法时,有时需要调用多个ajax方法,如果每个方法都设置请求url、请求类型、数据类型等,将是一件很繁琐的事情。为了简化这种工作,在jQuery中,可以使用$.ajaxSetup()方法设置全局的Ajax默认选项,其参数同$.ajax()。

例如,每次请求都是check.php页面,并且都是POST数据过去,check区域显示验证不通过的提示消息,每一个blur事件中将POST当前文本框的数据进行验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.ajaxSetup({
url : "check.php",
type : "POST",
success : function(data) {
$("#check").html(data);
},
});
$("#name").blur({
$.ajax({
data : {name : $("#name").val()},
});
});
$("#age").blur({
$.ajax({
data : {age : $("#age").val()},
});
});
6个全局事件

在jQuery中,除了全局性的函数外,还有6个全局性的Ajax事件。由于在使用$.ajax()方法时,其中的选项参数global的默认参数为true,所以,所有执行的Ajax请求都绑定了全局事件。

事件名称 描述 事件名称 描述
ajaxSend 请求发送前执行 ajaxComplete 请求完成时执行
ajaxStart 请求开始时执行 ajaxStop 请求结束时执行
ajaxSuccess 请求成功时执行 ajaxError 请求发生错误时执行

ajaxStart当请求开始执行时触发,往往用于编写一些准备性的工作,如提示“正在加载”字样或者显示一个加载中的图片;ajaxStop当请求结束时触发,常常与ajaxStart配合使用,如将“正在加载”改为“加载完毕”,然后渐渐消失。

$(“#name”).ajaxStart()事件无效?

很纠结的发现,ajaxStart事件始终无法触发,将jQuery版本从1.11.1换为1.7.1就可以了,莫非新版的jQuery不支持了?

1
2
3
$("#name").ajaxStart(function() {
$("#check").html("loading...");
});

查阅资料后发现,在jQuery 1.9及以上版本中,全局事件只能在documet元素删触发,见官方升级说明jQuery Core 1.9 Upgrade Guide。而前面的版本,全局事件可以绑定在页面的任何一个元素中,这样确实不合理,既然是全局,绑定在任何元素上确实太随意了。

1
2
3
$("#name").ajaxStart(function() {
$("#check").html("loading...");
});

$.ajax()的封装

除了$.ajax()这种jQuery最底层的方法,还有一些基于$.ajax()的更加方便实现异步的全局性函数

1
load(url, data, callback)

参数url为被加载的页面地址;可选项data表示发送至服务器的数据,键值对的格式;可选项callback为加载成功后,返回至加载页的回调函数。

1
2
get(url, data, callback, type)
post(url, data, callback, type)

get与post的参数一样,前三个参数同load方法,第四个参数表示返回数据的格式,可以为html、XML、javascript、json、text等。

其它还有getJSON、getScript等方法实现异步请求。


参考资料:

Just a beginner.<br /><a href='https://github.com/yaoshanliang/about' target='_blank'>profile</a>