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 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.

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.

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.

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.