JavaScript AJAX

JavaScript AJAX (Asynchronous JavaScript and XML)

In JavaScript AJAX allows web pages to update content without reloading the entire page.
It communicates with a server in the background and fetches data asynchronously.

Why Use AJAX?

Feature	Benefit
Asynchronous	Page does not reload
Faster	Only required data loads
Used in	APIs, search suggestions, forms, dynamic content

Example: When searching in Google, results appear instantly — that’s AJAX.

AJAX Uses in Real World

Auto-search suggestions
Loading data dynamically (products, users)
Submitting forms in the background
Fetching live data (weather, stock updates)

AJAX Methods in JavaScript

Method	Description
`XMLHttpRequest`	Old traditional method
`fetch()`	Modern and simpler
Libraries	jQuery AJAX (optional)

AJAX with `XMLHttpRequest` (Old Method)

AJAX with `fetch()` (Modern Way — Recommended)

Sending Data (POST Request)

Using Fetch

fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "Hello",
body: "This is AJAX POST",
userId: 1
})
})
.then(res => res.json())
.then(data => console.log(data));

fetch("https://jsonplaceholder.typicode.com/posts", {

method: "POST",

headers: {

"Content-Type": "application/json"

body: JSON.stringify({

title: "Hello",

body: "This is AJAX POST",

userId: 1

})

.then(res => res.json())

.then(data => console.log(data));

AJAX Response Types

Type	Example
Text	Plain text file
JSON	Most common API response
XML	Old format
HTML	Insert into webpage section

AJAX with DOM Example (Display Fetched Data)

<button onclick="loadData()">Load Users</button>
<div id="output"></div>

<script>
function loadData() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(users => {
let html = "";
users.forEach(user => {
html += `<p>${user.name} - ${user.email}</p>`;
});
document.getElementById("output").innerHTML = html;
});
}
</script>

<button onclick="loadData()">Load Users</button>

function loadData() {

fetch("https://jsonplaceholder.typicode.com/users")

.then(res => res.json())

.then(users => {

let html = "";

users.forEach(user => {

html += `<p>${user.name} - ${user.email}</p>`;

});

document.getElementById("output").innerHTML = html;

});

}

</script>

AJAX Error Handling

AJAX + JSON + LocalStorage Example

AJAX Keywords Summary

Term	Meaning
Async	Runs without blocking UI
Request	Asking server for data
Response	Server sends data
API	Service providing data
JSON	Format used to send data

Summary

Feature	Old	New
Syntax	`XMLHttpRequest`	`fetch()`
Easier?	Hard	Simple
Supports Promise?	No	Yes