Web Designing 2 — Unit 4: AJAX

01

6 Marks Question

Fundamentals of AJAX Technology

Introduction

AJAX (Asynchronous JavaScript and XML) is a technique used to create dynamic and interactive web pages. It allows web pages to communicate with the server in the background without reloading the entire page.

AJAX is not a programming language; it is a combination of existing web technologies.

Fundamental Concepts of AJAX

Asynchronous Communication

AJAX sends and receives data in the background without blocking the user interface. Users can continue working while data loads.

Partial Page Update

Only the required part of the web page is updated instead of reloading the whole page.

Background Data Transfer

Data is exchanged between browser and server silently using JavaScript.

Improved User Experience

Eliminates the traditional "click → wait → refresh" behavior and makes web apps faster and smoother.

Technologies Used in AJAX

AJAX works using a combination of:

HTML & CSSFor page structure and styling.

JavaScriptFor dynamic interaction and controlling AJAX.

DOMFor dynamic modification of page content.

XHR ObjectXMLHttpRequest for server communication.

XML / JSONFor transferring data between client and server.

Working of AJAX (Basic Flow)

1

User performs an action

User clicks a button or types in a field.

2

JavaScript creates an AJAX request

JavaScript uses the XMLHttpRequest object to prepare a request.

3

XMLHttpRequest sends request to server

The request is sent to the web server in the background.

4

Server processes the request

Server runs the required logic and accesses the database.

5

Server returns data

Server sends back data in XML, JSON, or text format.

6

JavaScript updates part of the page

JavaScript receives the response and updates only the required part of the page using DOM.

Conclusion AJAX is a powerful web technology that enables asynchronous communication and partial page updates, resulting in faster, more responsive web applications.

02

6 Marks Question

Difference Between Synchronous and Asynchronous Web Application

Web applications communicate with the server either synchronously or asynchronously. In synchronous mode, the browser waits for the server response. In asynchronous mode (AJAX), the browser continues working while the request is processed.

Synchronous

A synchronous request blocks the client until the server completes the operation and returns the response.

Browser becomes unresponsive while waiting
Full page refresh occurs
Tasks execute sequentially
Slower user experience

Example: Submitting a traditional HTML form that reloads the entire page.

Asynchronous (AJAX)

An asynchronous request does not block the client. The browser remains responsive and updates only the required part of the page.

Browser remains responsive
No full page reload
Multiple requests can run independently
Faster and smoother user experience

Example: Gmail loading new emails without refreshing the page.

Comparison Table

Basis	Synchronous	Asynchronous
Blocking	Browser is blocked	Non-blocking
Page Reload	Full page refresh	Partial update only
User Experience	Slow and interruptive	Fast and smooth
Execution Flow	Sequential	Independent / parallel
Modern Usage	Rarely used	Standard in modern web apps

Conclusion Synchronous web apps wait for server responses and refresh the whole page, while asynchronous web apps (AJAX-based) update data in the background, providing better performance and user experience.

03

6 Marks Question

XMLHttpRequest Object — Properties and Methods

Definition

The XMLHttpRequest (XHR) object is a built-in browser API used in AJAX to send and receive data from a web server in the background without reloading the entire page. It enables asynchronous communication and dynamic page updates.

Purpose of XMLHttpRequest

Exchange data with server asynchronously.
Update part of the web page using DOM.
Improve responsiveness of web applications.

Creating an XMLHttpRequest Object

var xhr = new XMLHttpRequest();

After creation, open() initializes the request and send() sends it to the server.

Important Properties of XMLHttpRequest

Property	Description
readyState	Indicates the state of the request (values: 0 to 4).
status	Returns HTTP status code (e.g., 200 = OK).
statusText	Returns status message (e.g., "OK").
responseText	Returns response data as plain text.
responseXML	Returns response data as an XML document.

Important Methods of XMLHttpRequest

Method	Description
open(method, URL, async)	Initializes the request. Specify GET/POST, the URL, and whether async.
send()	Sends the request to the server.
onload / onreadystatechange	Callback function executed when response is received.
setRequestHeader()	Sets an HTTP request header.
abort()	Cancels the current request.

Basic Example

var xhr = new XMLHttpRequest();

xhr.onload = function() {
  document.getElementById("demo").innerHTML = xhr.responseText;
};

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

How it works: Creates the XHR object → Opens a GET request → Sends to server → When response arrives, updates the page element without any full reload.

Conclusion The XMLHttpRequest object is the core of AJAX technology, enabling asynchronous server communication and dynamic web page updates.

04

6 Marks Question

Working of AJAX and its Architecture

Working of AJAX

AJAX works by exchanging data between the browser and server in the background without reloading the entire web page. It uses the XMLHttpRequest object for communication.

Steps in AJAX Working

1

User Action

User performs an action (click, type, submit).

2

JavaScript Call

JavaScript sends the request to the XMLHttpRequest object.

3

HTTP Request to Server

XMLHttpRequest sends an HTTP request to the web server.

4

Server Processing

Server processes the request (using PHP/JSP/ASP.NET etc.) and accesses the database.

5

Server Response

Server returns data in XML, JSON, or text format.

6

Update Web Page

JavaScript receives the response and updates only the required part of the page using DOM. No full page reload occurs.

AJAX Architecture

AJAX architecture is the combination of technologies that work together to enable asynchronous web communication.

HTML & CSS

Provide structure and presentation of the web page.

DOM (Document Object Model)

Allows dynamic modification of page content without full reload.

JavaScript

Handles user events and controls all AJAX operations.

XMLHttpRequest / Fetch API

Sends and receives data asynchronously from the server.

Data Format (XML / JSON / Text)

Used to transfer data between client and server efficiently.

Conclusion AJAX works by sending background requests through XMLHttpRequest and updating only parts of the web page. Its architecture combines HTML, CSS, DOM, JavaScript, and data formats to create fast and interactive web applications.