How to prevent from having redundant same ajax request during processing the same one

[Moderns]

Hello,

Assume we have one button that fires ajax request, ajax call will talk 15 seconds to load the results.

Assume the user clicked on that button first time and waited for 5 seconds, then he/she clicked again. In this case the page will be loaded two times. i.e. first time will be loaded and after finishing the first ajax request, the second one will start!

Is there any way to cancel the second ajax request(both first and second ajax calls come from first button) while having the first one in process?

The problem, if the user clicks more than one time on the same button, then a queue of ajax calls will be executed and the user will wait for long to process all of them. So I need to cancel similar requests that come after first request.

NOTE: I do NOT want to use the Jquery.

Thanks.

[Moderns]

I am not looking for a solution to disable the button because the user might click on a link <a href='javascript:function()'>link</a>

Also the user might click on others links, so it's not good solution.

I need the system to cancel any ajax request other than the running ajax process.

Please advise and many thanks.

[pritaeas]

It doesn't make sense to use ajax then. It is specifically designed for this purpose. You can use regular (synchronous) functions to do your job.

[Moderns]

It doesn't make sense to use ajax then. It is specifically designed for this purpose. You can use regular (synchronous) functions to do your job.

Thanks for your inputs, but what do you mean by (synchronous) function exactly?

[pritaeas]

Just normal javascript functions. No ajax.

[Moderns]

Just normal javascript functions. No ajax.

But I need to load full PHP page that contains database, normal javascript will not work out to access the PHP file. Please advise. Thanks.

[pritaeas]

Maybe you can create one function for your ajax requests, neglecting others if a 'processing' variable is set.

[samaru]

Assume we have one button that fires ajax request

I am not looking for a solution to disable the button because the user might click on a link <a href='javascript:function()'>link</a>

Also the user might click on others links, so it's not good solution.

Not sure I follow if you first say that the request is only triggered on button press and then you say that also a link can trigger it?

In any case, I'll assume that you want only ONE specific AJAX request per user, regardless of how they requested it, whether it's a link, button, hover, etc.

The safest way would be to mark the user with a sessionid and put it in a temp table queue in your db. If the user does another request for the same process, it checks if that sessionid task is completed, and if not, don't fire it off again. Probably even better would be if rather than you use sessionid, you use the username (if they have any), that way it covers the case where if the same user account is being used on two different browsers/machines.

Also, for the sake of usability, I would disable anything that would trigger the AJAX request. If it was a link, I would disable its default even handler, and enable it again when the AJAX request is complete.

[Moderns]

Not sure I follow if you first say that the request is only triggered on button press and then you say that also a link can trigger it?

In any case, I'll assume that you want only ONE specific AJAX request per user, regardless of how they requested it, whether it's a link, button, hover, etc.

The safest way would be to mark the user with a sessionid and put it in a temp table queue in your db. If the user does another request for the same process, it checks if that sessionid task is completed, and if not, don't fire it off again. Probably even better would be if rather than you use sessionid, you use the username (if they have any), that way it covers the case where if the same user account is being used on two different browsers/machines.

Also, for the sake of usability, I would disable anything that would trigger the AJAX request. If it was a link, I would disable its default even handler, and enable it again when the AJAX request is complete.

Thanks for your suggestion, I liked your solutions BUT:
If I will mark the session_id for the user that initialized AJAX request in temp table in database, then I have to create function which will use AJAX to set and reset the value of the user session in the database whenever that user fires AJAX call. LIKE:

onclick=javascript:CheckAJAXSession($user_session,$page_name)

function CheckAJAXSession(user_session){
//AJAX call to PHP XML script to check if the user_session exists in DB
if(!result)
ExecuteAJAX(page_name);

}

function ExecuteAJAX(page_name){
//if done, then reset the value in table.
}

The problem it might take long time what do you think? But it's better than disabling the controls in the page because it will prevent from using different browsers at same time!!

Also one more quick question, how can I disable a link??

Thanks.

[Moderns]

Maybe you can create one function for your ajax requests, neglecting others if a 'processing' variable is set.

But how can you differentiate the session of the requester?? I need to prevent having same ajax request for each user session, not to have only ajax call on whole server level. Please more details and thanks.

[samaru]

onclick=javascript:CheckAJAXSession($user_session,$page_name)

function CheckAJAXSession(user_session){
//AJAX call to PHP XML script to check if the user_session exists in DB
if(!result)
ExecuteAJAX(page_name);

}

function ExecuteAJAX(page_name){
//if done, then reset the value in table.
}

