express学习46-ajax实现步骤

ajax.js

    // 引用expess框架
    const express = require('express');
    // 处理路径
    const path = require('path');
     
    // 创建网站服务器
    const app = express();
    app.get('/first', (req, res) => {
        res.send('hello geyao')
    })
    app.use(express.static(path.join(__dirname)));
    // 监听端口
    app.listen(3000);
    console.log('网站服务器启动成功, 请访问localhost')

ajax.html

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8"><!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
     
    <body>
        <script>
            //1创建ajax对象
            var xhr = new XMLHttpRequest();
            //请求方式
            xhr.open('get', 'http://localhost:3000/responsdate');
            //发送请求
            xhr.send();
            //获取数据
            xhr.onload = function() {
                /* console.log(xhr.responseText); */
                var res = JSON.parse(xhr.responseText);
                console.log(res);
                var str = '<h2></h2>'
                document.body.innerHTML = str;
            }
        </script>
    </body>
     
    </html>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
     
    <body>
        <script>
            //1创建ajax对象
            var xhr = new XMLHttpRequest();
            //请求方式
            xhr.open('get', 'http://localhost:3000/first');
            //发送请求
            xhr.send();
            //获取数据
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        </script>
    </body>
     
    </html>

运行结果

 

posted @ 2022-08-13 21:30  前端导师歌谣  阅读(27)  评论(0)    收藏  举报