老生常谈ajax
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地址，参数类型为String 2. data：可选，发送的key/value数据，参数类型为Object 3. callback：可选，成功或失败的回调函数，参数类型为函数Function
// 例子：
GET方式：不传递data,则默认get方式
$('.ajax_btn').on('click',function(){
$('.ajax_box').load('ajax.php?url=snail',function(){
alert('我是回调函数！');
});
});
<?php
if($_GET['url']=='snail'){
echo '蜗牛';
}else{
echo '其它动物！';
}
?>
// POST方式：传递data,则为post方式
$('.ajax_btn').on('click',function(){
$('.ajax_box').load('ajax.php',{
url:'snail',
},function(){
alert('我是回调函数！');
});
});
<?php
if($_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
});
});
<?php
if($_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
})
});
注意:第四参数type是指定异步返回的类型。一般情况下type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
$('.ajax_btn').on('click',function(){
$.get('ajax.xml',{
url:'snail',
},function(response,status,xhr){
if(status=='success'){
$('.ajax_box').html(response);
}
// type自动转化成XML
})
});
注意:如果载入的是xml文件,type会智能判断。如果强行设置html类型返回,则会把xml文件当成普通数据全部返回,而不会按照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);
});
});
$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数,传递一个各个功能键值对的对象。
$.ajax()方法对象参数表:
参数 类型 说明 url String 发送请求的地址 type String 请求方式:POST或GET,默认GET timeout Number 设置请求超时的时间(毫秒) data Object或String 发送到服务器的数据,对象或键值对字符串 dataType String 返回的数据类型,比如html、xml、json等 beforeSend Function 发送请求前可修改XMLHttpRequest对象的函数 complete Function 请求完成后调用的回调函数 seccess Function 请求成功后调用的回调函数 error Function 请求失败时调用的回调函数 global Boolean 默认为true,表示是否触发全局Ajax cache 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);
}
})
});
注意:对于data属性,如果是GET模式,可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。
一.加载请求 在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题。而超过一定时间的请求,用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加的好一些。
Query提供了两个全局事件,.ajaxStart()和.ajaxStop()。 这两个全局事件,只要用户触发了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。
$('.ajax_load').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
注意:以上代码在jQuery1.8及以后的版本不在有效,需要使用jquery-migrate向下兼容才能运行。新版本中,必须绑定在document元素上。
$(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){}
})
注意:在jQuery1.5版本以后,使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。
四.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.为多个操作指定回调函数;
