CODEWITHSUNDEEP
jqueryasp-classic
Gopinath Koothaperumal
Gopinath Koothaperumal

Reputation: 398

How to make an asynchronous request

Can someone point me in the right direction regarding my problem

  1. I have a system that runs yearly billing.
  2. The current restriction is once the user runs the billing process he/she has to stay in the page until the billing completes.
  3. I need to do this : Once the billing is still processing, i get to navigate to different pages.I get a notification once it's complete.

How do i do this? Any input will be helpful. I just need ideas to start this..

Upvotes: 0

Views: 46

Answers (2)

jfriend00
jfriend00

Reputation: 707446

To have the ability to navigate to other pages and get a notification in the common header requires a little more complicated design. Here's the basic concept:

  1. Have your server make sure that a unique cookie exists in the browser anytime the user hits a page where your request can be started. This cookie will be used to track the user so you know which billing transaction goes with which browser. If there is already a login cookie, you can also use that.

  2. Use an asynchronous Ajax call (they are async by default) to submit the request. In jQuery, you can do this with $.ajax() or $.post() or $.get() depending upon exactly which options you want to use. When the request is received, the server needs to grab the unique cookie that identifies the user and save it as part of the transaction processing so it knows which browser to notify about the completion.

  3. Once the request has been submitted, it will proceed to completion on the server regardless of what the user does.

Now, you need to set up a way to get notified of the completion in your common header. There are a couple different ways you could do that:

  1. Some code in the common header can set up a webSocket connection to the server on every web page in the site that has this common header. This webSocket will allow the server to send a notification directly to the browser the moment a billing transaction that matches that user's cookie completes. Upon connection of the webSocket on the server, it will need to record the connected socket and the matching cookie so that it knows which user goes with which webSocket. Then, when the billing transaction is complete, it can find the webSocket that has the appropriate cookie and send it a notification. The browser will receive the notification via the webSocket and can then show whatever visual notification it wants.

  2. Instead of webSockets, you can set a transaction-pending cookie in the browser and give it a relatively short expiration (perhaps 15 minutes) when the transaction is set. Then, in the current web page and in any other pages on your site, you check to see if that transaction-pending cookie exists and if it does, you poll the server using an Ajax call on a recurring timer (perhaps every couple minutes) asking the server if the transaction with your cookie or user ID is done yet. When the server reports it is done, you show whatever visual notification you wanted to show. You will need this polling code in some common place in all your site's web page (probably in the common header).

  3. Require the user to refresh their page or navigate to a new page in order to see the notification. For this method, you will just have your server keep track of any pending notifications it has for a given user and whenever that user requests a page, your server can insert the notification into the common header when it renders the page. This is the least desirable implementation from the user's point of view because they are not proactively notified unless they happen to be navigating the site at the right time (they have to manually refresh for a notification).

Upvotes: 2

justinpinili
justinpinili

Reputation: 894

You can take advantage of AJAX requests with jQuery. Refer to the documentation below.

Once you perform a successful AJAX request, there is a .done() function that takes a callback and will run upon completion... there you can execute the following line: 

window.location.href='http://www.example.com';

This will allow you to navigate to the entered URL. The following is an assumption that you are doing a GET request.

Example solution:

$.ajax({
  url: "test.html",
}).done(function() {
  window.location.href='http://www.example.com';
});

jQuery.ajax() | jQuery API Documentation

Upvotes: 0

Related Questions