How does AJAX enable client-server communication in JavaScript? Provide an example of its usage.

AJAX (Asynchronous JavaScript and XML) is a powerful technique that enables client-server communication in JavaScript without requiring the entire web page to reload. It allows data to be exchanged between the client and server asynchronously, making web applications more responsive and interactive. AJAX achieves this by leveraging a combination of JavaScript, XML (although JSON is commonly used instead), and the XMLHttpRequest object.

The key concept behind AJAX is the ability to send HTTP requests from the client-side JavaScript code to the server and receive data in various formats, such as XML, JSON, or plain text. This allows for dynamic updates and real-time interactions without disrupting the user experience. AJAX can be used to perform various tasks, including fetching data from a server, submitting form data, updating parts of a web page, and more.

Here is an example to illustrate the usage of AJAX:

```
javascript`// HTML
<button id="loadDataBtn">Load Data</button>
<div id="dataContainer"></div>

// JavaScript
const loadDataBtn = document.getElementById('loadDataBtn');
const dataContainer = document.getElementById('dataContainer');

loadDataBtn.addEventListener('click', () => {
// Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Configure the request
xhr.open('GET', 'https://api.example.com/data', true);

// Set the response type (JSON in this example)
xhr.responseType = 'json';

// Define the callback function to handle the response
xhr.onload = function () {
if (xhr.status === 200) {
// Process the response
const data = xhr.response;

// Update the UI with the received data
dataContainer.textContent = JSON.stringify(data);
} else {
console.error('Request failed. Status:', xhr.status);
}
};

// Send the request
xhr.send();
});`
```
In this example, when the user clicks the "Load Data" button, an AJAX request is made to the server using the XMLHttpRequest object. The request is configured with the HTTP method (GET), URL ('<https://api.example.com/data>'), and the asynchronous flag set to true.

Once the server responds, the callback function `xhr.onload` is executed. If the response status is 200 (indicating a successful request), the received data is processed and the UI is updated by populating the `dataContainer` element with the JSON data.

By utilizing AJAX, this example demonstrates how JavaScript can communicate with a server in the background, fetch data, and update the web page dynamically without requiring a full page reload. AJAX plays a vital role in enabling interactive and responsive web applications by facilitating seamless client-server communication.