如何刷新HTML局部内容_AJAX无重载更新方法【教程】_技术教程

可使用 AJAX 实现网页局部刷新：一、原生 XMLHttpRequest；二、fetch() API；三、jQuery load() 方法；四、Axios 客户端；五、绑定事件（如按钮点击）触发更新，均通过 innerHTML 替换指定 DOM 区域内容。

如果您希望在不重新加载整个网页的情况下更新页面的某一部分内容，则可以使用 AJAX 技术向服务器发起异步请求并替换指定 HTML 区域。以下是实现该目标的几种具体方法：

一、使用原生 XMLHttpRequest 对象

XMLHttpRequest 是浏览器内置的底层 API，支持发送 HTTP 请求并接收响应，适用于对兼容性要求较高且不依赖第三方库的场景。

1、在 HTML 中为待更新区域设置唯一 ID，例如 id="content-section"。

2、创建 XMLHttpRequest 实例，调用 open() 方法指定请求方式（如 GET）与目标 URL。

3、为 onload 事件绑定处理函数，在请求成功后获取响应文本。

4、使用 document.getElementById().innerHTML 将响应内容写入指定 DOM 节点。

fetch() 是现代浏览器提供的基于 Promise 的网络请求接口，语法简洁，支持 async/await，可替代 XMLHttpRequest 实现更清晰的异步流程。

1、确保目标 HTML 容器具有明确的标识符，如 id="dynamic-area"。

2、调用 fetch(url) 发起请求，返回 Promise 对象。

3、使用 response.text() 方法解析响应体为字符串格式。

4、通过 document.querySelector("#dynamic-area").innerHTML = data 更新内容。

jQuery 提供了封装良好的 load() 方法，可直接将远程 HTML 片段载入匹配元素中，适合快速集成且项目已引入 jQuery 的情况。

1、确认页面已引入 jQuery 库，并为目标区域添加 id="refresh-target"。

2、编写 JavaScript 代码，调用 $("#refresh-target").load("data.html #content")，其中 #content 表示仅提取远程文件中该选择器对应的内容。

3、可在回调函数中处理加载完成后的逻辑，例如显示提示或启用按钮。

Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js，具备请求/响应拦截、自动 JSON 解析等特性，适合结构化程度较高的前端项目。

1、为需要刷新的容器设置 id="ajax-content"。

2、使用 axios.get("/api/partial.html") 获取服务端返回的 HTML 字符串。

3、在 then() 回调中读取 response.data 属性。

4、执行 document.getElementById("ajax-content").innerHTML = response.data 完成局部渲染。

将 AJAX 请求绑定到用户交互事件上，可实现按需更新，避免不必要的网络请求和资源消耗。

1、在页面中添加一个按钮元素，设置 id="update-btn"。

2、为该按钮注册 click 事件监听器。

3、在事件处理函数内调用任意一种上述请求方法（如 fetch 或 XMLHttpRequest）。

4、请求完成后，将响应结果插入到预先定义好的容器节点中，例如 document.getElementById("target").innerHTML。