jQuery对Ajax做了大量的封装，jQuery采用了三层封装：最底层的封装方法为：$.ajax()通过最底层进一步封装了第二层的三种方法：.load()、$.get()、$.post()最高层是：$.getScript() and $.getJSON()

我自己的记忆方法：$.ajax()是异步处理本源，它是一个区域、一个村子、一个小型生态系统，是jQuery的一个分公司；$.get()是得到、获得，也就是往我们的生态系统中运输我们生态系统所没有的东西；$.post()是把我们不能完全消耗的物品运出去换我们需要的东西；一个掌管输入，一个掌管输出，这时就需要一个管理自身的管家，而.load()就是管理生态系统的管家，由于它不需要出去，只是在自家进行活动，所以就不用打上，jQuery公司的LOGO=>$了。由于我们有的货物是重要的有的是次要的，这样就诞生了贵宾服务，$.getScript()和$.getJSON()这两个专为贵宾服务的特殊通道，方便快捷

【1】.laod()方法拥有三个参数：1. url：必须，请求html文件的url地址，参数类型为String2. data：可选，发送的key/value数据，参数类型为Object3. callback：可选，成功或失败的回调函数，参数类型为函数Function

// 例子：GET方式：不传递data,则默认get方式$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php?url=snail‘,function(){        alert(‘我是回调函数！‘);    });});

<?phpif($_GET[‘url‘]==‘snail‘){    echo ‘蜗牛‘;}else{    echo ‘其它动物！‘;}?>

// POST方式：传递data,则为post方式$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php‘,{        url:‘snail‘,    },function(){        alert(‘我是回调函数！‘);    });});

<?phpif($_POST[‘url‘]==‘snail‘){    echo ‘蜗牛‘;}else{    echo ‘其它动物！‘;}?>

在Ajax数据载入完毕之后，就能执行回调函数callback，也就是第三个参数；回调函数可以传递三个可选参数：responseText(请求返回)、textStatus(请求状态)、XMLHttpRequest(XMLHttpRequest对象)

$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        console.log(‘返回的值为：‘+response+‘，状态为：‘+status+‘，状态是：‘+xhr.statusText);        // 返回的值为：蜗牛，状态为：success，状态是：OK        console.log(‘返回的值为：‘+xhr.responseText+‘，XML DOM文档：‘+xhr.responseXML+‘，响应的HTTP状态：‘+xhr.status+‘，HTTP状态的说明：‘+xhr.statusText);        // index.html:36 返回的值为：蜗牛，XML DOM文档：undefined，响应的HTTP状态：200，HTTP状态的说明：OK    });});

<?phpif($_POST[‘url‘]==‘snail‘){    echo ‘蜗牛‘;}else{    echo ‘其它动物！‘;}?>

注意：status得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest对象属于JavaScript范涛，可以调用一些属性如下：

属性名            说明responseText     作为响应主体被返回的文本responseXML      如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档status           响应的HTTP状态statusText       HTTP状态的说明

返回数据status和statusText对照表：HTTP状态码     状态字符串                  说明200           OK                        服务器成功返回了页面400           Bad Request               语法错误导致服务器不识别401           Unauthorized              请求需要用户认证404           Not found                 指定的 URL 在服务器上找不到500           Internal Server Error     服务器遇到意外错误,无法完成请求503           ServiceUnavailable        由于服务器过载或维护导致无法完成请求

【2】$.get()和$.post().load()方法是局部方法，因为它需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。用途方面：.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适

$.get()方法有四个参数：前面三个和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text第一个参数为必选参数，后面三个为可选参数

$(‘.ajax_btn‘).on(‘click‘,function(){    $.get(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }        // type自动转化成text    })});

$(‘.ajax_btn‘).on(‘click‘,function(){    $.get(‘ajax.xml‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }        // type自动转化成XML    })});

$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:1.GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的;2.GET提交有大小限制(2KB),而POST方式不受限制;3.GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题;4.GET方式通过$_GET[]获取,POST方式通过$_POST[]获取。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.post(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }    })});

$.getScript()和$.getJSON()=>jQuery提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS文件;$.getJSON(),用于专门加载JSON文件。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.getScript(‘ajax.js‘);});$(‘.ajax_btn‘).on(‘click‘,function(){    $.getJSON(‘ajax.json‘,function(response,status,xhr){        console.log(response.ajax.name);    });});

