发送get请求实现功能：点击button显示一条消息

JS单独格式文件：Ajax

// npm i express 安装express
//引入
const express = require('express')
//创建应用对象
const app =express();
//创建路由
app.get('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello');
});
//启动端口 //终端输入运行： node express基本使用.js http://127.0.0.1:8000/ 按ctrl+c释放端口
app.listen(8000,()=>{
console.log('启动端口')
})

html中使用ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #result {
                width: 300px;
                height: 200px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <button type="submit">点击发送请求</button>
        <div id="result"></div>
    </body>
    <script type="text/javascript">
    //获取btn元素
        var btn = document.getElementsByTagName('button')[0];
    //获取div元素
       var result = document.getElementById('result');
    //点击button显示sever.js内容
        btn.onclick = function(){
            //1.创建对象
            var xhl = new XMLHttpRequest();
            //2.设置请求以及url
            xhl.open('GET','http://127.0.0.1:8000/server');
            //3.发送请求到服务器
            xhl.send();
            //4.事件绑定，处理服务器返回的结果  
            //on 当   readystate 是xhl的对象的属性，表示状态：0: 请求未初始化  1: 服务器连接已建立  2: 请求已接收   3: 请求处理中  4: 请求已完成，且响应已就绪
            //onreadystatechange  存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
            //status  状态码
            xhl.onreadystatechange = function(){
                //判断服务器返回所有结果
                if(xhl.readyState === 4){
                    //判断响应状态码是否为200,大于200，小于300
                    if(xhl.status >= 200 && xhl.status < 300 ){
                        //将响应的请求转化为html显示在页面
                        result.innerText = xhl.response;
                    }
                }
            }
        }
         
    </script>
</html>