How to make ajax call from JavaScript ?
Last Updated :
10 Jan, 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.
In this article, we’ll learn about three ways to make Ajax calls in JavaScript:
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.
- 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.
JavaScript
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
- 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.
HTML
<!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.
- 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.
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
Similar Reads
How to send an Email from JavaScript?
Sending an email from JavaScript involves using a library like SMTP.js, which allows you to send emails directly from a web page. It’s done by configuring SMTP settings and creating a simple HTML form, enabling users to send emails programmatically. To use SMTP, you need to configure your Gmail. You
3 min read
How to Load XML from JavaScript ?
Loading XML data into JavaScript is a common task, whether it's for parsing user input or fetching data from a server. The below-listed approaches can be used to load XML from JavaScript. Table of Content Parsing XML String DirectlyFetching XML Data from an External SourceParsing XML in Node.js usin
4 min read
How to create HTML List from JavaScript Array?
Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, we’ll go thro
3 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 Call a JavaScript Function from an onmouseout Event ?
The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmou
3 min read
How to call a JavaScript Function from an onmouseover Event ?
The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener. Table of Content Usin
2 min read
How to Create a Link in JavaScript ?
In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild(). Here are some common approaches
4 min read
How to Create a Custom Callback in JavaScript?
A callback is a function that executes after another function has been completed in JavaScript. As an event-driven language, JavaScript does not pause for a function to finish before moving on to the next task. Callbacks enable the execution of a function only after the completion of another, making
3 min read
How to create an element from a string in JavaScript ?
In this article, we will learn how to create an element from a string using JavaScript. This can be used in situations where dynamically generated elements are required by the user. This can be achieved using many approaches as given below: Table of Content Using the createElement() methodUsing the
3 min read