@（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：适合实时双向通信（如聊天室）