How to Make AJAX Call from JavaScript?
Last Updated :
07 Jun, 2025
Making an Ajax call from JavaScript means sending an asynchronous request to a server to fetch or send data without reloading the web page. This allows dynamic content updates, enhancing user experience by making the web application more interactive and responsive.
There are multiple ways to make Ajax calls in JavaScript, but we will focus on three common approaches:
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();
It creates a new instance of the XMLHttpRequest object, used to send and receive data from a server asynchronously.
JavaScript
function run() {
let xhr = new XMLHttpRequest();
let url = 'https://jsonplaceholder.typicode.com/todos/1';
xhr.open("GET", url, true);
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
}"
In this example,
- We will use the XMLHttpRequest object to make an Ajax call.
- The XMLHttpRequest object is used to make an asynchronous GET request.
- It sends a request to a specified URL and waits for a response.
- On success, the JSON response is logged to the console.
2. Using jQuery
jQery simplifies the process of sending requests and receiving responses from a server without reloading the page. The ajax() method is a more flexible and reliable option compared to other older methods, allowing you to handle different types of requests (like GET or POST) and easily update the page content.
Syntax
$.ajax({arg1: value, arg2: value, ... });- $.ajax(): This is the jQuery method to make Ajax requests.
- {arg1: value, arg2: value, ...}: This is an object containing key-value pairs (arguments and their values) that specify the settings for the Ajax request, such as the URL, request type (GET/POST), data to send, and callback functions for success or error handling.
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<script>
function ajaxCall() {
$.ajax({
url:
'https://jsonplaceholder.typicode.com/todos/1',
type: "GET",
success: function (data) {
let x = JSON.stringify(data);
console.log(x);
},
]
error: function (error) {
console.log(`Error ${error}`);
}
});
}
ajaxCall();
</script>
</body>
</html>
Output:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
In this example
- The ajaxCall() function makes an AJAX GET request to a sample URL using jQuery.
- On success, the response data is converted to a JSON string and logged to the console.
- If the request fails, an error message is logged to the console.
3. Using fetch() API
The fetch() API is used to make requests to the server. Its flexible structure makes it easy to use. When a request is made, the server responds with a promise, which is then resolved into a string.
Syntax
fetch(url, {config}).then().catch();- url: The URL to send the request to.
- {config}: Optional settings like method (GET, POST), headers, etc.
- .then(): Handles the successful response.
- .catch(): Catches and handles any errors.
JavaScript
// 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- A GET request is made to the specified URL using the fetch() API.
- The JSON response is logged to the console, and the title field is specifically printed.
- Errors during the request are caught and logged to the console.
Conclusion
Ajax is a powerful tool that allows web pages to load content without refreshing the entire page, making websites faster and more interactive. In this article, we explored how to make Ajax calls using different methods like XMLHttpRequest, the modern fetch() API, and jQuery's ajax() method. By understanding these techniques, you can create dynamic web applications that provide a smoother experience for users.
Similar Reads
How to make ajax call from JavaScript ? Making an Ajax call from JavaScript means sending an asynchronous request to a server to fetch or send data without reloading the web page. This allows dynamic content updates, enhancing user experience by making the web application more interactive and responsive.There are multiple ways to make Aja
4 min read
4 Ways to Make an API Call in JavaScript API(Application Programming Interface) is a set of protocols, rules, and tools that allow different software applications to access allowed functionalities, and data, and interact with each other. API is a service created for user applications that request data or some functionality from servers.To
7 min read
How to Simulate a Click in JavaScript? Simulating a click in JavaScript means triggering a click event on an HTML element using code, rather than requiring manual user interaction. This technique is useful for automating actions like clicking buttons, links, or other interactive elements, enhancing web functionality, and triggering hidde
3 min read
How to Call a JavaScript Function from an onsubmit Event ? The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function
2 min read
How to Make GET call to an API using Axios in JavaScript? Axios is a promise-based HTTP client designed for Node.js and browsers. With Axios, we can easily send asynchronous HTTP requests to REST APIs and perform create, read, update and delete operations. It is an open-source collaboration project hosted on GitHub. It can be imported in plain JavaScript o
3 min read
How to Call a JavaScript Function from Chrome Console ? One can call a JavaScript Function from the Chrome Console. We will learn how can we call the function in the console that is written in JavaScript. Steps to call a JavaScript Function from Chrome ConsoleOpen the Chrome ConsoleYou can open the Chrome Console by right-clicking on your webpage, select
2 min read
How to get form data using JavaScript/jQuery? The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Syntax: $(selector).serializeArray() Parameter: It does not accept any parameter. Return Value: It returns all the value that is inside the inputs fields
1 min read
How to connect to an API in JavaScript ? An API or Application Programming Interface is an intermediary which carries request/response data between the endpoints of a channel. We can visualize an analogy of API to that of a waiter in a restaurant. A typical waiter in a restaurant would welcome you and ask for your order. He/She confirms th
5 min read
How can JavaScript upload a blob ? There are many ways to upload a blob (a group of bytes that holds the data stored in a file) in JavaScript, using XMLHttpRequest, Fetch API, jQuery. In this tutorial, we will discuss the two most common ways that are supported by a majority of the browsers.Note: To test our HTTP request, you can use
2 min read
How to Make a Simple jQuery AJAX Call on Link Click? To make a simple jQuery AJAX call when a link is clicked, you can use jQuery's .click() method and the $.ajax() function to send a request and handle the response. Here's a basic example to demonstrate how this works:Example: jQuery AJAX Call on Link ClickHTML Structure:HTML<a href="#" id="myLink
2 min read