Ajax的使用笔记（一）----express安装，xhr原生Ajax

最新推荐文章于 2024-04-28 04:00:44 发布

小芒QVQ

最新推荐文章于 2024-04-28 04:00:44 发布

阅读量458

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_61662856/article/details/126256082

版权

本文介绍如何使用Node.js环境下的Express框架搭建一个简易的Web服务器，并通过HTML文件发起HTTP请求获取响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装express

1.首先安装node
2.新建一个文件夹，在cmd中打开（注意路径最好要全英文），输入npm init格式化文件夹，一直回车在这里插入图片描述
3.下一步输入npm install express，然后就安装成功了

2.设置响应体、头等

用vscode打开文件夹，新建一个express.js文件

//aixos响应头设置
//1.引入express
// const { response } = require('express');
const express = require('express');
const cors = require('cors')
// const { request } = require('http');
//2.创建应用对象
const app = express();
//3.创建路由规则
app.all('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    let data = {
        name: 'axios'
    }
    let dataS = JSON.stringify(data)
    response.send(data)
});
app.use(cors())
//4.监听端口启动服务
app.listen(8080, () => {
    console.log("服务已启动,8080 端口监听中...");
})

打开终端，输入node express.js，端口就会启动。快捷键ctrl +c关闭端口。也可以安装nodemon插件，在终端中输入npm install nodemon即可

3.引入到HTML文件中

打开浏览器开发者模式，找到network刷新页面，看到状态码是200就没问题了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <style>
        #input {
            height: 200px;
            width: 200px;
            box-sizing: border-box;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <div id="input"></div>
    <script>
        let result = document.querySelector('#input')
        let btn1 = document.querySelectorAll('button')[0]
        let btn2 = document.querySelectorAll('button')[1]
        let xhr = new XMLHttpRequest()
        let on = false
        //是否正在发送请求
        btn1.onclick = function () {
            result.innerHTML = ''
            on = true
            //初始化，设置请求方法和url
            xhr.open('GET', "http://127.0.0.1:8080/server")
            //发送
            xhr.send('')
            //事件绑定
            xhr.onreadystatechange = function () {
                //0,1,2,3,4
                if (xhr.readyState === 4) {
                    on = false
                    //判断响应状态码
                    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.response
                    }
                }
            }
            btn2.onclick = function () {
                xhr.abort()
                //取消请求
            }
        }
    </script>

</body>

</html>