AJAX Introduction
AJAX stands for Asynchronous JavaScript And XML. It is not a programming language, but a combination of existing technologies that allow web pages to be updated asynchronously by exchanging data with a web server in the background.
The Main Benefit of AJAX
Update a web page without reloading the entire page.
This is what makes modern applications like Gmail, Facebook, and Instagram feel so fluid and fast.
How AJAX Works
When an AJAX trigger occurs (like clicking a "Show More" button), the browser follows these 4 main steps:
1
Create Object: An XMLHttpRequest object is created in the browser.
2
Send Request: The browser sends a request to the web server in the background.
3
Server Process: The server processes the request and sends the data back (JSON, XML, or Text).
4
Update Page: JavaScript reads the response and updates the specific part of the page.
AJAX is a Combination of:
- Browser-built-in XMLHttpRequest object: To request data from a web server.
- JavaScript and HTML DOM: To display or use the data returned from the server.
History Note: While "XML" is in the name, modern AJAX applications almost exclusively use JSON because it is lighter and easier to work with in JavaScript.
Why Asynchronous?
In a "Synchronous" request, the browser would stop doing everything else (you couldn't click or scroll) until the server responded. "Asynchronous" means the request happens in the background, so the user can continue interacting with the site while the data is loading.
Example Use Cases
- Live Search Results: Suggestions appearing as you type.
- Infinite Scrolling: Loading more posts as you reach the bottom of a page.
- Real-time Voting: Submitting a "like" without leaving the current post.
- Dynamic Forms: Changing the "City" dropdown based on the selected "Country".
Key Points to Remember
- AJAX is a technique for partial page updates.
- It stands for **Asynchronous JavaScript And XML**.
- It requires the XMLHttpRequest object.
- It makes web apps feel faster and more responsive.
- It only works on Web Servers.
- You don't need a browser refresh to see new server data.