Declare jQuery AJAX call for execution later

Question

I could declare a jQuery AJAX call this way:

var foo = $.ajax({ ... });

But that would actually perform the request right then and there, correct?

How can I declare the AJAX call without executing it initially, then call it later? Something like:

var foo = $.ajax({ ... });
// some stuff in between
foo.execute();

Thanks.

EDIT Little more info: What I really want to do is have a function that constructs an AJAX request based on parameters, returns it to the calling code, and have the calling code manage its state (i.e. be able to execute it, abort it, etc.). So rather than simply declare the settings for the AJAX call, I'd like to have in-hand the actual XHR object that the $.ajax returns, only with the ability to execute it, abort it, etc.

Answer 1

$.ajax returns promise object, so we can create function:

function prepareAjax(properties) {
  var defer = $.Deferred();

  var promise = defer.promise();

  return $.extend(promise, {
    execute: function () {
      return $.ajax(properties).then(defer.resolve.bind(defer), defer.reject.bind(defer));
    }
  });
}

Call this function, for example:

var xhr = prepareAjax({ method: 'get', url: 'https://localhost:8001' })

Write result to console:

xhr.then(function (result) { console.log(result) });

And execute postponed:

xhr.execute()

Answer 2

You may set up your request and then execute it later

 var ajaxSettings={};
 //....do other things
  $.ajax(ajaxSettings);//then call ajax 

Or may run it synchronously by setting the ajax as this

   jQuery.ajaxSetup({async:false});

Answer 3

If I got this correct, you want something like

var foo = $.ajax({ ... });
// some stuff in between
result = foo.execute(); 
// do something based on result

This, however wont work, because ajax calls are, by definition, being processed assynchronosly. You could use a function taking a callback and pass it to the ajax success handler though.

function myAjaxThingy(callback) {
    $.ajax({...},
    success: function(a){callback.call(a)} )
}

// some stuff

myAjaxThingy(function(a) {// do whatever based on a, or not...})

I am not sure if I really understood what you needed though.

EDIT: Ok, I think I understood now! All you need to do is define a function you call later on...

function myAjaxThingy() {$.ajax({...})}
// something, something, dark side...
myAjaxThingy() // will execute it

Answer 4

Try

var foo = function foo(settings) {
  // if settings passed , extend `$.ajaxSettings`
  this.settings = $.extend({}, $.ajaxSettings, settings);
  this.ajax = $.ajax;
  this.promise = void 0;
  this.execute = function execute() {
    // set `this.promise` to `this.ajax`
    this.promise = this.ajax.call($, this.settings);     
    // return `$.ajax` jQuery promise object
    return this.promise
  };
  // if `this.promise` is defined , call `.abort()`
  // on `this.promise`: `this.ajax` `$.ajax()`
  this.abort = this.promise ? this.promise.abort() : this.promise; 
};

var url = "https://gist.githubusercontent.com/"
          + "guest271314/6a76aa9d2921350c9d53/raw/"
          + "49fbc054731540fa68b565e398d3574fde7366e9/"
          + "abc.txt";

var request1 = new foo({"url":url});

request1.execute()
.then(function(data, textStatus, jqxhr) {
  console.log(data, textStatus, jqxhr)
}, function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});

var request2 = new foo({"url":url});

request2.execute().abort()
.then(function(data, textStatus, jqxhr) {
  console.log(data, textStatus, jqxhr)
}, function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>