当前位置：首页 > article >正文

入门AJAX——XMLHttpRequest（Post）

article 2025/6/7 16:52:52

一、前言

在上篇文章中，我们已经介绍了 HMLHttpRequest 的GET 请求的基本用法，并基于我提供的接口练习了两个简单的例子。如果你还没有看过第一篇文章，强烈建议你在学习完上篇文章后再学习本篇文章：
🔗入门AJAX——XMLHttpRequest (Get)

本篇文章，我们将介绍 POST 请求，并练习一个简单的例子，同样的，我将提供远程接口，你可以直接调用，也可以跟着我搭建本地后端。

前置知识

在本篇文章学习之间，请确认你对以下概念已经具备了基础了解：

网络请求： POST，请求头请求体。
一些基础的 dom 操作
对于代码具有封装的意识

完整代码在文末

二、本文任务

实现简单的删除功能：页面上设置两个按钮和一个搜索框；两个按钮分别用于获取列表和删除列表的元素。开始时，我们获取后端的全部列表信息，然后我们可以在输入框内输入想要删除的元素，点击删除按钮后向服务器发送 POST 请求删除元素（其实是将该元素过滤掉后返回）。页面布置如图：
在这里插入图片描述
我们将首先搭建本地的后端服务器，然后书写前端代码实现该逻辑。当然如果你选择使用我提供的远程接口，那么你可以跳过下一节的服务器接口搭建内容。

三、本地服务器接口

如果你没有看过上一篇的内容，再次建议你首先去学习上篇文章的知识：🔗入门AJAX——XMLHttpRequest (Get) 我们在这里直接贴代码：

// app.js
const express = require('express')
const cors = require('cors')
const app = express()app.use(cors())
app.use(express.json())app.post('/post/del', (req, res) => {const delChar = req.body?.delCharif (delChar) {res.send(arr.filter(item => item !== delChar))} else {res.send(arr)}
})app.listen(1234, () => {console.log('服务器运行在 http://localhost:1234')
})const arr = ['喜羊羊','美羊羊','懒羊羊','沸羊羊','暖洋洋','村长'
]

逻辑比较简单，主要是做了一个列表的过滤，我相信你一定看得懂。

三、前端设计

前端页面搭建更为简单，我们需要着重介绍的是 script 部分。依照上面的效果图，编写以下代码：

<button id="getBtn">获取数组</button>
<input type="text" >
<button id="delBtn">确认删除</button><div style="margin-top: 30px;">后端列表:</div>
<ul id = 'list-container'></ul>
<script>// js 代码
</script>

首先我们知道发起请求后我们会获取到一个列表，我们需要把列表的元素循环插入到 ul 中，我们先实现这样一个设置列表函数 setList 它将接受一个列表作为参数，我们将列表元素插入到 ul 中：

function setList(list) {const container = document.getElementById('list-container')container.innerHTML = ''list.forEach(item => {const child = document.createElement('li')child.innerText = itemcontainer.appendChild(child)})
}

接下来我们给两个按钮绑定事件，每次点击都会向服务器发送请求：

// 如果你是用的是我提供的远程接口
// 请将 url 改为： http://39.105.227.198:1234/post/del
const url = 'http://localhost:9000/post/del'document.getElementById('getBtn').addEventListener('click', () => {postRequest(url, {}, setList)
})document.getElementById('delBtn').addEventListener('click', () => {const value = document.getElementsByTagName('input')[0].valuevalue && postRequest(url, {delChar: value}, setList)
})

他们两个按钮都会调用到一个 postRequest 的函数，只不过穿进去的第二个参数有所不同。第二个参数我们规定为负载，将最为请求体以 JSON 的格式传到接口，接口将根据该数据确定要删除（过滤）哪一个元素。而第一个按钮我们需要获取全部元素，故第二个参数为空对象。

现在让我们开始编写 postRequest 函数吧：

function postRequest(url, body, callback) {const xhr = new XMLHttpRequest()// 请求方法为 POST xhr.open('POST', url, true)// 通过请求头明确告知服务器本次请求携带的数据为 JSON 格式xhr.setRequestHeader('Content-Type', 'application/json')xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 服务器成功返回后，将返回的列表作为参数传递给回调函数，在这里也就是 setList 函数callback(JSON.parse(xhr.responseText))}}// 把将要被删除的数据转为 JSON 字符串作为请求体发送到服务器xhr.send(JSON.stringify(body))
}

四、效果

