@（AJAX） - 技术栈

1. 什么是 AJAX？

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

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

典型应用场景：

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

2. AJAX 工作原理

用户浏览器服务器触发事件（如点击按钮）发送异步请求（XMLHttpRequest）返回数据（JSON/XML）更新页面局部内容用户浏览器服务器

3. 原生 JavaScript 实现 AJAX

(1) 创建 XMLHttpRequest 对象

javascript 复制代码

let xhr = new XMLHttpRequest();

(2) 配置请求

javascript 复制代码

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

(3) 设置回调函数

javascript 复制代码

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) 发送请求

javascript 复制代码

xhr.send();

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

javascript 复制代码

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：

javascript 复制代码

// 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（简化版）

javascript 复制代码

$.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) 实时搜索

javascript 复制代码

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) 表单异步提交

javascript 复制代码

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

7. 关键注意事项

跨域问题 ：
- 解决方案：CORS（需服务器设置Access-Control-Allow-Origin）
http 复制代码
```
Access-Control-Allow-Origin: *
```
错误处理 ：
- 始终检查 response.ok 或 xhr.status

性能优化 ：

使用防抖（debounce）技术避免频繁请求

javascript 复制代码

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

8. AJAX 调试技巧

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

9. 现代替代方案

Axios （推荐库）：

javascript 复制代码

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

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