AJAX (Asynchronous JavaScript and XML) is a set of web development techniques that allows web applications to send and receive data from a server asynchronously without reloading the page. This results in faster, more dynamic, and responsive user experiences.

Here are common AJAX applications in JavaScript:

? 1. Form Submission Without Reload

Instead of submitting a form in the traditional way (which reloads the page), you can use AJAX to send form data to the server and handle the response without a refresh.

const form = document.getElementById("myForm");form.addEventListener("submit", function (e) {  e.preventDefault();  const formData = new FormData(form);  fetch("submit.php", {    method: "POST",    body: formData  })    .then(res => res.text())    .then(data => {      document.getElementById("result").innerHTML = data;    });});

? 2. Auto-refresh Content (e.g., Notifications, Messages)

AJAX can be used to fetch data periodically (like new messages or notifications).

setInterval(() => {  fetch("get_notifications.php")    .then(res => res.json())    .then(data => {      document.getElementById("notif-count").textContent = data.count;    });}, 5000);

? 3. Live Search / Auto-complete

Search suggestions can be fetched while typing.

document.getElementById("search").addEventListener("input", function () {  let query = this.value;  fetch("search.php?q=" + encodeURIComponent(query))    .then(res => res.json())    .then(data => {      let results = data.map(item => `<li>${item}</li>`).join('');      document.getElementById("suggestions").innerHTML = results;    });});

? 4. Load Content Dynamically (Pagination, Tabs)

Load parts of the content dynamically, such as next page results or tabbed content.

document.getElementById("loadMore").addEventListener("click", function () {  fetch("load_more.php?page=2")    .then(res => res.text())    .then(data => {      document.getElementById("content").innerHTML += data;    });});

? 5. Update/Delete Records (CRUD Operations)

AJAX is often used in admin dashboards for actions like updating or deleting records.

function deleteRecord(id) {  fetch("delete.php?id=" + id, { method: "DELETE" })    .then(res => res.text())    .then(response => alert(response));}

Tools Commonly Used with AJAX:

• XMLHttpRequest: Older method (still supported)

• fetch(): Modern, cleaner promise-based API

• jQuery.ajax(): Still used in legacy systems

Would you like a sample project showing AJAX in action (like a chat app or live search)?