jQuery ajax() Method

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.

ValueTypeExplanation
urlRequiredSpecifies the URL to which the request to be sent.
asyncOptionalSpecifies whether the request to be sent is in asynchronous or synchronous mode.
Possible values are
  • true - asynchronous
  • false - synchronous
By Default, async is true.
beforeSendOptionalSpecifies a function to run before the request is sent
cacheOptionalSpecifies 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
completeOptionalSpecifies a function to run when the request is finished.
contentsOptionalSpecifies how jQuery will parse the response.
Note: contents must be an object.
contentTypeOptionalUsed when sending data to the server.
By Default, contentType is 'application/x-www-form-urlencoded; charset=UTF-8'
contextOptionalSpecifies the "this" value for all AJAX related callback functions.
convertersOptionalSpecifies 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
}
crossDomainOptionalSpecifies 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.
dataOptionalSpecifies the data to be sent to the server.
dataFilterOptionalSpecifies a function to be used to handle the raw response data of XMLHttpRequest.
dataTypeOptionalSpecifies 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.
errorOptionalSpecifies a function to be called if the request fails.
globalOptionalSpecifies 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
headersOptionalSpecifies 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.
ifModifiedOptionalAllow 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.
isLocalOptionalAllow 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.
jsonpOptionalSpecifies a string override the callback function name in a JSONP request.
jsonpCallbackOptionalSpecifies a name for the callback function in a jsonp request.
methodOptionalThe HTTP method to use for the request.
Possible values are
  • 'GET'
  • 'POST'
  • 'PUT'
By default, method is 'GET'.
mimeTypeOptionalSpecifies a mime type to override the XHR mime type.
passwordOptionalSpecifies a password to be used with XMLHttpRequest in response to an HTTP access authentication request.
processDataOptionalSpecifies 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.
scriptAttrsOptionalSpecifies an object with additional attributes to be used in a "script" or "jsonp" request.
scriptCharsetOptionalSets the charset attribute on the script tag used in the request. Only applies when the "script" transport is used.
successOptionalSpecifies a function to be called if the request succeeds.
timeoutOptionalSet a timeout (in milliseconds) for the request.
traditionalOptionalspecifying whether or not to use the traditional style of param serialization.
Possible values are
  • true
  • false
typeOptionalAn alias for method.
Possible Values are
  • GET
  • POST
  • PUT
usernameOptionalSpecifies a username to be used with XMLHttpRequest in response to an HTTP access authentication request.
xhrOptionalA function used for creating the XMLHttpRequest object
Possible values are
  • ActiveXObject - for IE
  • XMLHttpRequest - for chrome, firefox, etc.

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>

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author