jQuery ajax() Method
You are Here:
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
|
| 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
|
| 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
|
| 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
|
| 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
|
| 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
|
| 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
|
| 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
|
| 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
|
| 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
|
| type | Optional | An alias for method. Possible Values are
|
| 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
|
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>
Reminder
Hi Developers, we almost covered 95% of AJAX Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in AJAX.
Please do google search for:
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.
