JavaScript AJAX

JavaScript AJAX (Asynchronous JavaScript and XML)

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)

1️⃣ AJAX with `XMLHttpRequest` (Old Method)

2️⃣ 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?	❌	✅ Yes

JavaScript AJAX

JavaScript AJAX (Asynchronous JavaScript and XML)

🎯 Why Use AJAX?

📌 AJAX Uses in Real World

🚀 AJAX Methods in JavaScript

1️⃣ AJAX with `XMLHttpRequest` (Old Method)

2️⃣ AJAX with `fetch()` (Modern Way — Recommended)

📩 Sending Data (POST Request)

Using Fetch

🌐 AJAX Response Types

🎛️ AJAX with DOM Example (Display Fetched Data)

🔒 AJAX Error Handling

💾 AJAX + JSON + LocalStorage Example

🧠 AJAX Keywords Summary

⭐ Summary

You may also like...

Leave a Reply Cancel reply

JavaScript AJAX

JavaScript AJAX (Asynchronous JavaScript and XML)

🎯 Why Use AJAX?

📌 AJAX Uses in Real World

🚀 AJAX Methods in JavaScript

1️⃣ AJAX with XMLHttpRequest (Old Method)

2️⃣ AJAX with fetch() (Modern Way — Recommended)

📩 Sending Data (POST Request)

Using Fetch

🌐 AJAX Response Types

🎛️ AJAX with DOM Example (Display Fetched Data)

🔒 AJAX Error Handling

💾 AJAX + JSON + LocalStorage Example

🧠 AJAX Keywords Summary

⭐ Summary

You may also like...

JavaScript Scope

JavaScript Events

JavaScript Variables

Leave a Reply Cancel reply

1️⃣ AJAX with `XMLHttpRequest` (Old Method)

2️⃣ AJAX with `fetch()` (Modern Way — Recommended)