实现AJAX GET请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40492102/article/details/108080415

准备工作

新建以下两个文件，目录结构如图所示，包括：
1-GET.html
server.js

1-GET.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 请求</title>
    <style>
        body {
            background: cornsilk;
        }
        
        #btn {
            width: 20vw;
            height: 10vh;
            margin-left: 50%;
            margin-top: 10vh;
            transform: translateX(-50%);
            font-size: 1.4rem;
            letter-spacing: 2px;
        }
        
        #result {
            width: 50vw;
            height: 50vh;
            border: 1px solid pink;
            margin: 10vh auto;
            line-height: 50vh;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <div id="result">
    </div>

</body>
<script>
    btn.onclick = function() {
        console.log('test');
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        xhr.send();
        xhr.onreadystatechange = function() {
            console.log(xhr.readyState);
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300){
                    // 行 头 空行 体
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态字符串
                    console.log(xhr.getAllResponseHeaders()); //所有响应头
                    console.log(xhr.response); //响应体
                    result.innerHTML = xhr.response;
                }
            }
        }
    }
</script>

</html>

server.js

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头 设置运行跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    // 设置响应体
    response.send("AJAX HELLO");

});

// 4.监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中……");
});