1.AJAX -Basic operation of request

After clicking the sending request, the response will be printed in the window below

在这里插入图片描述
ajaxDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax get request</title>
    <style>
        #result {
      
            width: 200px;
            height: 100px;
            border: solid 1px #CCC;
        }
    </style>
</head>
<body>
<button>Click to send request</button>
<div id="result"></div>

<script>
</script>
</body>
</html>

在这里插入图片描述
server.js

// 1. Introduce Express
const express = require('express');

// 2. Create application objects
const app = express();

// 3. Create routing rules
// Request is the package of the request message
// Response is a package of the response message
app.get('/server', (request, response) => {
    
    // Set the response => Allow cross -domain
    response.setHeader('Access-Control-Allow-Origin', '*');
    // Set response
    response.send('HELLO EXPRESS');
});

// 4. Surveillance port startup service
app.listen(8000, () => {
    
    console.log("The service has been started, and the 8000 port is listening ...");
});

Start the server:

1.2 Ajax Get request

code:

AjaxDemo.html Script label

    <!--Get button element-->
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');

    // Binding event
    btn.onclick = () => {
    
        // 1. Create objects
        const xhr = new XMLHttpRequest();
        // 2. Initialize the request method and URL
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        // 3. Send
        xhr.send();
        // 4. The results returned by the event binding processing service side
        // on when ....
        // ReadyState is the attribute in the XHR object, indicating status 0 1 2 3 4
        // Change change
        xhr.onreadystatechange = () => {
    
            // Judgment (the server returns all the results)
            if (xhr.readyState === 4) {
    
                // Judgment response status codes 200 404 403 401 500
                // 2xx Successful
                // Treatment results Line heads
                // response
            if (xhr.status >= 200 && xhr.status < 300) {
    
                console.log("Status code:" + xhr.status);// The status code of the response
                console.log("xhr.statusText: " + xhr.statusText);// The status string of the response
                console.log("Response head:" + xhr.getAllResponseHeaders());// All the response header
                console.log("response body:" + xhr.response);// response body
                // Set the text of Result
                result.innerText = xhr.response;
}
            }
        }
    }

Instructions:

const xhr = new xmlhttpRequest ();

See the famous meaning: XHR is the abbreviation of XMLHTTPREQUEST, and there is XHR in the console of the tourist (indicating AJAX please request)
在这里插入图片描述

How to judge the server back to all the results? => ReadyState is the attribute in the XHR object, indicating status 0 1 2 3 4

When the status code is 4, it means that all data has returned.

1.3 Test: We took the result from the server without refreshing

2. Set the request parameter

AjaxDemo.html Script label

    <!--Get button element-->
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');

    // Binding event
    btn.onclick = () => {
    
        // 1. Create objects
        const xhr = new XMLHttpRequest();
        // 2. Initialize the request method and URL
       xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
        // 3. Send
        xhr.send();
        // 4. The results returned by the event binding treatment of the server
        xhr.onreadystatechange = () => {
    
            // Judgment (the server returns all the results)
            if (xhr.readyState === 4) {
    
              if (xhr.status >= 200 && xhr.status < 300) {
    
               // Set the text of Result
                result.innerText = xhr.response;
              }
            }
        }
    }