入门AJAX——XMLHttpRequest（Post）

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2403130.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！