Understanding AJAX (Asynchronous JavaScript and XML)

Agasya Reddy · March 4

AJAX is a set of web development techniques used to create asynchronous web applications. It allows you to update parts of a web page without reloading the entire page. AJAX achieves this by making requests to the server in the background, fetching data, and then updating the webpage dynamically with the retrieved data.

Example

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
</head>
<body>
<h2>Dynamic Content</h2>
<button onclick="fetchData()">Fetch Data</button>
<div id="data"></div>
</body>
<script>
        function fetchData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("data").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "data.txt", true);
            xhttp.send();
        }
    </script>

</html>