入門AJAX——XMLHttpRequest（Post）

一、前言

在上篇文章中，我們已經介紹了 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 請求生命周期、狀態管理、異步機制等），能夠幫助開發者更精準地定位問題、優化請求邏輯，甚至在面對復雜場景時自主實現定制化解決方案。畢竟，框架與庫的本質是“工具”，而扎實的基礎才是技術深度的核心體現。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/83986.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/83986.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/83986.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！