jQuery ajax() Method
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.
<!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.
<!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.
