Redirect in the middle of an ajax request

Question

I have a site where users can publish links. Users fill a form with 2 fields:

• Title
• URL

When the user clicks "submit" I have a crawler that looks for an image of the link provided and makes a thumbnail.

The problem is that the crawler usually takes about 5-10 seconds to finish loading and cropping the thumb.

I thought I could do an ajax call like this. As you can see, when the user submits a link first we see if its valid (first ajax call) then if succesful we do another ajax call to try to find and save the image of this link.

My idea was to do that while I move the user to the links.php page, however, I find that if I do it like this the AJAX call breaks and the function in save_image.php doesn't run.

What can I do to avoid making my users wait for the save_image.php process? I need this process to run, but I don't need any data returned.

$.ajax({
                    url: 'publish/submit_link.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        link            : link,
                        title           : title,
                    },
                    success: function (data) {
                        if (data) 
                        {
                            $.ajax({
                                url: 'publish/save_image.php',                                      type: 'POST',
                                data: {
                                        id              : data.id,
                                        type            : data.type,
                                    url             : url,
                                        csrf_test_name  : csrf
                                }
                            });
                        }

                        //THIS NEXT LINE BREAKS SECOND AJAX CALL
                        window.location = 'links.php';

                    }   
});

Thanks in advance!

SUMMING UP: I want the user to submit a link and redirect the user to the links page while the thumbnail for that link is being generated. I don't want to show the thumbnail to the user.

Answer 1

The AJAX request seems to fail, because when you navigate away, the user request is aborted. Because of that, the execution of save_image.php is interrupted.

You can use PHP's ignore_user_abort to force the PHP process to continue in the background. Put it at the top of save_image.php:

<?php
    ignore_user_abort(true);

    // ... save image, etc.
?>

For this to work, you have to send (and flush) some output to the client:

PHP will not detect that the user has aborted the connection until an attempt is made to send information to the client. Simply using an echo statement does not guarantee that information is sent, see flush().

Any output should work (e.g. "OK"). This might be a bit of a challenge considering you're using a framework, but it shouldn't be impossible. This might work: Flushing with CodeIgniter

You can read more about PHP connection handling here.

Answer 2

force user to fill first the url and then the title, when user go to title field start crawl data, till finish the title and press sumbit you will gain some time and make the proccess apparently faster.

Answer 3

Why use XHR at all if you don't need the data returned? Just let your form submit the link to links.php and let it save the image there!

Answer 4

to understand your problem, we need to understand the working of javascript

your code is as follows

$.ajax({
                    url: 'publish/submit_link.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        link            : link,
                        title           : title,
                    },
                    success: function (data) {
                        if (data) 
                        {
                            $.ajax({
                                url: 'publish/save_image.php',                                      type: 'POST',
                                data: {
                                        id              : data.id,
                                        type            : data.type,
                                    url             : url,
                                        csrf_test_name  : csrf
                                }
                            });
                        }

                        //THIS NEXT LINE BREAKS SECOND AJAX CALL
                        window.location = 'links.php';

                    }   
});

from the above i can say that as soon as ajax request is made, java script executes the second line regardless of the response.

we can take the following example

$.ajax({
                    url: 'publish/submit_link.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        link            : link,
                        title           : title,
                    },
                    success: function (data) 
                    {
                         console.log(data);
                    }
});

for(var i = 0; i < 15000000; i++)
{
      console.log(i);
}

you may see the output as follows

1
2
3
.
.
.
1000
data//response of ajax
.
.
14999999

so to avoid that you can use either jQuery.when() our ajax success function.

Hopefully this will help you