jQuery.ajax()S2C Home « Ajax « jQuery.ajax()

• <<    .serializeArray()
• jQuery.ajaxPrefilter()     >>

Asynchronous HTTP (Ajax) request.

Description

The jQuery.ajax() Ajax method, allows us to perform an asynchronous HTTP (Ajax) request.

Shorthand version $.ajax()

• The jQuery.ajax() method underpins any Ajax requests sent by jQuery and comes with a plethora of settings, giving us a great deal of flexibility when making our requests. There are other jQuery Ajax methods such as jQuery.get() and jQuery.post() which are easier to use for general purpose requests.
• Browsers operate the 'same origin policy', which means a request can not successfully retrieve data from a different domain, subdomain, or protocol. jQuery 'Ajax' requests are subject to this security restriction, the exceptions being requests made with a datatype of 'script' or 'jsonp'.
• The jQuery.ajax() method returns a jqXHR object which is a superset of the browser's native XMLHttpRequest object. The jqXHR object implements the Promise interface, giving it all the properties, methods, and behavior of a Promise. See the lesson on the Deferred object for details of this. For standardization with the the Deferred object, the jqXHR object also provides done(), fail() and always() methods. These methods take a function argument that is called when the jQuery.ajax() request terminates and the function receives the same arguments as the same-named success(), error() and complete() setting callbacks respectively. This allows assignment of multiple callbacks for a single request as well as assigning callbacks after the request has completed. For completed requests, the callback is fired immediately.
• It should be noted that success(), error() and complete() callbacks were deprecated from use on request completion from jQuery 1.8 and removed in jQuery 3.0. This is for completion processing only and the Ajax settings will still have these values. Best practice is to use done(), fail() and always() methods on request completion to future proof code.
• A jqXHR object will expose the following properties and methods for backward compatibility with the XMLHttpRequest object:

Syntax

Parameters

Return

A Promise object which is just a copy of a Deferred object without any notify/resolve/reject methods.

• A Promise object provides the following subset of methods of the Deferred object: jQuery.ajax(), deferred.done(), deferred.fail(), deferred.always(), deferred.pipe() and deferred.progress() methods or determines the state through the deferred.state() method.

jQuery.ajax( url [, settings] ) ExamplesTop

Perform an asynchronous HTTP (Ajax) request to be sent to the specified url, optionally passing some request settings.

In the example below when we press the left button the first time, we create an Ajax request, passing the datatype along with the error() callback function. For this example the request will fail as the 'get11.js' asset does not exist. Therefore the error() callback setting activates and outputs a message.

In the example below when we press the right button the first time, we create an Ajax request, passing the datatype along with the success() callback function. For this example the request will succeed as the 'get1.js' asset does exist. Therefore the script for the 'get1.js' asset executes as we have passed across a datatype of 'script'. After this the success() callback setting activates and outputs a message telling us the request succeeded.

$(function(){
  $('#btn1').one('click', function(){
    $.ajax( "../js/get11.js", {
      dataType: "script",
      error: function() { 
        $('#div1').append('The request failed! <br><br>');
      }
    });
  });
  $('#btn2').one('click', function(){
    $.ajax( "../js/get1.js", {
      dataType: "script",
      success: function() { 
        $('#div1').append('The request was a sucesss! <br><br>');
      }
    });
  });
});

/*
 * The code for the external Javascript file called from $.ajax() (url: "../js/get1.js")
 * is shown below.
 */
$(function(){
  var someText = 'Passing some text. ';
  $('#div1').append('Message from get1.js: ' + someText + '<br>');
});

jQuery.ajax( settings ) ExamplesTop

Perform an asynchronous HTTP (Ajax) request, optionally passing some request settings.

In the example below when we press the left button the first time, we create an Ajax request for a 'GET', passing some settings across. The settings include the url, the type and datatype along with some callback functions which output some messages. The beforeSend() callback setting always gets called and we output a message about the asset we are calling. For this example the request will fail as the 'get22.js' asset does not exist. Therefore the error() callback setting activates and outputs a message telling us the request failed. The complete() callback setting always fires regardless of success or failure and so also outputs a message.

In the example below when we press the right button the first time, we create an Ajax request for a 'GET', passing some settings across. The settings include the url, the type and datatype along with some callback functions which output some messages. The beforeSend() callback setting always gets called and we output a message about the asset we are calling. For this example the request will succeed as the 'get2.js' asset does exist. Therefore the script for the 'get1.js' asset executes as we have passed across a datatype of 'script'. After this the success() callback setting activates and outputs a message telling us the request succeeded. The complete() callback setting always fires regardless of success or failure and so also outputs a message.

$(function(){
  $('#btn3').one('click', function(){
    $.ajax({
      beforeSend: function() { 
        $('#div2').append('About to call the get22.js asset <br>');
      },
      type: "GET",
      url: "../js/get22.js",
      dataType: "script",
      success: function() { 
        $('#div2').append('The request was a sucesss! <br>');
      },
      error: function() { 
        $('#div2').append('The request failed! <br>');
      },
      complete: function() { 
        $('#div2').append('The request completed! <br><br>');
      }
    });
  });
  $('#btn4').one('click', function(){
    $.ajax({
      beforeSend: function() { 
        $('#div2').append('About to call the get2.js asset <br>');
      },
      type: "GET",
      url: "../js/get2.js",
      dataType: "script",
      success: function() { 
        $('#div2').append('The request was a sucesss! <br>');
      },
      error: function() { 
        $('#div2').append('The request failed! <br>');
      },
      complete: function() { 
        $('#div2').append('The request completed! <br><br>');
      }
    });
  });
});

/*
 * The code for the external Javascript file called from $.ajax() (url: "../js/get2.js")
 * is shown below.
 */
$(function(){
  var someText = 'Some text to pass across ';
  $('#div2').append('Message from get2.js: ' + someText + '
');
});

• <<    .serializeArray()
• jQuery.ajaxPrefilter()     >>