Ajax is a web method used to retrieve data from a server without reloading the entire web page. Ajax makes websites dynamic because you can retrieve server data while doing other things on the same page (asynchronous).
Ajax is implemented by JavaScript using the XMLHttpRequest object or the Fetch API. The fetch method is the more modern implementation of Ajax.
Ajax paved the way for modern and dynamic web applications like Gmail, YouTube, Maps, Facebook and many others.
Here’s a simple Ajax request using the XMLHttpRequest method
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Configure it: GET-request for a URL
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// Set up a function to handle the response
xhr.onload = function() {
if (xhr.status === 200) {
// Parse and display the response text
var data = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = "Title: " + data.title;
} else {
document.getElementById("result").innerHTML = "Error loading data.";
}
};
// Send the request
xhr.send();
Using the Fetch API
// Use Fetch API to make a GET request
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Display the fetched data
document.getElementById("result").innerHTML = "Title: " + data.title;
})
.catch(error => {
document.getElementById("result").innerHTML = "Error loading data.";
});
Pros of Ajax
Saves user data
With Ajax, you can get server data without loading the entire web page saving data. Typically, if you reload a page all the page resources like images and stylesheets are retrieved, adding more request data.
Saves Bandwidth
Ajax also alleviates server load. By requesting specific data only and not the whole page you reduce server load saving bandwidth (data transmitted).
Ajax calls typically return JSON data which is more compact and lightweight.
Makes websites dynamic
Ajax makes websites dynamic and interactive. Data can be retrieved in parallel while doing other things on the website. For example, you can get notifications while browsing a web page.
Fast
Requesting an entire website increases loading time as more resources must be retrieved from the server. Load times can also increase especially without a cache in place. With Ajax, you get what you want fast without reloading the entire web page.
Cons of Ajax
Browser Support
If JavaScript is disabled users won’t be able to retrieve data with Ajax. In addition, if the browser is outdated some Ajax functionalities won’t work breaking page content.
Can Affect SEO
Ajax can have some negative impact on search visibility if not implemented well. Search bots may have difficulties reading a web page requested with Ajax.
You need to be aware of Ajax best practices for SEO.
Security Issues
If improper security measures are in place data can be compromised through Ajax requests. However, this does not apply to Ajax only but an entire website.
