@（AJAX）

1. 什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种无需刷新页面即可与服务器交换数据的技术，核心特点：

• 异步通信：不阻塞页面交互
• 局部更新：只刷新部分页面内容
• 数据格式：现代多用 JSON（早期用 XML）

典型应用场景：

• 实时搜索（如百度输入时的联想词）
• 无限滚动（如微博动态加载）
• 表单提交（如注册时用户名查重）

---

2. AJAX 工作原理

---

3. 原生 JavaScript 实现 AJAX

(1) 创建 XMLHttpRequest 对象

let xhr = new XMLHttpRequest();

(2) 配置请求

xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步

(3) 设置回调函数

xhr.onload = function() {if (xhr.status >= 200 && xhr.status < 300) {console.log(JSON.parse(xhr.responseText));} else {console.error('请求失败:', xhr.statusText);}
};xhr.onerror = function() {console.error('网络错误');
};

(4) 发送请求

xhr.send();

(5) POST 请求示例（带数据）

xhr.open('POST', 'https://api.example.com/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: "Alice", age: 25 }));

---

4. Fetch API（现代替代方案）

更简洁的 Promise-based API：

// GET 请求
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));// POST 请求
fetch('https://api.example.com/users', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ name: "Bob" })
});

---

5. jQuery 实现 AJAX（简化版）

$.ajax({url: 'https://api.example.com/data',type: 'GET',success: function(data) {console.log(data);},error: function(error) {console.error(error);}
});// 更简洁的写法
$.get('https://api.example.com/data', function(data) {console.log(data);
});

---

6. 实际应用案例

(1) 实时搜索

document.getElementById('search').addEventListener('input', function(e) {fetch(`/search?q=${e.target.value}`).then(res => res.json()).then(results => {document.getElementById('results').innerHTML = results.map(item => `<li>${item}</li>`).join('');});
});

(2) 表单异步提交

document.forms['register'].addEventListener('submit', function(e) {e.preventDefault();fetch('/register', {method: 'POST',body: new FormData(this)}).then(response => {if (response.ok) alert('注册成功!');});
});

---

7. 关键注意事项

1. 跨域问题：
   • 解决方案：CORS（需服务器设置Access-Control-Allow-Origin）

   Access-Control-Allow-Origin: *
   

2. 错误处理：
   • 始终检查 response.ok 或 xhr.status
3. 性能优化：
   • 使用防抖（debounce）技术避免频繁请求

   let timer;
   input.addEventListener('input', () => {clearTimeout(timer);timer = setTimeout(() => { /* AJAX请求 */ }, 300);
   });
   

---

8. AJAX 调试技巧

• 浏览器开发者工具：
  • Network 面板查看请求/响应
  • 过滤 XHR 请求类型
• 在线测试工具：
  • Postman
  • httpbin.org（免费测试接口）

---

9. 现代替代方案

• Axios（推荐库）：

  axios.get('https://api.example.com/data').then(response => console.log(response.data));
  

• WebSocket：适合实时双向通信（如聊天室）

---