【ajax】发送请求 —— 结合【express】框架 { }

最新推荐文章于 2023-01-14 17:51:15 发布

微风拂晚霞

最新推荐文章于 2023-01-14 17:51:15 发布

阅读量279

点赞数 2

分类专栏： Web前端文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_43921423/article/details/108558808

版权

Web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、先用 express 框架搭建一个简单的服务器

（1）在文件夹上点击右键，点击“在集成终端中打开”

在这里插入图片描述

（2）使用“npm i express”命令安装【express】

在这里插入图片描述

如果无法安装，使用 “npm init” 命令初始化一下 npm

（3）创建 “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('Hello AJAX GET by Fireming');
});
// 4、监听端口启动服务
app.listen(8000,() => {
    console.log("服务已经启动~");
})

使用 “node server.js” 在服务端运行js文件

在这里插入图片描述

使用 “Ctrl + c” 停止运行

在这里插入图片描述

为了解决之后因修改server.js中的代码而需要【经常】重新启动服务的问题，使用 “npm i nodemon” 安装【nodemon】插件来重启服务
使用 “nodemon server.js” 来启动服务
当你修改 server.js 的代码之后，就会出现以下这样的提示

（4）创建 “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>
        #result {
            width: 150px;
            height: 50px;
            border: 1px solid rgb(0, 133, 44);
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <!-- 把服务端返回的响应体结果呈现在div中 -->
    <div id="result"></div>

    <script>
        let result = document.getElementById('result');
        // 获取点击按钮
        let btn = document.getElementsByTagName('button')[0];
        // 绑定事件
        btn.onclick = function(){
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            // 3、发送
            xhr.send();
            // 4、事件绑定 处理服务端返回的结果
                // readystate 是xhr对象中的属性，
                // 表示状态 0（未初始化） 1（open调用完毕） 2（send调用完毕） 3（服务端返回部分结果） 4（返回所有结果）
            xhr.onreadystatechange = function(){
                // 判断（服务端返回了所有结果）
                if(xhr.readyState === 4){
                    // 判断响应状态码（200 404 403 401 500）
                    // 2 开头的都表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果 行 头 空行 体
                        // 1、响应行
                        /* console.log(xhr.status); // 状态码
                        console.log(xhr.statusText); // 状态字符串
                        console.log(xhr.getAllResponseHeaders); // 所有的响应头
                        console.log(xhr.response); // 响应体 */
                        result.innerHTML = xhr.responseText;
                    }else{

                    }
                }
            }

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

按下按钮

在这里插入图片描述

微风拂晚霞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【ajax】发送请求 —— 结合【express】框架 { }

1、先用 express 框架搭建一个简单的服务器（1）在文件夹上点击右键，点击“在集成终端中打开”（2）使用“npm i express”命令安装【express】（3）创建 “server.js”// 1、引入express框架const express = require('express');// 2、创建应用对象const app = express();// 3、创建路由规则 // request是对请求报文的封装 // response是对响应报文的封装
复制链接

扫一扫