jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

Posted 2020-07-13 攻城狮的世界我不懂——lmky

1.jquery ajax请求方式与提示用户正在处理请稍等

为了提高用户体验度，我们通常会给出 “正在处理，请稍等！”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现

初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同，刚开始使用同步请求，以至后来出现许多问题，特别在体验度方面。
异步和同步：
同步意味着执行完一段程序才能执行下一段，它属于阻塞模式，其表现在网页上的现象是——浏览器会锁定页面（即所谓的页面假死状态），用户不能操作其它的，必须等待当前请求返回数据。而使用异步方式请求，页面不会出现假死现象。
提升用户体验度：
当用户提交数据等待页面返回结果是需要时间的，有时这段等待时间比较长，为了提高用户体验度，我们通常会给出 “正在处理，请稍等！”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现，
eg: 
html关键代码 

?

1	<div id="warning"></div>

js文件中的关键代码

?

1 2 3 4 5 6 7 8 9 10

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

注意，如果你按照同步设置 async: false, $(‘#warning‘).text(‘正在处理，请稍等！‘);在网页中根本没有出现效果，如果将$(‘#warning‘).text(‘正在处理，请稍等！‘);换成 alert（‘test‘）；在发送请求前会立即看到弹出框，这说明 beforeSend:是执行了，但是换成别的诸如 $(‘#warning‘).text(‘正在处理，请稍等！‘); 在请求发出返回结果了都没有看到提示出现。关于这个问题，我是纳闷了很久，问题到底是什么我还是不清楚。
把同步请求改成异步请求，上面的问题就没有了，

?

1 2 3

beforeSend: function(){ $(‘#warning‘).text(‘正在处理，请稍等！‘); }

会立即被执行。

 

2.Ajax等待数据返回时loading的显示

 

摘要: Ajax等待数据返回时loading的显示

 

"Ajax等待数据返回时loading的显示"：

 

有时候ajax处理的数据量比较大的时候，用户等待时间会比较长，如果这个时候不提示用户等待的话，用户可以会觉得很不耐烦。这里介绍一下如何在ajax如何在处理数据时显示loading。

首先在html页面添加一个div层：

<div id="loading" style="color:#ffffff; display:none; position:absolute; top:80px; left:3em;"></div> 

这个div一开始是不显示的。

然后你可以在ajax请求函数中添加如下代码：

xmlreq.onreadystatechange = function()  
{   
    var sliderblank = document.getelementbyid("sidebar");
    // 让需要显示结果的层显示空白
    sliderblank.innerhtml = " "; 
    
    // 获得loading显示层
    var loadingdiv = document.getelementbyid("loading"); 
    // 插入loading图
    loadingdiv.innerhtml = "<img src=‘images/loading.gif‘ />"; 
    // 显示loading层
    loadingdiv.style.display = ""; 
    if(xmlreq.readystate == 4)  
    {   
        // 数据处理完毕之后，将loading层再隐藏掉
        loadingdiv.style.display = "none"; 
        //alert(xmlreq.responsetext);
        //document.getelementbyid(‘content2‘).innerhtml = xmlreq.responsetext;   
        // 输出处理结果
        runxml(xmlreq.responsetext);
    }   
}   

就是如此简单！

下面再附另一段参考代码：

xmlhttp.onreadystatechange = function(){
    //displace loading status
    var loadingdiv = document.getelementbyid("loading"); // get the div
    loadingdiv.innerhtml = "loading..."; // insert tip information
    loadingdiv.style.right = "0"; // set position, the distance to the right border of current document is 0px
    loadingdiv.style.top = "0"; // set position, the distance to the top border of current document is 0px
    loadingdiv.style.display = ""; // display the div
    //load completed
    if(xmlhttp.readystate == 4) {
        //hide loading status
        loadingdiv.style.display = "none"; // after completed, hidden the div again
        loadingdiv.innerhtml = ""; // empty the tip information
        //process response
        if(xmlhttp.status == 200) {
            var str = xmlhttp.responsetext;
            /* do something here ! */
        }
        else
        alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);
    }
}

转载:http://www.nowamagic.net/librarys/veda/detail/564