Ajax jQuery

Introduction

With the use of Ajax technology, developers may send asynchronous HTTP queries without having to reload the website completely. Developers have been utilizing the jQuery library for years to make the procedure less time-consuming than it would be in pure JavaScript. More control over the Ajax calls we wish to make is sometimes necessary. For instance, we need to describe what should happen if an Ajax call fails or if we have to make an Ajax request, but the outcome is only necessary if it is obtained quickly. In these cases, we may rely on another jQuery method called $.ajax(), which is the subject of this lesson.

The $.ajax() Function

An asynchronous HTTP request is made using the jQuery $.ajax() method. It has been a part of the library since version 1.0, which was a very long ago. Every method explained in the earlier post that uses a preset configuration calls the $.ajax() function in the background. Below is a list of this function's signatures:

The syntax of using the ajax() method is given as follows.

Syntax

$.ajax({name:value, name:value, ... })

The settings Parameter

You can specify many different options to bend $.ajax() to your needs. In the list below, you can find their names and their description:

• dataType: The type of data you're expecting from the server.
• error: A callback function to be executed when the request fails.
• global: A Boolean indicating whether to trigger a global Ajax request handler. The default is true.
• jsonpCallback: String containing the callback function name for a JSONP request.
• mimeType: String containing a mime type to override the XMLHttpRequest mime type.
• password: A password to be used with XMLHttpRequest in response to an HTTP access authentication request.
• timeout: A number value in milliseconds for the request timeout.
• type: A type of HTTP request, e.g., POST, PUT and GET. The default is GET.
• url: A string containing the URL to which the request is sent.
• accepts: The content type sent in the request header tells the server what kind of response it will accept in return.
• async: By default, all requests are sent asynchronously. Set it to false to make it synchronous.
• beforeSend: A callback function to be executed before the Ajax request is sent.
• cache: A boolean indicating browser cache. The default is true.
• complete: A callback function to be executed when the request finishes.
• contentType: A string containing a type of content when sending MIME content to the server.Default is "application/x-www-form-urlencoded; charset=UTF-8"
• crossDomain: A boolean value indicating whether a request is a cross-domain.
• data: Data to be sent to the server. It can be a JSON object, string, or array.

Example:

Here, we use the optional async attribute and set it to false for an asynchronous request.

Output:

Conclusion

In this article, We covered $.ajax, the most powerful Ajax method provided by jQuery (). You have great control over how the request is submitted to the server and how the answer is handled when using it to execute Ajax queries. If none of the shorthand functions is a good fit for your project, this function gives you the resources you need to complete it.