当我们刚进入页面时，页面上没有任何数据：
在这里插入图片描述
然后我们点击获取数组按钮，可以在下面看到后端返回的列表数据，同时浏览器发起了一次 POST请求（图片中的端口是 9000，不必在意，成功即可）：

在这里插入图片描述
然后我们试着删除一个元素“沸羊羊”，我们需要在输入框内输入“沸羊羊”，然后点击确认删除，发现列表中对应的元素已经被删除，并且浏览器再次发送了一条 POST 请求，该请求携带了我们要删除的与与元素：
在这里插入图片描述

五、完整代码

<!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><button id="getBtn">获取数组</button><input type="text" ><button id="delBtn">确认删除</button><div style="margin-top: 30px;">后端列表:</div><ul id = 'list-container'></ul><script>// 如果你是用的是我提供的远程接口// 请将 url 改为： http://39.105.227.198:1234/post/delconst url = 'http://localhost:9000/post/del'function postRequest(url, body, callback) {const xhr = new XMLHttpRequest()xhr.open('POST', url, true)xhr.setRequestHeader('Content-Type', 'application/json')xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {callback(JSON.parse(xhr.responseText))}}xhr.send(JSON.stringify(body))}function setList(list) {const container = document.getElementById('list-container')container.innerHTML = ''list.forEach(item => {const child = document.createElement('li')child.innerText = itemcontainer.appendChild(child)})}document.getElementById('getBtn').addEventListener('click', () => {postRequest(url, {}, setList)})document.getElementById('delBtn').addEventListener('click', () => {const value = document.getElementsByTagName('input')[0].valuevalue && postRequest(url, {delChar: value}, setList)})</script>
</body>
</html>

六、写在后面

随着技术的不断发展，像 XMLHttpRequest 这类底层方法的直接使用率已逐渐降低，取而代之的是更高效简洁的 fetch API，以及更多封装完善的库（如 axios）。这些工具使用便捷、功能集成度高，既无需开发者反复编写冗余代码，也不必操心底层实现原理。

然而，对 XMLHttpRequest 的学习仍有其必要性。作为前端开发工程师，若仅停留在“调库”层面，核心竞争力将难以体现。理解底层原理（如 HTTP 请求生命周期、状态管理、异步机制等），能够帮助开发者更精准地定位问题、优化请求逻辑，甚至在面对复杂场景时自主实现定制化解决方案。毕竟，框架与库的本质是“工具”，而扎实的基础才是技术深度的核心体现。

入门AJAX——XMLHttpRequest（Post）

一、前言

前置知识

二、本文任务

三、本地服务器接口

三、前端设计

四、效果

五、完整代码

六、写在后面

相关文章：

入门AJAX——XMLHttpRequest（Post）

Qt（part1）Qpushbutton，信号与槽，对象树，自定义信号与槽，lamda表达式。

西北某省级联通公司：3D动环模块如何实现机房“一屏统管”？

【WPF】从普通 ItemsControl 到支持筛选的 ItemsControl：深入掌握 CollectionViewSource 用法

Zookeeper 和 Kafka 版本与 JDK 要求

3步布局关键词让流量更精准

视觉分析在人员行为属性检测中的应用

学习 React【Plan - June - Week 1】

电子行业AI赋能软件开发经典案例——某金融软件公司

【前端】js如何处理计算精度问题

使用 Python 自动化 Word 文档样式复制与内容生成

Kafka 核心架构与消息模型深度解析（二）

4G网络中频段的分配

SQL进阶之旅 Day 19：统计信息与优化器提示

数据结构之LinkedList

摆脱硬件依赖：SkyEye在轨道交通中的仿真应用

使用变异系数增强 CFD 收敛标准

解决获取视频第一帧黑屏问题

物联网通信技术全景指南(2025)之如何挑选合适的物联网模块

影楼精修-AI衣服祛褶皱算法解析

Day46 Python打卡训练营

信号电压高，传输稳定性变强，但是传输速率下降？

linux安全加固（非常详细）

关于事务的简介

qt控制台程序与qt窗口程序在读取数据库中文字段的差异！！巨坑

动手学深度学习12.7. 参数服务器-笔记练习（PyTorch）

告别数据泥沼，拥抱智能中枢：King’s四位一体重塑科研生产力

智绅科技 —— 智慧养老 + 数字健康，构筑银发时代安全防护网

Code Composer Studio CCS 工程设置，如何设置h文件查找路径？

Qt生成日志与以及捕获崩溃文件(mingw64位，winDbg)————附带详细解说