AJAX

JavaWeb
Word count: 879   |   Reading time≈ 5 min

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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

1
2
3
4
5
6
7
8
9
10
11
axios({
    method: 'post',
    url: '/user/12345',
    data: {
    firstName: 'Fred',
    lastName: 'FlintStone'
    }
}).then(function (resp){
<!-- process response data -->
    resp.data   
});

send a get request

1
2
3
4
5
6
7
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.
  • Copyrights © 2022-2023 Ataraxia

请我喝杯咖啡吧~