Welcome to the appointment with web pills, where in a few minutes you can learn a new concept. This is episode #1 – AJAX: Asynchronous JavaScript and XML. Enjoy!

What is AJAX?

AJAX, which stands for Asynchronous JavaScript and XML, is a set of web development techniques that allows web applications to send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page. This means that you can update parts of a web page, without reloading the entire page.

AJAX is not a programming language or a technology in itself. Instead, it is a combination of existing technologies, including:

– HTML/XHTML and CSS for presenting information.

– JavaScript for dynamic content display and interaction.

– The DOM (Document Object Model) for dynamic display and interaction.

– XML or JSON for data exchange.

– XMLHttpRequest object for asynchronous communication with the server.

How Does AJAX Work?

AJAX operates on the concept of sending asynchronous HTTP requests from the client-side web page to the server. Here’s a simplified flow of how AJAX works:

1. Event occurs on the web page: This could be a user clicking a button, typing in a text box, or any other interaction.

2. JavaScript creates an XMLHttpRequest object: This object is used to send and receive data asynchronously.

3. The XMLHttpRequest object sends a request to the server: The request can be in the form of GET or POST.

4. Server processes the request: The server processes the request and sends a response back to the client.

5. JavaScript processes the server’s response: The response could be in XML, JSON, or plain text format.

6. The web page is updated: The data received from the server is used to update the web page content dynamically without reloading the page.

Advantages of Using AJAX

Improved User Experience

AJAX allows for faster and more dynamic web pages. Users do not have to wait for entire pages to reload, as only specific sections of the page are updated.

Reduced Server Load

Since only necessary data is sent and received, AJAX minimizes the amount of data transferred between the client and server, reducing server load and bandwidth usage.

Asynchronous Processing

AJAX operations are performed asynchronously, which means that other scripts can run while waiting for server responses, leading to smoother and more responsive applications.

Common Use Cases for AJAX

AJAX is widely used across the web for various purposes. Some of the common use cases include:

1. Form Validation: AJAX can be used to validate form data in real-time without reloading the page.
2. Dynamic Content Loading: AJAX allows loading additional content, such as comments, articles, or images, without refreshing the page.
3. Auto-Complete Search: Many search engines and websites use AJAX to provide auto-complete suggestions as users type in the search box.
4. Real-Time Notifications: AJAX can be used to fetch real-time notifications or updates, such as new messages or alerts, from the server.

AJAX Example

Here’s an example of AJAX in action. This code fetches data from a server and displays it on a webpage without reloading:

HTML and JavaScript Example
In this example, we’ll use a button to fetch user information from a public API and display it in a div on the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
</head>
<body>
<h1>AJAX Example: Fetch User Data</h1>
<button id="fetchButton">Fetch User Data</button>
<div id="result"></div>
<script>
document.getElementById('fetchButton').addEventListener('click', function() {
// Create a new XMLHttpRequest object
const xhr = new XMLHttpRequest();
// Configure it: GET-request for the URL /user data
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
// Define a function to run when the request is complete
xhr.onload = function() {
if (xhr.status == 200) { // Check if request was successful
// Parse and display the JSON response
const user = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `
<h3>User Info</h3>
<p><strong>Name:</strong> ${user.name}</p>
<p><strong>Email:</strong> ${user.email}</p>
<p><strong>City:</strong> ${user.address.city}</p>
`;
} else {
// Display an error message
document.getElementById('result').innerHTML = 'Failed to fetch data';
}
};
// Send the request
xhr.send();
});
</script>
</body>
</html>

And here it is, how it should look:

AJAX Example: Fetch User Data

Fetch User Data

Explanation

1. Button: When the “Fetch User Data” button is clicked, an AJAX request is sent.
2. AJAX Request: The XMLHttpRequest object sends a GET request to https://jsonplaceholder.typicode.com/users/1, a sample API endpoint.
3. Display Data: The data returned from the server is parsed as JSON and displayed in the result div, without reloading the page.

That’s it for today’s web pills, see you soon with some other interesting topics.

This article is also published as a podcast that you can listen to by heading to Spotify