How to make ajax call from JavaScript ?
Ajax is a powerful tool in web development for asynchronous communication with servers. With Ajax, you can fetch data from the server and update your webpage without interrupting what your user sees. It’s a basic concept in programming.
In this article, we’ll learn about three ways to make Ajax calls in JavaScript:
- Using the XMLHttpRequest object
- Using jQuery
- Using fetch() API
We’ll walk through each method with simple examples to help you understand how to use them in your projects.
Approach 1: Using the XMLHttpRequest object
In this approach, we will use the XMLHttpRequest object to make an Ajax call. The XMLHttpRequest() method creates an XMLHttpRequest object which is used to make a request with the server.
Syntax:
let xhttp = new XMLHttpRequest();
Above syntax is used to create an XMLHttpRequest object. This object has many different methods used to interact with the server to send, receive or interrupt responses from the server. In the response, we get a string from the server that we print.
Example: In this example, we will use the XMLHttpRequest object to make an Ajax call.
function run() {
// Creating Our XMLHttpRequest object
let xhr = new XMLHttpRequest();
// Making our connection
let url = 'https://jsonplaceholder.typicode.com/todos/1';
xhr.open("GET", url, true);
// function execute after request is successful
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}
// Sending our request
xhr.send();
}
run();
Output:
"{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}"
Approach 2: Using jQuery
In this approach, we will use jQuery to make an Ajax call. The ajax() method is used in jQuery to make ajax calls. It is used as a replacement for all approaches which are not working to make ajax calls.
Syntax:
$.ajax({arg1: value, arg2: value, ... });
Parameter: It takes a configuration file that configures the URL, type, and function to call when we get our response or if error, etc.
Example: In this example, we will use jQuery to make an ajax call.
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<script>
function ajaxCall() {
$.ajax({
// Our sample url to make request
url:
'https://jsonplaceholder.typicode.com/todos/1',
// Type of Request
type: "GET",
// Function to call when to
// request is ok
success: function (data) {
let x = JSON.stringify(data);
console.log(x);
},
// Error handling
error: function (error) {
console.log(`Error ${error}`);
}
});
}
ajaxCall();
</script>
</body>
</html>
Output:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
Approach 3: Using fetch() API
In this approach, we will use fetch() API which is used to make XMLHttpRequest with the server. Because of its flexible structure, it is easy to use. This API makes a request to the server and gets the result as a promise which is resolved to the string.
Syntax:
fetch(url, {config}).then().catch();
Parameter: It takes URL and config of the request as parameters.
We will configure the data required and make the request to the server. Since it is a resolved promise we use then() function and the catch() function to create output for the result. In response, we get the string that we print.
Example: In this example, we will use fetch() API to make XMLHttpRequest with the server.
// Url for the request
let url = 'https://jsonplaceholder.typicode.com/todos/1';
// Making our request
fetch(url, { method: 'GET' })
.then(Result => Result.json())
.then(string => {
// Printing our response
console.log(string);
// Printing our field of our response
console.log(`Title of our response : ${string.title}`);
})
.catch(errorMsg => { console.log(errorMsg); });
Output:
{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response : delectus aut autem
Contact Us