美文网首页
jQuery的ajax方法

jQuery的ajax方法

作者: 陈裔松的技术博客 | 来源:发表于2018-12-27 08:50 被阅读0次

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

    相关文章

      网友评论

          本文标题:jQuery的ajax方法

          本文链接:https://www.haomeiwen.com/subject/akillqtx.html