The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.
Syntax:
$.ajax({name:value, name:value, ... })Parameters: The list of possible parameter that can be passed to an Ajax request are listed below:
| Property | Description |
|---|
| type | Specifies the request type as POST or GET. |
| url | Specifies the URL to send the request to. |
| username | Specifies the username for HTTP access authentication. |
| xhr | Creates the XMLHttpRequest object. |
| async | Default is true. Specifies if the request is asynchronous. |
| beforeSend(xhr) | A function executed before the request is sent. |
| dataType | Expected data type of the server response. |
| error(xhr, status, error) | A function executed if the request fails. |
| global | Default is true. Specifies whether to trigger global AJAX events for the request. |
| ifModified | Default is false. A request is successful only if the response has changed. |
| jsonp | Overrides the callback function for JSONP requests. |
| jsonpCallback | Specifies a name for the callback function in a JSONP request. |
| cache | Default is true. Indicates whether the browser should cache requested pages. |
| complete(xhr, status) | A function that runs when the request is finished. |
| contentType | Default is "application/x-www-form-urlencoded". Specifies content type of data sent. |
| context | Specifies the "this" value for all AJAX-related callbacks. |
| data | Specifies data to be sent to the server. |
| dataFilter(data, type) | Handles raw response data from the XMLHttpRequest. |
| password | Specifies a password for HTTP access authentication. |
| processData | Default is true. Specifies if the data should be transformed into a query string. |
| scriptCharset | Specifies the charset for the request. |
| success(result, status, xhr) | Runs when the request succeeds. |
| timeout | Local timeout for the request, measured in milliseconds. |
| traditional | Specifies whether to use the traditional style of parameter serialization. |
Example 1: In this example we use jQuery's ajax() method to load content from "geeks.txt" into an <h3> element when the button is clicked. The request is handled asynchronously, displaying the text on success.
html <!DOCTYPE html> <html> <head> <title> jQuery ajax() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("li:parent").css("background-color", "green"); }); </script> </head> <body style="text-align:center;"> <h1 style="color:green"> GeeksForGeeks </h1> <h2> jQuery ajax() Method </h2> <h3 id="h11"></h3> <button>Click</button> <!-- Script to use ajax() method to add text content --> <script> $(document).ready(function () { $("button").click(function () { $.ajax({ url: "geeks.txt", success: function (result) { $("#h11").html(result); } }); }); }); </script> </body> </html> geeks.txt
"hello geeks !"
Output:
Example 2: In this example we use jQuery's ajax() method to fetch content from "geeks.txt" and display it in an <h3> element when the button is clicked. It includes error handling with a console log.
html <!DOCTYPE html> <html> <head> <title>jQuery ajax() Method</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeeksForGeeks </h1> <h2>jQuery ajax() Method</h2> <h3 id="h11"></h3> <button>Click</button> <script> $(document).ready(function () { $("button").click(function () { $.ajax({ url: "geeks.txt", success: function (result) { $("#h11").html(result); }, error: function (xhr, status, error) { console.log(error); } }); }); }); </script> </body> </html> Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.