AJAX Introduction
Introduction to AJAX
AJAX (Asynchronous JavaScript And XML) is a powerful tool for web developers, enabling the following capabilities:
- Read data from a web server after the page has loaded
- Update a web page without reloading the entire page
- Send data to a web server in the background
Example of AJAX in Action
<!DOCTYPE html><html><body><div id="demo"> <h2>Let AJAX change this text</h2> <button type="button" onclick="loadDoc()">Change Content</button></div><script>function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onload = function() { document.getElementById("demo").innerHTML = this.responseText; } xhttp.open("GET", "ajax_info.txt", true); xhttp.send();}</script></body></html>
Explanation of the Example
The HTML page contains a <div> section and a <button>. The <div> section is used to display information retrieved from a server. When the button is clicked, it calls the loadDoc() function, which requests data from a web server and displays it in the <div> section.
Understanding AJAX
AJAX is a technique that combines several technologies:
- XMLHttpRequest Object: Built-in to browsers, used to request data from a web server
- JavaScript and HTML DOM: Used to display or process the retrieved data
Despite its name, AJAX applications often use JSON or plain text instead of XML to transport data.
AJAX allows for asynchronous updates to parts of a web page by exchanging data with a web server in the background, without needing to reload the whole page.
How AJAX Works
The process of AJAX can be broken down into the following steps:
- An event occurs on a web page (e.g., page load, button click).
- JavaScript creates an XMLHttpRequest object.
- The XMLHttpRequest object sends a request to a web server.
- The server processes the request.
- The server sends a response back to the web page.
- JavaScript reads the response.
- JavaScript performs the appropriate action, such as updating the web page.
Modern Browsers and the Fetch API
Modern browsers offer the Fetch API as an alternative to the XMLHttpRequest object. The Fetch API provides a simpler and more flexible way to make HTTP requests to web servers.
Rephrased Example Using Fetch API
Here is how the previous example can be rewritten using the Fetch API
<!DOCTYPE html><html><body><div id="demo"> <h2>Let AJAX change this text</h2> <button type="button" onclick="loadContent()">Change Content</button></div><script>function loadContent() { fetch('ajax_info.txt') .then(response => response.text()) .then(data => { document.getElementById("demo").innerHTML = data; }) .catch(error => { console.error('Error fetching the data:', error); });}</script></body></html>
In this Fetch API example, the fetch() function is used to request the data. The response is then processed with .then() to convert it to text and update the <div> content. The catch() block handles any errors that may occur during the fetch operation.
