推荐使用 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 成功分支写逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
