AJAX

2022-09-24

Word count: 879 | Reading time≈ 5 min

AJAX Intro

AJAX Intro

AJAX = Asynchronous JavaScript And XML.
AJAX just uses a combination of:

A browser built-in XMLHttpRequest object(to request data from a web server)
JavaScript and HTML DOM(to display or use data)

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

JS AJAX Template

<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<div id="demo">
    <p>Let AJAX change this text.</p>
    <button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
    // Create an XMLHttpRequest object
    if (window.XMLHttpRequest) {
        //For all modern browsers(Chrome, Firefox, IE, Edge, Safari, Opera)
        xmlhttp = new XMLHttpRequest();
    } else {
        //For the old version IE browser
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // Send a request
    // xhttp.open(method, url, async)
    xhttp.open("post", "http://localhost:8080");
    xhttp.send();

    //Process data
    xhttp.onreadystatechange = function (resp) {
        // When readyState is 4 and status is 200,
        // the response is ready
        if (this.readyState == 4 && this.status == 200) {
            //  
        }
    };
</script>
</body>
</html>

jQuery AJAX

jQuery load() Method

THe jQuery load() method loads data from a server
and puts the returned data into the selected element[$(selector)]
$(selector).load(url, data, callback)

The required URL parameter specifies the URL you wish to load.
The optional DATA parameter specifies a set of query key/value pairs to sent along with the request.
The optional CALLBACK parameter is the name of a function to be executed after the load() method is completed.

Template

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            //An event occurs
            $("button").click(function () {
                $("#div1").load("demo_test.txt", function (responseTxt, statusTxt, xhr) {
                    //responseText -contains the resulting content if the call succeeds.
                    //statusTxt -contains the status of the call
                    //xhr -contains the XMLHttpRequest object
                    if (statusTxt == "success")
                        alert("External content loaded successfully!");
                    if (statusTxt == "error")
                        alert("Error: " + xhr.status + ": " + xhr.statusText);
                });
            });
        });
    </script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>

jQuery $.get() method

The $.get() method request data from the server with an HTTP GET request.
$.get(URL,callback)

The required URL parameter specifies the URL you wish to request.
The optional callback parameter is the name of a function to be executed if the request succeeds.

Template

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $.get("demo_test.asp", function (data, status) {
                    alert("Data: " + data + "\nStatus: " + status);
                });
            });
        });
    </script>
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>

jQuery $.post() method

The $.post() method requests data from the server using an HTTP POST request.
$.post(URL, data, callback)

The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the request.
The optional callback parameter is the name of a function to be executed if the request succeeds.

Template

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $.post("demo_test_post.asp",
                        {
                            name: "Donald Duck",
                            city: "Duckburg"
                        },
                        function (data, status) {
                            alert("Data: " + data + "\nStatus: " + status);
                        });
            });
        });
    </script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>

axios

axios
Using CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

send a post request

axios({
    method: 'post',
    url: '/user/12345',
    data: {
    firstName: 'Fred',
    lastName: 'FlintStone'
    }
}).then(function (resp){
<!-- process response data -->
    resp.data   
});

send a get request

axios({
    method: 'get',
    url: 'http://localhost:8080',
}).then(function (response) {
<!-- process response data -->
    resp.data
});

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.