参数               类型                说明url               String             发送请求的地址type              String             请求方式:POST或GET,默认GETtimeout           Number             设置请求超时的时间(毫秒)data              Object或String     发送到服务器的数据,对象或键值对字符串dataType          String             返回的数据类型,比如html、xml、json等beforeSend        Function           发送请求前可修改XMLHttpRequest对象的函数complete          Function           请求完成后调用的回调函数seccess           Function           请求成功后调用的回调函数error             Function           请求失败时调用的回调函数global            Boolean            默认为true,表示是否触发全局Ajaxcache             Boolean            设置浏览器缓存响应,默认为true。如果dataType类型为script或jsonp则为false。content           DOM                指定某个元素为与这个请求相关的所有回调函数的上下文。contentType       String             指定请求内容的类型。默认为application/x-www-form-urlencoded。async             Boolean            是否异步处理。默认为true,false为同步处理processData       Boolean            默认为true,数据被处理为URL编码格式。如果为false,则阻止将传入的数据处理为URL编码的格式。dataFilter        Function           用来筛选响应数据的回调函数。ifModified        Boolean            默认为false,不进行头检测。如果为true,进行头检测,当相应内容与上次请求改变时,请求被认为是成功的。jsonp             String             指定一个查询参数名称来覆盖默认的jsonp回调参数名callback。username          String             在HTTP认证请求中使用的用户名password          String             在HTTP认证请求中使用的密码scriptCharset     String             当远程和本地内容使用不同的字符集时,用来设置script和jsonp请求所使用的字符集。xhr               Function           用来提供XHR实例自定义实现的回调函数traditional       Boolean            默认为false,不使用传统风格的参数序列化。如为true,则使用。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.ajax({        type:"GET",        url:"ajax.php",        data:{            url:"snail",        },        success:function(response,status,xhr){            console.log(response);        }    })});

一.加载请求在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题。而超过一定时间的请求,用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加的好一些。

Query提供了两个全局事件,.ajaxStart()和.ajaxStop()。这两个全局事件,只要用户触发了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。

$(‘.ajax_load‘).ajaxStart(function(){    $(this).show();}).ajaxStop(function(){    $(this).hide();});

$(document).ajaxStart(function(){    $(‘.ajax_load‘).show();}).ajaxStop(function(){    $(‘.ajax_load‘).hide();});

// 请求时间过长，导致页面呈现假死状态，所以可以设置超时$.ajax({    timeout:2000,});

// 如果某个ajax不想触发全局事件,可以设置取消;比如取消触发.ajaxStart()和.ajaxStop()全局事件：$.ajax({    global:false,});

二.错误处理Ajax异步提交时,不可能所有情况都是成功完成的,也有因为代码异步文件错误、网络错误导致提交失败的。这时,我们应该把错误报告出来,提醒用户重新提交或提示开发者进行修补。在之前高层封装中是没有回调错误处理的,比如$.get()、$.post()和.load()。所以,早期的方法通过全局.ajaxError()事件方法来返回错误信息。而在jQuery1.5之后,可以通过连缀处理使用局部.error()方法即可。而对于$.ajax()方法,不但可以用这两种方法,还有自己的属性方法error:function(){}。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.ajax({        type:"GET",        url:"ajax.php",        data:{            url:"snail",        },        success:function(response,status,xhr){            console.log(response);        },        error:function(xhr,errorText,errorStatus){            console.log(xhr);            console.log(errorText);            console.log(errorStatus);        }    })});

// $.post()使用连缀.error()方法提示错误,连缀方法将被.fail()取代$.post(‘ajax.php‘).error(function(xhr,status,info){    console.log(xhr.status+‘:‘+xhr.statusText);    console.log(status+‘:‘+info);});

// $.post()使用全局.ajaxError()事件提示错误$(document).ajaxError(function(event,xhr,settings,infoError){    alert(xhr.status+‘:‘+xhr.statusText);    alert(settings+‘:‘+info);});

三.请求全局事件jQuery对于Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件,除了这些,还有一些其他全局事件:.ajaxSend(),没有对应的局部方法,只有属性beforeSend,请求发送之前要绑定的函数。.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。注意:全局事件方法是所有Ajax请求都会触发到,并且只能绑定在document上。而局部方法,则针对某个Ajax。对于一些全局事件方法的参数,大部分为对象,而这些对象有哪些属性或方法能调用,可以通过遍历方法得到。

// 遍历settings对象的属性$(document).ajaxSuccess(function(event,xhr,settings){    for(var i in settings){        console.log(i);    }});

// $.post()请求完成的局部方法.complete()$.post().complete(function(xhr,status){    console.log("完成！");})

// $.post()请求完成的全局方法.ajaxComplete()$(document).ajaxComplete(function(event,xhr,setting){    console.log("完成！");})

// $.ajax()方法,可以直接通过属性设置即可。$.ajax({    type:"POST",    url:"ajax.php",    success:function(data,status,xhr){},    complete:function(xhr,status){},    beforeSend:function(xhr,settints){}})

四.JSON和JSONP如果在同一个域下,$.ajax()方法只要设置dataType属性即可加载JSON文件。而在非同域下,可以使用JSONP,但也是有条件的。如果想跨域操作文件的话,我们就必须使用JSONP。JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

$.ajax({    type:"GET",    dataType:"jsonp",    success:function(data,status,xhr){}})

五.jqXHR对象在之前,我们使用了局部方法:.success()、.complete()和.error()。这三个局部方法并不是XMLHttpRequest对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。这个对象,就是jqXHR对象,它是原生对象XHR的一个超集。注意:如果使用jqXHR对象的话,那么建议用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以为在未来版本中,很可能将这三种方法废弃取消。使用jqXHR的连缀方式比$.ajax()的属性方式有三大好处:1.可连缀操作,可读性大大提高;2.可以多次执行同一个回调函数;3.为多个操作指定回调函数;