ajax之生成一个ajax的demo示例

进程击序的媛2025-03-09 8:13

[一. node.js和express](#一. node.js和express)

[二. 使用express创建后端服务](#二. 使用express创建后端服务)

[三. 创建前端](#三. 创建前端)

一. node.js和express

ajax是前端在不刷新的情况下访问后端的技术，所以首先需要配置一个后端服务，可以使用node.js和express。

首先生成一个空项目，新建main目录，如图所示。

下载安装node就不演示了。

接下来使用node安装express，直接在终端输入npm i express即可，该java包会下载到项目根目录下的node_modules目录中（可以看到项目下多了node_modules目录和package.json和package_lock.json，这些是node安装了包后就会自动创建的，不用管）

二. 使用express创建后端服务

使用require导入express
const app = express()创建app
使用app.get对前端的url请求生成相应的回调函数
使用app.listen开启服务进行监听
在终端输入node ××.js开启服务

如下图所示，特别要注意需要使用res.setHeader()开启跨域访问

三. 创建前端

首先创建按钮和展示框，如图所示

接下来编写ajax请求和处理代码

使用const xhr = new XMLHttpRequest()生成示例对象，使用该对象发送请求和处理回复
使用xhr.open('GET', 'http://localhost:8080/hello')配置请求url
使用xhr.send()发送请求
使用xhr.onreadystatechange = function(){}绑定回调函数，当xhr的readyStage属性变化的时候，就会触发该回调函数。xhr的readyStage属性有0,1,2,3,4五个值，当为0时，表示xhr刚创建，当为1时，表示已经执行open函数，当为2时，表示已经使用send发送请求，当为3时，表示已经部分返回，当为4时，表示已经全部返回

具体代码如下图所示，这里还有一个注意点，xhr.status是返回的状态码，如果状态码在200到300之间，都表示返回成功。

最后效果如下