🔁 AJAX Request & Response Lifecycle – End‑to‑End Communication Explained

---

🧲 Introduction – How AJAX Handles Asynchronous Communication

AJAX empowers the browser to communicate with servers without full-page reloads, enabling dynamic, responsive experiences. This lifecycle includes: initializing, sending, receiving, and handling responses—completely asynchronously. Mastering each phase ensures smooth data flow in your web apps.

🎯 In this guide, you’ll learn:

• Client–server interaction flow with AJAX
• Configuring and using XMLHttpRequest
• GET, POST, PUT lifecycles
• Handling responses: text, JSON, XML, binary
• Event handling (onreadystatechange, callbacks)

---

📘 Topics Covered

🔖 Topic	📘 Description
🌐 AJAX – Client‑Server Architecture	Overview of how browser and server interact in AJAX communication.
🚀 AJAX – XMLHttpRequest Object Usage	How to initialize and send requests using XHR methods.
🧱 AJAX – Instantiating XHR	Ways to create an XMLHttpRequest object in JS.
⚖️ AJAX – Core Methods	open(), send(), setRequestHeader() with examples.
🔍 AJAX – Key Properties	Understanding readyState, status, responseText, responseXML.
🚗 AJAX – GET Request	Example of sending a GET and handling response.
🚚 AJAX – POST Request	Sending POST data and handling a reply.
🚜 AJAX – PUT Request	Sending PUT requests for updates.
📊 AJAX – Send JSON/Data	How to transmit JSON payloads.
🔢 AJAX – Handling Text Responses	Managing plain-text responses.
📦 AJAX – Handling Binary Data	Processing Blobs, ArrayBuffers from the server.
📁 AJAX – Handling XML & JSON	Parsing application/xml & application/json responses.
🖊️ AJAX – Callbacks	Named vs anonymous callbacks for async events.
🛎️ AJAX – onreadystatechange Event	Listening for state changes and response processing.

---

🌐 AJAX – Client‑Server Architecture

AJAX is just a network convention in the browser:

1. Browser triggers a JS event (click/form submit).
2. JS creates a request via XMLHttpRequest.
3. Server processes and responds (JSON/XML/text).
4. JS callback updates the UI dynamically.

---

🚀 AJAX – XMLHttpRequest Object Usage

Core methods:

xhr.open(method, url, async);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(body);

This sets the HTTP method, headers, and body for async transmission.

---

🧱 AJAX – Instantiating XMLHttpRequest

let xhr = new XMLHttpRequest();
// Optional older IE fallback:
// let xhr = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();

---

⚖️ AJAX – Core Methods

• open(method, url, async): Initialize your request
• send(body): Dispatch it
• setRequestHeader(header, value): Define headers

---

🔍 AJAX – Key Properties

• readyState (0–4): status of request
• status: HTTP status code (200, 404, etc.)
• responseText, responseXML: raw responses

---

🚗 AJAX – GET Request Example

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

---

🚚 AJAX – POST Request Example

xhr.open('POST', '/api/users', true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(JSON.stringify({ name: 'Alice' }));

---

🚜 AJAX – PUT Request Example

xhr.open('PUT', '/api/users/123', true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(JSON.stringify({ age: 31 }));

---

📊 AJAX – Sending JSON & Data Objects

Use JSON for structured payloads:

xhr.setRequestHeader('Content-Type','application/json');
xhr.send(JSON.stringify(obj));

To send form data:

let formData = new FormData(formElement);
xhr.send(formData);

---

🖊️ AJAX – Callback Functions

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { /* handle response */ }
};
// or:
xhr.onload = () => { /* success */ };
xhr.onerror = () => { /* fail */ };

---

🛎️ AJAX – onreadystatechange Event Handling

Track and respond to each state change:

xhr.onreadystatechange = () => {
  console.log(xhr.readyState, xhr.status);
};

---

📌 Summary – Recap & Next Steps

AJAX’s full lifecycle—from request creation to response handling—powers seamless web experiences:

• Initiate requests with xhr.open() + xhr.send()
• Monitor state via readyState and status
• Decode JSON/XML/text and update UI with callbacks

Understanding this flow grants you fine‑grained control over every AJAX interaction in your apps, from loading data to error handling and beyond.

---

❓ Frequently Asked Questions (FAQs)

❓ What are the readyState values?
✅ 0: Unsent; 1: Opened; 2: Headers received; 3: Loading; 4: Done.

❓ Why use onreadystatechange over onload?
✅ It gives you more control across all stages; onload triggers only upon completion.

❓ Can I send files via AJAX?
✅ Yes—by using FormData and sending it via XHR, or with fetch()/Axios too.

❓ Is synchronous XHR still allowed?
⚠️ It’s deprecated in browsers; always favor asynchronous requests for good UX.

---

Share Now :