简单使用ajax与express

飞天小象吖

已于 2022-05-04 23:00:10 修改

阅读量281

点赞数

文章标签： javascript ajax

于 2022-05-04 21:21:11 首次发布

本文链接：https://blog.csdn.net/weixin_48573538/article/details/124577349

版权

本文详细介绍了如何使用Express搭建后台服务，并通过XMLHttpRequest实现前端与后台的GET请求交互。步骤包括：初始化Express项目，设置跨域访问，监听端口；编写HTML页面，添加按钮和响应事件，发送GET请求并处理响应。通过示例展示了XMLHttpRequest的readyState和status属性在请求过程中的变化，以及错误处理。最后展示了成功交互后的页面效果。

摘要由CSDN通过智能技术生成

文件目录

在这里插入图片描述

1、搭建后台

利用express框架

安装依赖：npm i express
初始化：npm init -y
package.json 设置：“dev”: “node express.js”

// express.js

// 引入依赖
const express = require('express')
//创建express对象实例
const app = express()
// 后台服务接口
app.get('/server', (request, response) => {
	// 解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.send('响应体返回给客户端')
})
//监听8000端口
app.listen(8000, () => {
    console.log('8000端口服务已经启动...')
})

控制台输出 npm run dev 跑起来

如果控制台出现以下这个截图，说明成功
在这里插入图片描述

2、搭建前台

首先书写index.html
在这里插入图片描述
代码如下：

<!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>Document</title>
    <style>
        #result{
            width: 300px;
            height: 300px;
            border: 1px solid lightskyblue;
        }
    </style>
</head>

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

</html>

在body中编写dom——script

<body>
    <div>
        <button>发送请求</button>
        <div id="result"></div>
    </div>
    <script>
        const result = document.getElementById('result')
        const btn = document.querySelectorAll('button')[0]
        btn.onclick = function () {
            console.log('点击成功')
        }
    </script>
</body>

在页面中检查效果

在这里插入图片描述
在onclick函数体中编写请求

btn.onclick = function () {
	// 创建实例
	const xml = new XMLHttpRequest()
	// 初始化实例
	xml.open('GET', 'http://127.0.0.1:8000/server', true)
	// 发送请求
	xml.send()
	// 接收响应
	xml.onreadystatechange = function () {
		// 如果状态为4 证明拿到数据
		if (xml.readyState === 4) {
			// 如果状态码为2xx，说明返回成功
			if (xml.status === 200 && xml.status < 300) {
				// 返回给页面数据
				result.innerHTML = xml.response
			} else {
				console.log("失败")
			}
		}
	}
}

成功后页面如下：
在这里插入图片描述

3、补充

1、readyState
存有 xmlHttp 的状态，从 0-4 发生变化
0：请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
1：初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true)
2：异步对象发送请求，xmlHttp.send()
3：异步对象接收应答数据从服务端返回数据。XMLHttpRequest 内部处理
4：异步请求对象已经将数据解析完毕。此时才可以读取数据，然后再去更新页面