jQuery中的ajax全局配置与全局回调设置
$.ajaxSetup方法可以设置全局配置
- 全局配置会作为下次ajax方法的默认参数
- 全局配置可以被ajax方法的配置覆盖
- 全局配置适用于所有基于ajax方法的衍生方法
$.ajaxSetup({
url: 'api.com', // 指定接口
type: 'GET', // 指定请求方法
dataType: 'json', // 指定请求返回的数据是哪种类型
context: store, // 指定成功回调中的上下文,store是一个jQuery对象
});
全局回调
- 所有ajax方法默认执行全局回调
- 可通过配置参数关闭单个ajax方法不执行全局回调
- 全局回调无法被ajax方法中的配置项覆盖
- 6个全局回调
// 一个正常的ajax请求,全局回调的执行顺序是 ajaxStart -> ajaxSend -> ajaxSuccess -> ajaxComplete -> ajaxStop
var jDoc = $(document);
// 当发送请求且没有其他未完成请求时触发
// 只会在第一个请求发生的时候触发
jDoc.ajaxStart(function (e, xhr, setting) {
console.log(xhr, 'start!')
})
// 当请求发送时触发
jDoc.ajaxSend(function (e, xhr, setting) {
console.log(xhr, 'send!')
})
// 当请求完成时触发
jDoc.ajaxSuccess(function (e, xhr, setting) {
console.log(xhr, 'success!')
})
// 当请求完成时触发
jDoc.ajaxComplete(function (e, xhr, setting) {
console.log(xhr, 'complete!')
})
// 当请求完成且没有其他未完成请求时触发
// 最后一个请求完成时触发
jDoc.ajaxStop(function (e, xhr, setting) {
console.log(xhr, 'stop!')
})
// 当请求出错时触发
jDoc.ajaxError(function (e, xhr, setting) {
console.log(xhr, 'error!')
})
// 通过配置参数关闭单个ajax方法不执行全局回调
$.ajax({
global:false, // 因为这里设置为false,所以这个ajax方法的全局回调不会被触发
success: function(){
// 获取数据之后,触发这里的处理
}
});
jQuery中的ajax方法详解
配置参数
$.ajax({
url: 'api.com', // 指定接口
type: 'GET', // 指定请求方法
// data: {}, // 如果type是'POST',那么还需要设定data,用于传递参数
dataType: 'json', // 指定请求返回的数据是哪种类型 json/jsonp/script/text...
scriptCharset: 'utf-8', // 当dataType设定为script的时候,指定script的编码格式
context: store, // 指定成功回调中的上下文,store是一个jQuery对象
beforeSend: function(){},// 请求发送之前的回调,如果返回值为false,不会发送请求
success: function(){}, // 请求成功时的回调
error: function(){}, // 请求失败时的回调
complete: function(){}, // 请求完成时的回调
xhrFields: {
withCredentials:true // 指定允许向服务端发送cookie
},
timeout: 4000, // 指定timeout时间
statusCode: {
304: function() {}, // HTTP状态码为304时触发的回调
503: function() {}, // HTTP状态码为503时触发的回调
},
headers: { // 设置请求头
abc: 'xyz'
},
cache: false, // 不需要对请求结果缓存,反之需要缓存
async: false, // 设定为同步请求,反之就是异步请求,默认:true
});
jqXHR对象
var jqXHR = $.ajax({
url: 'api.com',
type: 'GET',
dataType: 'json',
})
jqXHR.then(function(data){ }, function(){});
// 第一个代表done时的回调,第二个代表fail时的回调
jqXHR.done(); // 请求成功时回调,与success回调类似,更建议使用done
jqXHR.fail(); // 请求失败时回调
jqXHR.always(); // 请求完成时回调
jqXHR.abort(); // 终止请求
jQuery中的几种ajax衍生方法
$.get
$.get('api.com','name=imooc',function(data){
console.log(data);
},'json');
// 第一个参数:请求地址
// 第二个参数:发送给后端的数据
// 第三个参数:请求完成后的回调
// 第四个参数:数据类型
$.post
$.post('api.com','name=imooc',function(data){
console.log(data);
},'json');
// 第一个参数:请求地址
// 第二个参数:发送给后端的参数
// 第三个参数:请求完成后的回调
// 第四个参数:数据类型
$.getJSON
$.getJSON('api.com','name=imooc',function(data){
console.log(data);
});
// 相当于$.post中第四个参数是json
$.getScript
$.getScript('./data.js',function(data){
console.log(data);
});
// 第一个参数:script地址
// 第二个参数:js加载后的回调
// 相当于创建了一个script标签,然后把这个script标签的src指向第一个参数
// 严格意义上说,这并不是一个ajax
// 需要异步加载js的时候可以用
jqElement.load
var store = $('#div');
store.load('data.html'); // 将data.html中的文本内容复制到store对象的标签中
网友评论