What is AJAX and how does it work?

Introduction

AJAX is an acronym for the phrase Asynchronous JavaScript and XML is a technique for creating dynamic and interactive web applications. This technology allows developers to update different parts of a web page without reloading the entire page. AJAX is a combination of several web technologies that work in harmony to provide a better user experience.

How does AJAX work?

AJAX works on a simple idea: Asynchronous communication with the server. This means that the browser can send requests to the server and receive responses without having to reload the entire page.

The main components of AJAX

• HTML and CSS: To display the structure and design of a web page.
• JavaScript: To manage user interactions and send requests.
• XMLHttpRequest or Fetch API: To send and receive data to/from the server.
• JSON or XML data: The data format that the server sends to the browser.
• Server and database: Where data is processed and answers are prepared.

Steps of AJAX operation

1. User interaction: The user performs an action, such as clicking a button or selecting an option.
2. Create a request: JavaScript creates an XMLHttpRequest object or uses the Fetch API to send the request.
3. Send request: The request is sent to the server asynchronously.
4. Processing on the server: The server receives the request, processes it, and prepares the appropriate response (such as data in JSON or HTML format).
5. Receive response: The browser receives the server's response and passes it to JavaScript.
6. Page refresh: JavaScript processes the received data and updates part of the page without reloading.

Simple AJAX code example

// ایجاد شیء XMLHttpRequest
let xhr = new XMLHttpRequest();
// باز کردن درخواست
xhr.open("GET", "data.json", true);
// تنظیم پاسخ
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data); // نمایش داده در کنسول
}
};
// ارسال درخواست
xhr.send();

Data formats in AJAX

JSON

JSON is the most common data format used in AJAX. It is lightweight, readable, and can be easily converted to a JavaScript object.

{
"name": "Ali",
"age": 25,
"city": "Tehran"
}

XML

In the past, XML was one of the main formats in AJAX, but its use has declined today due to its complexity and heavy load.

<name>Ali</name>
<age>25</age>
<city>Tehran</city>

HTML

Sometimes data is sent from the server in HTML, such as part of a table or form.

Methods of submitting a request

GET

xhr.open("GET", "data.json", true);
xhr.send();

POST

xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Ali&age=25");

Using the Fetch API

fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});

Result

AJAX is a key technology in web development that allows developers to create faster, smoother, and more interactive applications. Despite the many benefits of AJAX, being aware of the challenges and best practices for using it can help developers design more efficient applications. Ultimately, AJAX has become a core component of modern web development by providing a better user experience and reducing server load.