Updated April 6, 2023
Introduction to jQuery ajax request
The jQuery ajax request is used to send or get the server’s data using the HTTP GET request. The jQuery ajax request can be performed with the help of the ajax() function. The jQuery ajax() function is a built-in function in jQuery. The ajax() function is used to perform an asynchronous HTTP request to the server, and it also allows to send or get the data asynchronously without reloading the web page, which makes it fast. JQuery gives a wide range of AJAX functions for developing web applications.
The syntax of the jQuery ajax() function –
$.ajax({name : value, name : value, .. });Parameters
The function accepts the name-value pair parameter for an ajax request. The possible name and value which can pass to the function are listed as below –
- async – It is a Boolean type. It specifies that the request is treated asynchronously by default. We may set its value as false for synchronous requests. Its default value is true.
- Data – this specifies the data which is sent to the server. Its value could be an array, a string, or a JSON object.
- beforeSend(xhr) – This is a function. It is used to add the custom header or overwrites to specify what type of response it can accept from the server. It accepts two parameters: jqXHR and settings; it modifies the jqXHR object and adds the custom headers with the help of the setRequestHeader function.
- complete( xhr, status ) – This is a function. It runs when the request is complete. It accepts two parameters that are xhr and status. The “success”, “notmodified”, “error”, “nocontent”, and all can be the status.
- cache – It is a Boolean type. It specifies whether the browser caches the pages which are requested. By setting the value as false, the browser can no longer cache the pages. The default value is true.
- url – It specifies the location or URL to which the request is sent to get the data. The current page is the default value.
- contenttype – It specifies what type of data is sending to the server while ajax() sends the request to the server. The default value is “application/x-www-form-urlencoded”. It is a Boolean or string data type. The possible string type values for the contenttype are “text/html”, “text/plain”, “application/jar”, “image/png”, “multipart/form-data”, “image/gif”, “audio/mp3”, “application/json” and all. The default Boolean type value is false. The false value tells jQuery that not to set any content-type header.
- type – It is used to specifies the type of HTTP request send like GET, POST, and PUT. The default value is GET.
- dataType – It specifies the type of data the server should return.
- ifModified – It is a Boolean type. If the response has changed since the last header, the request is successful. The default value is false.
- scriptCharset – It is used only when the “script” transport is used to specifies the charset for the request.
- username – It specifies the username to performs an HTTP access authentication request.
- password – It specifies the password to performs an HTTP access authentication request.
- processData – It is a Boolean type. It specifies whether the data contains in the request needs to be changed into a query string or not. The default value is true.
- success(result, status, xhr) – It is a callback function that is only called if the request is successful. It accepts three parameters.
- error(xhr, status, error) – This is a function, accepts three parameters; it runs when a request fails.
- timeout – It specifies the number of milliseconds a request should wait for automatically being terminated. If the value is set to 0, it means that there is no timeout.
- jsonpCallback – It is a string type; it specifies the name of the callback function for a jsonp request.
- jsonp – It is a string value. It specifies that in a jsonp request, it overrides the name of the callback function.
- xhr – It specifies a function used to create the XMLHttpRequest object.
- global – It is a Boolean type. It specifies whether or not to trigger a global AJAX event handler. The default value is true.
- traditional – It is a Boolean type; if the value is set to true, it means we can use the traditional style of param serialization.
- dataFilter(data, type) – It is a callback function, it accepts two parameters. It deals with the raw response data of the XMLHttpRequest.
Working of the ajax() function
The jQuery ajax() function accepts name-value pairs parameters. Suppose we have to do the asynchronous HTTP Post request and submit the data to the server. The type of data sending is JSON type which needs to be specified to the server. So we can use the ajax() function with contenttype option as “$.ajax( ‘/jquery/submitData’, { type : “POST”, contenttype : “application/json”, data : { myData: “Sample data.” } });”, where the first parameter is the URL where the data will submit. So, the data of specified content type submit to the server.
Examples for the jQuery ajax() function
Example of jQuery ajax get() function to get the data by using ajax get() function from the specified URL –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax() function </title>
</head>
<body>
<h3> This an example of jQuery ajax() function : </h3>
<button id = "Btn" > Send the ajax request </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url from where we want to get the data
var ajxReq = $.ajax( 'http://time.jsontest.com', {
contentType : 'application/json',
dataType : 'json',
timeout : 600
});
ajxReq.success( function ( data, status, jqXhr ) {
$( "p" ).append( "First data is : " + data.date + ".<br> Second data is : " + data.milliseconds_since_epoch + ".<br> Thirs data is : " + + data.time );
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "Error message is : " + errorMessage);
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button, the ajax() function will call, which sends the HTTP GET request to the server to get the data. The first parameter mentioned the URL from where the data to get; the second parameter mentioned contenttype to specifies what type of data is sending to the server, the third parameter mentioned datatype to specify the response is expecting from the server, the fourth parameter mentioned the timeout of the request, the fifth parameter mentioned success() which run if the request is successful and the sixth parameter mentioned error() which run if the request fails.
Conclusion
The jQuery ajax() function is a built-in function in jQuery, which is used to send the ajax request to send or get the server’s data using the HTTP GET request.
Recommended Articles
This is a guide to jQuery ajax requests. Here we discuss the Working of the ajax() function along with the example and output. You may also have a look at the following articles to learn more –