Yeah, that would be the idea, however, you don't have to make an extra AJAX request. You can just bundle it all under one request. So:

onclick="AjaxRequest(page_name)"
.
.

Depending on how you built your app, you probably have to pass in the page_name if you're using one PHP file to do all your AJAX processing (and you need to know which page requested it). I'm guessing you don't need to pass in a user_session into that CheckAJAXSession JS function since the session id is on the server's memory... unless that is, cookies is turned off on the browser.

The problem it might take long time what do you think?

That's OK. Hey, sometimes things like generating a report or number crunching can take long. Have a label that says it may take a while. For a better experience, when the AJAX handler is fired, show a simple progress bar (an AJAX spinner).

Also one more quick question, how can I disable a link??

You have to turn off the default click event handler, in this case it's redirecting to a new page. The simplest way is to just return false when there's a click:

onclick="return false"

or

onclick="linkClick()"

function linkClick()
{
  // whatever code you want here.
  
  // return false // <-- overriding default event
}

A safer way to do it is this: http://javascript.about.com/library/bldisdef.htm

[Moderns]

Yeah, that would be the idea, however, you don't have to make an extra AJAX request. You can just bundle it all under one request. So:

onclick="AjaxRequest(page_name)"
.
.

Depending on how you built your app, you probably have to pass in the page_name if you're using one PHP file to do all your AJAX processing (and you need to know which page requested it). I'm guessing you don't need to pass in a user_session into that CheckAJAXSession JS function since the session id is on the server's memory... unless that is, cookies is turned off on the browser.

That's OK. Hey, sometimes things like generating a report or number crunching can take long. Have a label that says it may take a while. For a better experience, when the AJAX handler is fired, show a simple progress bar (an AJAX spinner).

You have to turn off the default click event handler, in this case it's redirecting to a new page. The simplest way is to just return false when there's a click:

onclick="return false"

or

onclick="linkClick()"

function linkClick()
{
  // whatever code you want here.
  
  // return false // <-- overriding default event
}

A safer way to do it is this: http://javascript.about.com/library/bldisdef.htm

Thanks for your clear answer, but, what do you mean by: "I'm guessing you don't need to pass in a user_session into that CheckAJAXSession JS function since the session id is on the server's memory... unless that is, cookies is turned off on the browser." ??? What's the value that will be stored in the database? What's the server memory? Please advise.

Thanks.

[hielo]

read comments in code below:

//queue that keeps track of which requests are currently active
var ajaxRequest=[];

//this function is where you would be making your ajax request
function requestPage(url)
{
  //now see if url is within ajaxRequest. If so, then just return
  var tempQ = ',' + ajaxRequest.join(",") + ',';
  if( tempQ.indexOf(url) > -1 )
  {
   return false;
  }

  //if you make it here, there is no ongoing request to the specified url
  //so be sure to add it to the queue
  ajaxRequest[ajaxRequest.length]=url;

  /* here is the rest of your code that is supposed to emit the ajax request
     I expect you to have an onreadystatechange function somewhere here. You need to make sure you remove the url from the queue when the request has completed - ex: UNSTESTED */
  http.onreadystatechange=function(){
    if( http.readystate==4 )
    {
       if( http.status==200 )
       {
          //request was successful
          ...
       }
       tempQ = tempQ.replace(',' + url + ',' , '');
       ajaxRequest=tempQ.substring(1,tempQ.length-1).split(",");
    }
  };
}

[Moderns]

read comments in code below:

//queue that keeps track of which requests are currently active
var ajaxRequest=[];

//this function is where you would be making your ajax request
function requestPage(url)
{
  //now see if url is within ajaxRequest. If so, then just return
  var tempQ = ',' + ajaxRequest.join(",") + ',';
  if( tempQ.indexOf(url) > -1 )
  {
   return false;
  }

  //if you make it here, there is no ongoing request to the specified url
  //so be sure to add it to the queue
  ajaxRequest[ajaxRequest.length]=url;

  /* here is the rest of your code that is supposed to emit the ajax request
     I expect you to have an onreadystatechange function somewhere here. You need to make sure you remove the url from the queue when the request has completed - ex: UNSTESTED */
  http.onreadystatechange=function(){
    if( http.readystate==4 )
    {
       if( http.status==200 )
       {
          //request was successful
          ...
       }
       tempQ = tempQ.replace(',' + url + ',' , '');
       ajaxRequest=tempQ.substring(1,tempQ.length-1).split(",");
    }
  };
}

Thanks a lot!! It's very smart code to keep track of the page that initiates AJAX request!