入门AJAX——XMLHttpRequest（Post）-海口c网

入门AJAX——XMLHttpRequest（Post）

article/2025/6/9 12:33:12

一、前言

在上篇文章中，我们已经介绍了 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 请求生命周期、状态管理、异步机制等），能够帮助开发者更精准地定位问题、优化请求逻辑，甚至在面对复杂场景时自主实现定制化解决方案。毕竟，框架与库的本质是“工具”，而扎实的基础才是技术深度的核心体现。