关闭

使用Ajax同步请求时,等待时间过长增加页面提示问题

时间: 2018-11-08阅读: 2259标签: ajax

最近在做项目时,有一个需求是批量打印好多个合同,使用AJAX向后台传送数据,等待后台执行后,需要把生成之后的文件地址传送过来。

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

 

我们先来看一个Ajax同步请求与异步请求的区别:

异步和同步:

ajax中   async属性是设置同步和异步,async:false,时表示此时ajax为同步请求,如果不写或者设置成true表示异步请求

$.ajax({
      type : "get",
      async:true,
      url :                       
      success : function(targetPath){                   
      },
})


当设置成同步时,意味着执行完当前的程序段,才能执行下一段,它属于阻塞模式,其表现在网页上面就是会出现页面假死现象,也就是暂停当前的页面,用户不能操作其它的,必须等待当前请求返回数据,在这个过程中用户看不到任何的提示以及等待提醒。

而使用异步方式请求,页面后再次段程序等待的时候,继续的向下执行,等待执行结束再返回结果,页面不会出现假死现象。

 

我现在遇到的问题是:点击一个按钮,使用Ajax向后台传送数据,等待后台的执行,由于后台执行时间过长,这个时候页面出现所谓的假死现象,容易引发误操作。

我的思路是:在ajax返回结果之前,增加一个遮罩层的函数显示效果,在执行之后,显示隐藏效果,于是我写了一个遮罩层的函数,准备放到ajax中。

 

我通过查阅各种帖子发现有类似的描述,说是可以使用ajax的一个属性进行设置

beforeSend: function(){)

,类似:

$.ajax(function(){
//省略了一些参数,这里只给出async 和 beforeSend
async: false, //同步请求,默认情况下是异步(true)
beforeSend: function(){
$(‘#warning‘).text(‘正在处理,请稍等!‘);
}
});

但是设置成这样效果是出不来的,因为beforeSend只有在ajax设置成异步请求时,才会显示出beforeSend中函数的效果。

在这里根据业务需要,ajax是不能改为异步的,因为必须等待文件地址返回后才能继续后面的操作。

除此之外,loading也使用过,还有各种加提示的方法,但是sys为异步时,效果都会无法显示。

 

在这个时候就需要引入一个JQuery中一个对象deferred,来对ajax进行封装异步函数。

主要使用的是deferred中   $.when的方法使用,主要是对多个deferred对象进行并行化操作,当所有deferred对象都得到解决就执行后面添加的相应回调

具体使用如下:

使用之前需要先进行声明

var defer = $.Deferred();
    function toGetData() {
        var defer = $.Deferred();
        var checkedIds=$("input[name=‘backEntrust‘]:checked");
            if(checkedIds.length==0){
                alert("请选中要打印的合同");
                return false;
            }
            
            var r=confirm("确定打印吗?");
            if (r==true){        
                var enIds=new Array(checkedIds.length);
                for(var i=0; i<checkedIds.length; i++){
                    enIds[i] = checkedIds[i].value;
                    }
                   
                 $.ajax({
                    type : "get",
                    async:true,
                    url :"${pageContext.request.contextPath}/renWuFenPeiService_mergerSample.action?entrustIds="+enIds,
                       
                    success : function(targetPath){
                        defer.resolve(targetPath)                       
                    }, 
                    error : function() {
                        alert("样品检测委托单合并失败,请重试。");
                        }
                        
                    });    
                                                                      
            }else 
            {
                window.location.reload();
             } 
                             
        return defer.promise();        
    }
    
    $(‘#batchPrint‘).on(‘click‘, function() {
        loading();    显示遮罩层函数
        $.when(toGetData()).done(function(targetPath){          
           $(".shodow").hide()      
          $("#batchPrinttwo").attr("href","/file/"+targetPath);
          document.getElementById("batchPrinttwo").click();
          loaded();   取消遮罩层函数
        });    
    });


在这段代码中,我们可以看到ajax设置的是异步请求,但是我们需要的是同步请求啊,在这使用了JQuery中的deferred之后,我们想要的显示效果就出来了,我们就可以使用ajax的异同请求,达到同步的效果。


原文地址:https://www.cnblogs.com/leo1014/p/9929147.html  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1299

关闭

模仿jquery封装ajax功能

因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数

ajax是什么?如何创建一个ajax?

ajax(asynchronous javascript and xml)主要用来实现客户端与服务器端的异步通信,实现页面的局部刷新。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

ajax延时请求问题

在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

原生JavaScript手写Ajax

封装通用的xhr对象,兼容各个版本,判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox, opera等,将所有可能出现的ActiveXObject版本放在一个数组中

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

ajax的优缺点

ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...

浅谈Ajax的优缺点

AJAX (Asynchronous JavaScript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验。完全的AJAX应用给人以桌面应用的感觉。正如其他任何技术,AJAX有它自己的优缺点

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!