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

推荐使用 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 类型

jQuery 的 $.ajax() 还值得用吗

如果你的项目已经引入 jQuery，且团队熟悉它，$.ajax() 的错误统一处理、超时配置、自动 JSON 解析确实省事；但新项目没必要为 Ajax 单独加 jQuery。

• $.ajax() 默认把 4xx/5xx 当作 error 触发 error 回调，这点比原生 fetch() 直观
• dataType: 'html' 会自动把响应设为字符串，不用再 .text()
• 注意：jQuery 3.0+ 已移除对 IE6–8 的支持，跟现代 fetch() 兼容范围基本一致

真正容易被忽略的是错误边界：网络中断、服务不可达、CORS 失败、后端返回 500 却没抛异常——这些情况都得在 catch 或 error 回调里显式处理，而不是只盯着 200 成功分支写逻辑。