What is AJAX?
AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

AJAX (Asynchronous JavaScript And XML)

  • Read data from a web server - after the page has loaded
  • Update a web page without reloading the page
  • Send data to a web server - in the background


AJAX is not a programming language.
AJAX is an important front-end web technology that lets JavaScript communicate with a web server.

AJAX Example

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<div> <small>Click on below button, data will display without reloading the page. </small></div>
<div> <button type="button" onclick="loadDoc()">Change Content</button></div>
</div>
<script>
    function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
            }
        };

        //Requesting data here 
        xhttp.open("GET", "fecthingData.txt", true); 
        xhttp.send();
    }
</script>
</body>
</html>

Screenshot

Add Comments