Ajax Intro in JavaScript
? AJAX Introduction in JavaScript
AJAX stands for Asynchronous JavaScript and XML. It's a technique used in web development to send and receive data from a server without reloading the webpage.
? Why Use AJAX?
Update part of a web page without refreshing the whole page
Improve user experience with faster, more dynamic interfaces
Communicate with server-side scripts (like PHP, ASP, or Node.js)
Retrieve or send data (text, HTML, JSON, XML, etc.)
? How AJAX Works
User Action (e.g., click/search) ?JavaScript makes AJAX call ?Server processes request (e.g., PHP/ASP.NET) ?Server sends back response (e.g., JSON) ?JavaScript updates the web page (DOM)? Basic AJAX Example Using XMLHttpRequest
<button onclick="loadData()">Load Data</button><div id="output"></div><script>function loadData() { const xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onload = function () { if (xhr.status === 200) { document.getElementById("output").innerHTML = xhr.responseText; } }; xhr.send();}</script>data.txt (on server):
Hello from the server!? Modern AJAX: Using fetch()
fetch("data.txt") .then(response => response.text()) .then(data => { document.getElementById("output").innerHTML = data; });? Types of Data You Can Exchange
Text – Plain responses (
.txt)HTML – Snippets to insert dynamically
JSON – Structured data (most common)
XML – Older structured format
? Real-Life Use Cases of AJAX
| Feature | AJAX Use |
|---|---|
| Live search suggestions | Load matching results as you type |
| Form submission | Submit without reloading the page |
| Chat applications | Send/receive messages instantly |
| Notification updates | Show new alerts/messages automatically |
| Pagination or filtering | Update table or list data dynamically |
? Tools to Use with AJAX
Vanilla JavaScript
jQuery AJAX (
$.ajax,$.get,$.post)Modern APIs like
fetch()Backends like PHP, ASP, Node.js, Python, etc.
? Summary
AJAX allows web pages to communicate with the server without reloading
Improves speed and interactivity
Uses JavaScript and a backend to exchange data (often in JSON format)
Would you like to try a step-by-step AJAX example that connects to a database (like MySQL or SQL Server)?
