ajax request gets blocked until the server return the response

Question

i am sending ajax request from html page using jquery to send the bulk emails and fetch the data from the server.

here is the code to send request for bulk mail

var sendReq =   $.ajax({
                type: 'post',
                data: "leftID="+JSON.stringify(leftID)+"&rightID="+JSON.stringify(rightID)+"&mode="+mode,
                dataType: 'json',
                url:"bulk.php"


        });

        sendReq.done(function( data ) {


                    $("#bms-ack").html(data.status);
                    $("#bms-ack").fadeIn('slow');
                    $("#bms-ack").fadeOut(6000);

                    console.log(data);
                    console.log("success");

        });

        sendReq.fail(function(jqXHR, data){


                    $("#bms-ack").html(data.status);
                    $("#bms-ack").fadeIn('slow');
                    $("#bms-ack").fadeOut(6000);


                    console.log("fail");


        });

now the issue is when i send a request to php page it will send mails and respond with success message.

as the php is returning the response back to the client so will this ajax request going to get blocked ? because when i send another request from jqtable to fetch new data it takes time until the previous request of ajax to send bulk mail hans't finished. and eventually my jqtable keeps loading.

how do i get rid of blocking request , should i remove returning success message from php and if i do so then how the user will know that the request has been submitted ?

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

If I understand you correctly your issue is that you can't fire another javascript call while the first one is running? That's because Javascript is single-threaded in most browser implementations.

Some light reading:Is JavaScript guaranteed to be single-threaded?

edited May 23 '17 at 12:03

Community

1
1

answered May 15 '13 at 08:10

emilrising

21
1

i am able to fire the request even i can see it in firebug but it gets populated until the first one gets finished – Hunt May 15 '13 at 10:02

Federico J. · Answer 2 · 2013-05-15T21:58:14.820

As far as I know, if you send an AJAX petition, is exactly the same as requiring a new page in a non-asynchronous way: As long as the page is not sent to the browser, you keep waiting for the result, and any other request is just a refresh.

So, if you want to achieve a "non-blocking" AJAX way, send the AJAX petition to "differents" URLs. I mean:

url:"bulk.php" => Change to url: "bulk.php?v=3"

the query string is just a foo, and it's only to change the URL you're calling.

When you'll make your AJAX petitions, just add a query string for every petition you're doing (with a ?v=X is more than enough, where X could be even one of the data you're retrieving, the id of the row, whatever...), and it'll work like a charm, as the browser think is a different petition and don't prevent you (block you) to retrieve the values the PHP file is generating (although you know the values are different because you're sending different data, :D)

Update

Uhm... It should allow you keep working. Just for checking, could you try the next piece of code and tell me what happens?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                for(var $i=0; $i<5; $i++) {
                    $.ajax({
                        type: 'post',
                        url:"ajax.php?v="+$i,
                        success: function(data) {
                            console.log(data)
                        }

                    });
                    console.log('Browser: ' + $i);
                }
            });
        </script>
    </head>
    <body>
        AJAX TEST
    </body>
</html>

AJAX File: (ajax.php)

<?php
sleep(5);
echo 'WAAAAAAAA';

To me, it sends 5 AJAX calls to the server at the same time (not blocking behaviour) almost immediately. I think that this is exactly what you want to achieve, could you test your browser and tell me if you're receiving the same? And by the way, could you post an image of the browser behaviour with the AJAX posts?

AJAX Test Result

i tried your approach by appending one extra parameter and the value is the `timestamp` so every time it will get a new value , but still the problem remains same — Hunt, May 15 '13 at 15:28

ajax request gets blocked until the server return the response

2 Answers2

Update