Updated February 21, 2023
Introduction to jQuery Ajax Call
jQuery ajax call requests are handled with the ajax function; ajax is used by all jQuery AJAX functions. This method is typically used for requests that other methods cannot handle. In jQuery, the ajax method is used to make an asynchronous HTTP request or an AJAX request. Ajax is a programming language that enables developers to make asynchronous HTTP queries without reloading the entire page.
What is jQuery Ajax Call?
- Developers have been utilizing the jQuery library for years to make the process less tedious than it would be in pure JavaScript.
- Some of jQuery most used Ajax shorthand methods: $.get, $.post, and $.load. Quick ways to make Ajax requests using just a few lines of code exist.
- More control over the Ajax calls we wish to make is sometimes necessary. For instance, we could wish to indicate what should happen if an Ajax call fails or if we need to make an Ajax request but only need the result if it is returned within a particular length of time. In these cases, we can use the jQuery $.ajax method.
Below is the syntax of jQuery ajax call are as follows.
Syntax –
$.ajax ({name:value, name:value, … })Below is the list of the possible value of parameters as follows:
- Type – This parameter is used to specify the request type.
- Url – This specifies the URL to which the request should be sent.
- Username – It is used to specify a username in an HTTP access authentication request.
- Xhr – It’s used to make the XMLHttpRequest object.
- Async – True is the default setting for async. It specifies whether or not the request should be handled asynchronously.
- BeforeSend – This function should be executed before the request is sent.
- Data Type – The expected data type of the server response.
- Error – It is used to run if the request fails.
- Global – True is the default value. It’s used to declare whether or not the request should activate global AJAX event handlers.
- IfModified – It is set to false by default. It’s used to say whether a request is only successful if the response has changed since the previous one.
- Jsonp – In a jsonp request, a string overrides the callback function.
- JsonpCallback – It’s used to provide the callback function in a jsonp request a name.
- Cache – True is the default value. It tells the browser whether or not the requested pages should be cached.
- Complete (xhr) – It’s a function that gets called when the request is finished.
- Content type – The default option for contentType is “application/x-www-form-urlencoded,” which is used when data is sent to the server.
How to Write jQuery Ajax Call?
- Using the jQuery library, we may leverage some of the jQuery features to construct ajax requests.
- The user does not want to be moved to another page where we can only see the product description and will have to return for a new product.
- JavaScript, DOM, XML, HTML/XHTML, CSS, and XMLHttpRequest are examples of interconnected technologies.
- It enables us to communicate and receive data in real-time without reloading the website. It’s, therefore, quick.
- In jQuery, the ajax method does an AJAX call. It communicates with the server through an asynchronous HTTP request.
- For constructing web applications, jQuery provides a large number of AJAX techniques. For requests, it’s extensively used.
jQuery Ajax Call Method
- The ajax function is the heart of jQuery Ajax. This function is used to make asynchronous HTTP requests.
- The jQuery ajax method provides Ajax capability. In addition, it asynchronously communicates with the server.
Below is the syntax of the jQuery ajax call method:
Syntax –
$.ajax(url);$.ajax(url,[options]);- Ajax requests configuration options for a string URL to which the data options should be submitted or retrieved. The JSON format can be used to specify an options parameter. However, this parameter is not required.
- Using the url parameter and the options supplied in settings, this function conducts an Ajax request in its first form. The URL is supplied in the settings parameter in the second form, or it can be omitted, in which case the current page is requested.
- The content type specified in the request header informs the server about the type of answer it will accept.
- All queries are asynchronously dispatched by default. To make it synchronized, set it to false.
- The ajax method sends an asynchronous http request to the server and retrieves data from it.
- JQuery XMLHttpRequest is returned by the ajax() method. An asynchronous HTTP request is made using the jQuery $.ajax() function. It’s been in the library since version 1.0, so it’s not new.
jQuery Ajax Call Example
Below are the different examples of jQuery Ajax Call:
Example #1
The below example shows a jQuery ajax call to send the request as follows.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jQuery/1.11.2/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ajaxBtn').click(function(){
$.ajax('/jQuery/getdata',
{
success: function (data, status, xhr) {
$('p').append(data);
}
});
});
});
</script>
</head>
<body>
<h1> Jquery Ajax Call
</h1>
<input type="button" id="ajaxBtn" value="Click on this button to send ajax request" />
<p>
</p>
</body>
</html>Output:
Example #2
The below example shows to get json data by using jQuery ajax calls are as follows.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jQuery/1.11.2/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ajaxBtn').click(function(){
$.ajax('/jQuery/getjsondata',
{
dataType: 'json',
timeout: 500,
success: function (data,status,xhr) {
$('p').append (data.firstName + ' ' + data.middleName + ' ' + data.lastName);
},
error: function (jqXhr, textStatus, errorMessage) {
$('p').append('Error: ' + errorMessage);
}
});
});
});
</script>
</head>
<body>
<h1> Jquery Ajax Call
</h1>
<input type="button" id="ajaxBtn" value="Click on this button to send ajax request" />
<p>
</p>
</body>
</html>Output:
Conclusion
This method is typically used for requests that other methods cannot handle. For example, we may leverage some of the jQuery features to construct ajax requests using the jQuery library. JQuery ajax call requests are handled with the ajax function; ajax is used by all jQuery AJAX functions.
Recommended Articles
This is a guide to jQuery Ajax Call. Here we also discuss how to write jQuery Ajax Call, methods, and examples with code implementation. You may also have a look at the following articles to learn more –
