当通过Ajax发送请求时，如何停止挂起页面

问题描述：

I am facing a serious issue... Whenever i use Ajax to send a request and get an response my browser got hanged.. and show no loading etc...

But when i response is retrieved from the Ajax then browser and page again start working...

Below is the code that i used.....

function ShowContestStatus(contestID)
{
    $("#showContestDetails").html('<div class="loadercontest"><img src="assets/images/loading.gif">Loading Contest....</div>');

    $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', true);
    $.ajax({
            url:"process/processMyContest.php",
            type:'POST',
            cache:false,
            async:false,
            data : {act : 'showcontest', cid : contestID },
            success:function(result)
            { 
                $("#showContestDetails").html(result);
                $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', false);
            }
        });
    }

Please help me on this... i want to get the same response as on other websites when you send a request and they are using ajax the page neither hanged and also each processing like scrolling etc is visible ......

So please suggest me good ideas.... so i can get rid of it and make my ajax smooth for page without effecting and irritate the other person by hanged...

Thanks in advance...:)

我面临一个严重的问题......每当我使用Ajax发送请求并获得响应时，我的浏览器得到了 hanged ..并显示没有加载等... p>

但是当我从Ajax检索到响应时，浏览器和页面再次开始工作...... p> 下面是我使用的代码..... p>

  function ShowContestStatus（contestID）
 {
 $（“＃showContestDetails”）。html（'＆lt  ; div class =“loadercontest”＆gt;＆lt; img src =“assets / images / loading.gif”＆gt;加载比赛....＆lt; / div＆gt;'）; 
 
 $（“＃RadioGroup1_0，＃  RadioGroup1_1，＃RadioGroup1_2“）。prop（'disabled'，true）; 
 $ .ajax（{
 url：”process / processMyContest.php“，
 type：'POST'，
 cache：false，\  n async：false，
 data：{act：'showcontest'，cid：contestID}，
 success：function（result）
 {
 $（“＃showContestDetails”）。html（result）; 
 $  （“＃RadioGroup1_0，＃RadioGroup1_1，＃RadioGro  up1_2“）。prop（'disabled'，false）; 
} 
}）; 
} 
  code>  pre> 
 
 请帮助我...... 想要在发送请求时获得与其他网站相同的响应，并且他们正在使用ajax，页面既不会被挂起，也可以看到滚动等每个处理......  p> 
 
 
 所以请建议我好的想法....所以我可以摆脱它，让我的ajax顺利换页，不会影响和刺激对方被绞死......  p> 
 
 
提前谢谢 ......：） p> 
  div>

答

The problem is async:false... Since your ajax request is synchronous the script execution will wait for the request to complete to continue..

Since browser uses a single threaded execution pattern(either it will execute script or repaint or wait for user events at a time- not all at the same time), your browser tab will stop listening to user(so it will look like it is hanged)

function ShowContestStatus(contestID) {
    $("#showContestDetails").html('<div class="loadercontest"><img src="assets/images/loading.gif">Loading Contest....</div>');

    $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', true);
    $.ajax({
        url: "process/processMyContest.php",
        type: 'POST',
        cache: false,
        //remove async: false,
        data: {
            act: 'showcontest',
            cid: contestID
        },
        success: function (result) {
            $("#showContestDetails").html(result);
            $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', false);
        }
    });
}

Ajax.async

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

答

Make async:true for making the browser listen other events while running the ajax code.

当通过Ajax发送请求时，如何停止挂起页面

相关推荐