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的别名，在源码中可以看到如下行：

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

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

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

法一：释放$

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

法二：自定义jQuery别名

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

法三：使用语句块

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页面中有一个文本框表单，有一个

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

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

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

$("#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中只做了一个简单的验证，判断文本框中时候包含中文：

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当前文本框的数据进行验证

$.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不支持了？

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

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

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

$.ajax()的封装

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

load(url, data, callback)

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

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

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

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

---

参考资料：

• jQuery的$命名冲突

• jQuery1.9升级说明

• 《jQuery权威指南（第2版）》（机械工业出版社） 第6章 Ajax在jQuery中的应用