Page Navigation while Ajax call in progress - ajax

Question

In our application we are making an ajax call on the final submit button and displaying a modal dialog with progress bar in it. After successful processing the dialog will be updated with the response. Now my requirement is to change the modal dialog to non dialog and allow the user to navigate to another page while the ajax call gets finished.
What are the implications if i change the modal window to non modal window. Will the ajax call still continues or will it get aborted. if it continues will it have reference to the dialog to update it with the response.
Please let me know your views.

Answer 1

Whatever you do while your AJAX call is being made in terms of maniuplating the view, will not impact the AJAX call itself. As long as you let the AJAX call complete and show the changes on the callback, you will be okay.
Needless to say, you cannot change the actual page your on but if I understand you right, your not doing that anyway.

Answer 2

A simple experiment to try the idea
I've written a simple example where I have a HTML page with a link to another page. When I click that link, it sends an AJAX request to a PHP script that simulates a long process (wait 10 seconds) and then changes a variable in the session. The target page then echoes that variable.
When I click that link, the page starts a long AJAX request but it also navigates to another page. The result is that the AJAX request is cancelled and the other page prints "nothing".
Here's the server.php:
session_start();
$x = isset($_SESSION['x']) ? $_SESSION['x'] : 0;
sleep(10); /* simulates long process */
$_SESSION['x'] = ++$x;
echo $x;
index.html (the significant portion):
Click here
The AJAX request in index.html (inside a <script> tag):
document.querySelector('a').onclick = function(e) {
var xhr = new XMLHttpRequest();
xhr.onload = function(e) {
console.log(JSON.parse(xhr.responseText));
}
xhr.open('POST', 'server.php');
xhr.send();
}
Possible solution
If your request is time consuming on the server only, create an endpoint that returns the progress of that process, then add a javascript code in all your pages to consume this endpoint and show the progress to your user.