哎，你发现没？每次用AJAX传数据，要么卡住不响应，要么蹦出一堆看不懂的报错。去年我帮学妹调代码，她那个"用户登录"功能死活传不到后台，最后发现是漏了个分号…今天咱就把AJAX里那些核心方法掰碎了说，保证你看完能自己修bug！

---

最原始的招数：XMLHttpRequest

??手把手教你发第一个请求??：

1. 创建对象：let xhr = new XMLHttpRequest()
2. 绑定监听：xhr.onreadystatechange = function() { ... }
3. 配置参数：xhr.open('GET', 'https://api地址')
4. 发送请求：xhr.send()

??必坑指南??：

• 状态码4才代表完成（不是200！）
• 用xhr.responseType = 'json'自动解析数据
• CORS错误时记得加withCredentials: true

上周实习生小王把open和send顺序写反，整个页面卡了半小时…

---

新时代利器：Fetch API

??对比传统XHR的优势??：

功能	XHR	Fetch
链式调用	需要嵌套回调	支持.then()链式
默认格式	文本	Blob对象
中止请求	xhr.abort()	AbortController
兼容性	全浏览器支持	IE全军覆没

??实战片段??：

javascript复制
fetch('https://api地址', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({username: '张三'})
})
.then(response => {
  if (!response.ok) throw new Error('挂了');
  return response.json();
})
.catch(error => console.log('逮到错误:', error));

---

拦截器妙用：统一处理所有请求

??封装自己的HTTP工具??：

1. 给所有请求加token：

javascript复制
axios.interceptors.request.use(config => {
  config.headers.Authorization = localStorage.getItem('token');
  return config;
});

1. 全局捕获401错误：

javascript复制
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

??血泪经验??：千万别在拦截器里写死循环！上次我不小心在token过期后自动跳登录页，结果触发重新请求→再次过期→无限跳转…

---

高频作死行为排行榜

1. 跨域还傻傻用GET（后端不配CORS头就凉）
2. 忘设Content-Type（后台收不到表单数据）
3. 没处理网络异常（用户断网就白屏）
4. 同步请求阻塞页面（卡死浏览器不商量）
5. 频繁触发防抖（被后端当黑客封IP）

上个月电商项目就栽在第五条，搜索框每输入一个字就发请求，直接把服务器干崩了…

---

十五年全栈老鸟说句实话

现在新人直接用Fetch或axios就行，但XHR的原理必须懂——面试官就爱问这个！实际开发记住三个要点：

1. 错误处理比成功回调更重要
2. 设置合理的超时时间（建议3-10秒）
3. 文件上传用FormData，别自己转二进制

最后甩个绝招：在Chrome开发者工具的Network面板，勾选"Preserve log"看完整请求日志，比console.log靠谱十倍！