Ajax tutorial in Advance JavaScript

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Ajax tutorial Advance JavaScript</title>

    <link rel="stylesheet" href="">

</head>

<body>

    <p id="demo">Here we load data.</p>

    <button onclick="loadData()">Click</button>

    <button onclick="loadDataTwo()">Click Here</button>

    <script>

        //Example 1 :

        function loadData() {

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {

                //Here below "this" represents "xhttp" Object

                if (this.readyState == 4 && this.status == 200) {

                    document.getElementById("demo").innerHTML = this.responseText;

                    console.log(this.responseText);

}

                else if (this.readyState == 4 && this.status == 404) {

                    document.getElementById("demo").innerHTML = "File not found.";

}

};

            xhttp.open("GET", "content/readme.txt", true);

            xhttp.send();

}

        //Example 2 :

        function loadDataTwo() {

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {

                if (this.readyState == 4 && this.status == 200) {

                    document.getElementById("demo").innerHTML = this.responseText;

                    console.log(this.responseText);

}

                else if (this.readyState == 4 && this.status == 400) {

                    document.getElementById("demo").innerHTML = "File not found.";

}

};

            xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

            xhttp.send();

}

    </script>

</body>

</html>

Below File is content/readme.txt File

Hello this is text file.

JavaScript