---
title: "AJAX and how it works"
subject: "Web Technology"
chapter: 6
key: "semester_7/web_technology:ajax-request-response"
source: https://www.bctengineer.com/q/semester_7/web_technology/ajax-request-response
site: BCT Engineering
---

# AJAX and how it works

Web Technology · Chapter 6: Web 2.0

- Asked in: 2068 Chaitra (old course), 5 marks; 2074 Asoj, 3 marks; year not given, 2.5 marks; 2074 Chaitra (asked 3 times)
- Video: [What Is Ajax?](https://www.youtube.com/watch?v=3l13qGLTgNw) — WebConcepts
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/ajax-request-response
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-6

## Question

Briefly explain how AJAX request and response work.

## Short answer

AJAX uses XMLHttpRequest to send asynchronous HTTP requests. The server processes and returns data; the callback updates the DOM when readyState is 4 and status is 200, without reloading the page.

## Answer

**AJAX (Asynchronous JavaScript and XML)** is a technique that lets a web page send requests to the server and update parts of the page **in the background, without reloading the whole page**. It combines HTML/CSS, the DOM, JavaScript, the `XMLHttpRequest` object (or `fetch`) and data formats such as XML or JSON.

#### How the request and response work
1. **Event:** A user action (click, key press, timer) triggers a JavaScript function.
2. **Create object:** JavaScript creates an `XMLHttpRequest` object.
3. **Send request:** `open(method, url, async)` and `send()` send an HTTP request to the server asynchronously; the page stays usable.
4. **Server processing:** The server script (PHP, Servlet, etc.) processes the request, may query a database, and returns data (text, XML or JSON).
5. **Callback:** When the response arrives, `onreadystatechange` fires. When `readyState == 4` and `status == 200`, the response is ready.
6. **Update page:** JavaScript reads `responseText` or `responseXML` and updates the DOM, changing only a part of the page.

```text
Browser (JS)                     Server
  | -- XMLHttpRequest (async) -->  |
  |   (user keeps working)         | process
  | <-- response (JSON/XML/text) - |
  |  update DOM: only part changes |
```

```javascript
function loadData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("result").innerHTML = xhr.responseText;
    }
  };
  xhr.open("GET", "data.php?id=5", true);   // true = asynchronous
  xhr.send();
}
```
`readyState` values: 0 unsent, 1 opened, 2 headers received, 3 loading, 4 done.

**Advantages:** faster, less bandwidth, better user experience (Gmail, Google Maps, live search suggestions).

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. What is the main benefit of AJAX?
   A. Parts of a page update in the background without reloading the whole page
   B. It replaces HTML
   C. The server is no longer needed
   D. All pages load faster by caching images
   Answer: A. AJAX sends asynchronous requests and updates only part of the page. (Key point: AJAX purpose)

2. Which condition shows the response is ready in XMLHttpRequest?
   A. readyState == 1 and status == 200
   B. readyState == 2 only
   C. readyState == 0 and status == 404
   D. readyState == 4 and status == 200
   Answer: D. readyState 4 means done and status 200 means success. (Key point: Completed response)

3. What does the third argument true in xhr.open("GET", url, true) mean?
   A. The response is cached
   B. The request is asynchronous
   C. The request is sent twice
   D. The request uses HTTPS
   Answer: B. true means asynchronous, so the page stays usable while the request is processed. (Key point: Async parameter)

4. After the response arrives, how is the page updated?
   A. The server edits the browser's HTML file
   B. JavaScript reads responseText or responseXML and updates the DOM
   C. The browser reloads the whole page
   D. The user must refresh manually
   Answer: B. The callback uses the response data to change only part of the DOM. (Key point: Updating page)

## Related in other subjects

- [DNS request/response structure](https://www.bctengineer.com/question.md?key=semester_7%2Fcomputer_networks_and_security%3Adns-request-response) — Computer Networks and Security, chapter 6
- [CGI working; JSP vs ASP; AJAX](https://www.bctengineer.com/question.md?key=semester_8%2Finternet_and_intranet%3Acgi-jsp-asp-ajax) — Internet and Intranet, chapter 6
- [Recursive function and how it works](https://www.bctengineer.com/question.md?key=semester_1%2Fcomputer_programming%3Arecursive-function-explain) — Computer Programming, chapter 6, asked 3×
- [Building: excavation, PCC, brick, wood work](https://www.bctengineer.com/question.md?key=semester_7%2Festimating_and_costing%3Abuilding-f-fig3-four-items) — Estimating and Costing, chapter 6