CODEWITHSUNDEEP
javascriptjqueryajax
Jorg Ancrath
Jorg Ancrath

Reputation: 1447

Sending an AJAX call before all other AJAX calls

I need to check for a condition and run an AJAX call before sending other AJAX calls on my web app.

I was thinking about putting this AJAX call in a beforeSend on ajaxSetup with async: false (to prevent my initial call from running before this one has completed).

Something like this:

//I set an event that fires:
$.ajax({
    type: "GET",
    url: my_url,
    beforeSend: function() {
        //do something, like show a spinner loader gif
    }
});

//Somehwere in my app I also have:
$.ajaxSetup({
    beforeSend: function() {
        if(x===1){
            $.ajax({
                type: "GET",
                url: my_url/fetch_something,
                async:false
            });
        }
    }
});

Will my beforeSend on the first AJAX call overrun the one in the ajaxSetup? Is there a way to approach this better?

Better idea of my app:

I have a lot of Ajax calls through the app, each call sends a security hash on the headers to validate the user, these hashes have a time limit as well (both hash and time limit are saved in localStorage)

What I want from ajax setup (and the condition in it) is to check for the time limit - if time_limit < current_time than run an ajax call to refresh the users hash.

This isn't an exercise for 1 or 2 calls, I literally have 20+ growing Ajax calls on my app that make use of the users hash and it's very impractical to make this check in every single one of them.

Upvotes: 1

Views: 641

Answers (3)

Zach Leighton
Zach Leighton

Reputation: 1941

UPDATED:

Have one method on an interval that sets up the 'session'/local-storage

var refreshing = false;
var intervalID;
$(document).ready(function(e){
   var delay = 1234;
   intervalID = window.setInterval(setupInterval, delay);
});

function setupInterval(){
  refreshing = true;
  $.ajax(URL).done(function(r) { //do stuff
    setupStorage(r);
    refreshing = false;
  });
}
function setupStorage(info){
  //setup whatever here
}

OLD:

Could you use some logic in your ready function to gate what you need to do?

So basically call one ajax call -> if false, just schedule your latter methods, otherwise run the setup one and on completion schedule the latter method.

Some pseudo-code:

var refresh = false;
$(document).ready(function(e){
   $.ajax(URL).done( function(r) { 
       if(r) {
        routeOne();
       } else {
        latter();
       }
     });
});

function routeOne(){
  $.ajax(URL).done(function(r) { //do stuff
    latter();
  });
}
function latter(){
  //All other ajax calls
}

I'll put some more thought into this let me finish my coffee first...

EDIT:

Based on your updated description could it be possible for you to schedule a setInterval to run the checking method/hash update on the time interval that you need, and is the time interval on your server static or variable? Facebook does this with a heartbeat, I've used this type of logic with some 'locking' functionality in a web-app. If you schedule the interval properly it should not interrupt any other ajax calls.

Upvotes: 2

Jordan Sitkin
Jordan Sitkin

Reputation: 2343

Try overriding $.ajax to make a "pre-call" before passing in your given query options:

var oldAjax = $.ajax;

$.ajax = function() {

  var args = arguments;

  oldAjax({
    type: "GET",
    url: "/echo/html/",
    success: function(result){
      // do something here to check result
      // if result is good, do the request:
      return oldAjax.apply($, args);
      // if its bad, handle the error
    }
  });

}

Here's a fiddle to demonstrate: http://jsfiddle.net/NF76U/

Upvotes: 1

steo
steo

Reputation: 4656

I suggest the use of .done() ( $.Deferred object)

function AjaxCall() {
 return //code of your ajax without async:false
}

function anotherAjaxCall{
 return //code of you ajax call
}


AjaxCall.done(anotherAjaxCall);

Avoid using async:false it's a deprecated practice and it stucks browsers

Upvotes: 0

Related Questions