jQuery的ajax方法

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对象的标签中