一、前言
在上篇文章中，我们已经介绍了 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?.delChar
if (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 = item
container.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].value
value && 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/del
const 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 = item
container.appendChild(child)
})
}
document.getElementById('getBtn').addEventListener('click', () => {
postRequest(url, {}, setList)
})
document.getElementById('delBtn').addEventListener('click', () => {
const value = document.getElementsByTagName('input')[0].value
value && postRequest(url, {delChar: value}, setList)
})
</script>
</body>
</html>
六、写在后面
随着技术的不断发展，像 XMLHttpRequest 这类底层方法的直接使用率已逐渐降低，取而代之的是更高效简洁的 fetch API，以及更多封装完善的库（如 axios）。这些工具使用便捷、功能集成度高，既无需开发者反复编写冗余代码，也不必操心底层实现原理。
然而，对 XMLHttpRequest 的学习仍有其必要性。作为前端开发工程师，若仅停留在“调库”层面，核心竞争力将难以体现。理解底层原理（如 HTTP 请求生命周期、状态管理、异步机制等），能够帮助开发者更精准地定位问题、优化请求逻辑，甚至在面对复杂场景时自主实现定制化解决方案。毕竟，框架与库的本质是“工具”，而扎实的基础才是技术深度的核心体现。