jQuery ajax() Method

Last Updated:

jQuery ajax() Method

jQuery ajax() method performs an asynchronous HTTP (Ajax) request.

Requesting with HTTP Get

In the following example, we will use ajax() method to send a HTTP Get request.

Example

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Sending ajax() 'GET' Request.</p> <button>Send ajax Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "/greet-specific.php", method: "GET", data: {myname: "Alex"}, }) .done(function(data){ alert(data); }); }); }); </script> </body> </html>

Syntax

$.ajax(url, [options]);

Parameter Values

The order of following parameters are not necessary.

Value Type Explanation
url Required Specifies the URL to which the request to be sent.
async Optional Specifies whether the request to be sent is in asynchronous or synchronous mode.
Possible values are
  • true - asynchronous
  • false - synchronous
By Default, async is true.
beforeSend Optional Specifies a function to run before the request is sent
cache Optional Specifies whether the browser should cache the requested pages.
Possible values are
  • true - cache the page
  • false - Do NOT cache the page
By default, cache is true
complete Optional Specifies a function to run when the request is finished.
contents Optional Specifies how jQuery will parse the response.
Note: contents must be an object.
contentType Optional Used when sending data to the server.
By Default, contentType is 'application/x-www-form-urlencoded; charset=UTF-8'
context Optional Specifies the "this" value for all AJAX related callback functions.
converters Optional Specifies an object containing dataType-to-dataType converters.
By default, converters is
{
 "* text": window.String,
 "text html": true,
 "text json": jQuery.parseJSON,
 "text xml": jQuery.parseXML
}
crossDomain Optional Specifies whether to force a cross domain request.
Possible values are
  • true - force a cross domain request
  • false - DO NOT force a cross domain request
By default, crossDomain is false.
data Optional Specifies the data to be sent to the server.
dataFilter Optional Specifies a function to be used to handle the raw response data of XMLHttpRequest.
dataType Optional Specifies the type of data that you're expecting back from the server.
Possible values are
  • xml
  • json
  • script
  • text
  • html
By default, jQuery will make an intelligent Guess.
error Optional Specifies a function to be called if the request fails.
global Optional Specifies whether to trigger global Ajax event handlers for this request.
Possible values are
  • true - Allow global Ajax event handlers.
  • false - DO NOT allow global Ajax event handlers.
By default, global is true
headers Optional Specifies an object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport.
Note: Headers are explicit. Do not send any sensitive information through header.
ifModified Optional Allow the request to be successful only if the response has changed since the last request.
Possible values are
  • true
  • false
By default, ifModified is false.
isLocal Optional Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default.
Possible values are
  • true
  • false
By default, isLocal depends on current location protocol.
jsonp Optional Specifies a string override the callback function name in a JSONP request.
jsonpCallback Optional Specifies a name for the callback function in a jsonp request.
method Optional The HTTP method to use for the request.
Possible values are
  • 'GET'
  • 'POST'
  • 'PUT'
By default, method is 'GET'.
mimeType Optional Specifies a mime type to override the XHR mime type.
password Optional Specifies a password to be used with XMLHttpRequest in response to an HTTP access authentication request.
processData Optional Specifies whether to process the data to be sent to the server.
Possible values are
  • true - Process the data.
  • false - DO NOT process the data.
By default, processData is true.
scriptAttrs Optional Specifies an object with additional attributes to be used in a "script" or "jsonp" request.
scriptCharset Optional Sets the charset attribute on the script tag used in the request. Only applies when the "script" transport is used.
success Optional Specifies a function to be called if the request succeeds.
timeout Optional Set a timeout (in milliseconds) for the request.
traditional Optional specifying whether or not to use the traditional style of param serialization.
Possible values are
  • true
  • false
type Optional An alias for method.
Possible Values are
  • GET
  • POST
  • PUT
username Optional Specifies a username to be used with XMLHttpRequest in response to an HTTP access authentication request.
xhr Optional A function used for creating the XMLHttpRequest object
Possible values are
  • ActiveXObject - for IE
  • XMLHttpRequest - for chrome, firefox, etc.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
ajax()YesYesYesYesYesYesYesYesYesYesYesYesYes

Requesting with HTTP Post

In the following example, we will use ajax() method to send a HTTP Post request.

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Sending ajax() 'POST' Request.</p> <button>Send ajax Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "/greet-specific.php", method: "POST", data: {myname: "Alex"}, }) .done(function(data){ alert(data); }); }); }); </script> </body> </html>

Requesting for Latest Version

In the following example, the cache option 'false' tells the browser not to cache the requested page/data.

Example

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Loading and using external javascript file.</p> <button>Execute</button> <script> $(document).ready(function(){ $.ajax({ method: "GET", url: "/script/alert-me.js", cache: false, dataType: "script" }); $("button").click(function(){ myFunction(); }); }); </script> </body> </html>

Sending Data without Processing

By setting the processData option to false, the automatic conversion of data to strings is prevented.

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Sending ajax() request with 'processData: false'.</p> <button>Send ajax Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "/greet-specific.php", method: "GET", data: {myname: "Alex"}, processData: false }) .done(function(data){ alert(data); }); }); }); </script> </body> </html>

Requesting with Pre-request Callback

A pre-request callback function that can be used to modify the jqXHR object before it is sent.

It can also be used to set custom headers, etc.

Example

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Sending ajax() request with 'processData: false'.</p> <button>Send ajax Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "/greet-specific.php", method: "GET", data: {myname: "Alex"}, beforeSend: function(){ alert("ajax() is going to request the url"); } }) .done(function(data){ alert(data); }); }); }); </script> </body> </html>

Requesting with Error Callback

In the following example, we use separate callbacks for both success and failure response.

Example

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery ajax() Method</h1> <p>Sending ajax() request with 'processData: false'.</p> <button>Send ajax Request</button> <script> $(document).ready(function(){ $("button").click(function(){ var request = $.ajax({ url: "/greet-specific.php", method: "GET", data: {myname: "Alex"}, }); request.done(function(data) { alert("Success!! " +data); }); request.fail(function( jqXHR, textStatus ) { alert("Request failed: "+ textStatus); }); }); }); </script> </body> </html>

Share this Page

Meet the Author