Can i refresh a page while my ajax is running without killing it?

Question

I have a web page which has a link that calls a java script.

In that java script i have a ajax call that calls a function in my library file that executes a stored procedure.

After running the SP the control comes back to my java script as the ajax is asynchronous .

I have tried to refresh my page while that call is running in the background. But when i do that the process get killed .

Is there any way i can refresh the page without killing the process?

Answer 1

You can simply use

$.ajax({
    success: function(){
          // Do stuff once finished.                
    },
    error: function (){
          // Do stuff if the server returns an error.
    },
    complete: function (){
          // Do stuff always after the request (after success & error ran)
    }
});

Or you could use the method chaining

&.ajax({...}).done(function(){});

More information can be found in the jQuery docs.

Final note : Please be aware that it's no good to just code the happy case. You cannot force the server to work successfully. What if the server runs into an OutOfMemoryException ? Please always so error handling if an component comes in which you cannot control (usually user but in this case the server).

Answer 2

If you interrupt the browser making a request by refreshing the url it will stop what it was doing and reload.

Depending on the amount of processing your server needs to get through to return a response to your ajax call, you could stop the server completing it's work in the middle of its operations which could have severe effects if you're dealing with databases and the like.

It's important to make sure all the requests you make can be completed properly, with any errors handled efficiently, so you don't run into any problems in the future.

With an ajax call, you have the benefit of being able to take action on a successful or unsuccessful request using the success and error values in the ajax object. Eg

$.ajax({
   url: "www.example.com/get",
   type: "GET",
   success: function() {
      alert("Success!");
   },
   error: function() {
      alert("Error!");
   }
});

Edit: Based on your previous comment that I missed regarding your server process taking a long time to complete, I would say that whatever you need to do on the server should be done separately from the user interaction. If you need to write a lot of database rows, upload files, send emails and whatever else you might need, you should do only what is absolutely necessary at the time and queue everything else up to batch process on a scheduled task directly on the server, independently of the user's browser. An ajax call should only be used to make requests that will execute in a short amount of time; mainly for safety of your application but equally to streamline user experience.