码迷,mamicode.com
首页 > Web开发 > 详细

jquery ajax超时设置

时间:2020-04-07 09:36:22      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:error   check   异步   全局   代码   赋值   use   tps   原理   

 

 

var ajaxTimeoutTest = $.ajax({
  url:‘‘,  //请求的URL
  timeout : 1000, //超时时间设置,单位毫秒
  type : ‘get‘,  //请求方式,get或post
  data :{},  //请求所传参数,json格式
  dataType:‘json‘,//返回的数据格式
  success:function(data){ //请求成功的回调函数
    alert("成功");
  },
  complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
    if(status==‘timeout‘){//超时,status还有success,error等值的情况
       ajaxTimeoutTest.abort();
       alert("超时");
    }
  }
});

设置timeout的时间,通过检测complete时status的值判断请求是否超时,如果超时执行响应的操作。

 

如何等待ajax完成再执行相应操作

 

ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。

例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。

技术图片
// 声明一个表示状态的全局变量 status
var status = false;
// ajax
$.ajax({
    url:"/checkUsername",
    type:"post",
    success:function(){
        status = true;  
}  
});

// 根据 status 的状态 进行后续操作
function(){
  if(status){
    // 后续操作
}  
}
技术图片

以上代码对于不是很清楚ajax运行原理的朋友来说,看似没什么毛病,但其实 status 的值在ajax 请求成功之后进行 if 判断的时候值仍然为 false。

因为 ajax 有个 async 属性,该属性默认为 true,表示 ajax 异步执行,而在进行 if 判断的时候,ajax 的异步执行还没完成,因此 status 的值仍然是 false。

若要保证 status 的值是在 ajax 执行完成之后的最终值,有两种办法:

1、将 ajax 的 async 属性设置为 false,表示 ajax 同步执行。

技术图片
// 声明一个表示状态的全局变量 status
var status = false;
// ajax
$.ajax({
    url:"/checkUsername",
    type:"post",
    // ajax 同步执行
    async:false,
    success:function(){
        status = true;  
}  
});

// 根据 status 的状态 进行后续操作
function(){
  if(status){
    // 后续操作
}  
}
技术图片

但是这种方式在有些情况下并不好用。推荐第二种方式。

2、利用 jquery 的 when().done 函数 等待 ajax 执行结束之后再进行后续操作。

技术图片
// 声明一个表示状态的全局变量 status
var status = false;
// ajax
myajax = $.ajax({
    url:"/checkUsername",
    type:"post",
    success:function(){
        status = true;  
}  
});

// 根据 status 的状态 进行后续操作
function(){
  // myajax 请求完毕时执行
  $.when(myajax).done(function(){
      if(status){
        // 后续操作
      }  
    }) ;
}
技术图片

此时的 status 是在 ajax 执行完成后被重新赋值后的 status ,值为 true。

 
 
 

jquery ajax超时设置

标签:error   check   异步   全局   代码   赋值   use   tps   原理   

原文地址:https://www.cnblogs.com/Jeely/p/12651352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!