HTML怎么做Ajax请求_html Ajax异步请求实现方法整理

作者：袖梨 2026-06-24

推荐使用 fetch() 发送 GET 请求加载 HTML 片段，因其语法简洁、基于 Promise、天然支持 async/await；需手动检查 response.ok 并调用 .text() 解析响应，跨域失败会抛 TypeError 而非返回 status 0。

直接用 fetch()，别碰原生 XMLHttpRequest —— 除非你得兼容 IE9 及更老版本。

用 `fetch()` 发 GET 请求加载 HTML 片段

现代项目里，fetch() 是首选：语法干净、基于 Promise、天然支持 async/await。它默认就是异步的，不用手动设 true。

返回的是 Response 对象，不是原始字符串，必须显式调用 .text() 或 .json()
HTTP 状态码为 4xx/5xx 不会自动 reject，得手动检查 response.ok
跨域请求时，如果后端没配 Access-Control-Allow-Origin，浏览器直接报 TypeError: Failed to fetch，不是 status 0

示例：

async function loadHtml() {  try {    const response = await fetch('/partial.html');    if (!response.ok) throw new Error(`HTTP ${response.status}`);    const html = await response.text();    document.getElementById('content').innerHTML = html;  } catch (err) {    console.error('加载失败:', err.message);  }}

`XMLHttpRequest` 的 readyState 和 status 容易混淆

很多人卡在 readyState === 4 但 status 是 0，这通常意味着请求根本没发出去（比如跨域被拦、URL 写错、本地文件协议 file:// 下运行）。

立即学习“前端免费学习笔记（深入）”；

readyState === 4 只表示“连接已关闭”，不代表成功；必须同时判断 status >= 200 && status 或 <code>status === 0（离线或跨域失败）
onreadystatechange 会触发多次（0→1→2→3→4），别在非 4 的状态里读 responseText，否则是空或不完整
IE6–8 需要 ActiveXObject 回退，但现在基本可忽略

POST 提交表单数据要注意 Content-Type

发 JSON 数据和表单数据，后端解析逻辑完全不同，前端必须匹配。

传 JSON：headers: { 'Content-Type': 'application/json' }，然后 JSON.stringify({a:1}) 作为 body
传表单键值对：headers: { 'Content-Type': 'application/x-www-form-urlencoded' }，body 用 new URLSearchParams({a:'1'})
用 FormData 上传文件时，**不能手动设 Content-Type**，浏览器会自动生成带 boundary 的 multipart 类型