Clean • Professional
AJAX (Asynchronous JavaScript and XML) enables web pages to send and receive data from a server asynchronously — without reloading the entire page.
It allows web applications to be faster, interactive, and user-friendly.
| Application | Description |
|---|---|
| Form Validation | Validate form fields instantly without reloading the page. |
| Live Search (Autocomplete) | Show search suggestions while typing. |
| Auto Refresh / Live Data Update | Update stock prices, weather info, or notifications in real time. |
| Chat Applications | Exchange messages instantly using background AJAX requests. |
| Data Submission | Submit form data to the server and show results immediately. |
| Content Loading | Load parts of a webpage dynamically (e.g., comments, images, or pagination). |
| Voting / Rating System | Send user votes or ratings asynchronously. |
| Real-time Notifications | Display messages or alerts without reloading the page. |
1. Live Search Example
<input type="text" id="search" placeholder="Search...">
<div id="result"></div>
<script>
document.getElementById("search").addEventListener("keyup", function() {
const query = this.value;
if (query.length > 0) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhr.open("GET", "search.php?q=" + encodeURIComponent(query), true);
xhr.send();
} else {
document.getElementById("result").innerHTML = "";
}
});
</script>
2. Submitting a Form Without Reloading
<form id="myForm">
<input type="text" name="name" placeholder="Enter name">
<input type="email" name="email" placeholder="Enter email">
<button type="submit">Submit</button>
</form>
<p id="message"></p>
<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch("submit.php", { method: "POST", body: formData })
.then(response => response.text())
.then(data => document.getElementById("message").innerHTML = data)
.catch(err => console.error(err));
});
</script>
3. Auto-Refreshing Data (Example: Stock Price)
<div id="stockPrice">Loading...</div>
<script>
function updateStock() {
fetch("stock.php")
.then(response => response.text())
.then(data => document.getElementById("stockPrice").innerHTML = data);
}
setInterval(updateStock, 5000); // Update every 5 seconds
updateStock(); // Initial call
</script>
4. Simple Voting System
<button onclick="vote('up')">👍</button>
<button onclick="vote('down')">👎</button>
<p id="result"></p>
<script>
function vote(type) {
fetch("vote.php?vote=" + type)
.then(res => res.text())
.then(data => document.getElementById("result").innerHTML = data);
}
</script>
| Website | AJAX Usage |
|---|---|
| Google Search | Shows instant results as you type (Live Search). |
| YouTube | Loads comments, suggestions, and video lists dynamically. |
| Facebook / Twitter | Loads posts, notifications, and messages without refreshing. |
| Gmail | Updates inbox and sends emails asynchronously. |
| Amazon / Flipkart | Updates product filters, prices, and reviews dynamically. |