Ajax 核心知识点全面总结

Ajax 核心知识点全面总结

一、Ajax 基础概念

1、定义

Ajax（Asynchronous JavaScript and XML）是一种 无需重新加载整个网页，即可通过 JavaScript 与服务器异步交换数据的技术，用于创建更流畅、响应更快的 Web 应用。

2、核心特点

1. 异步通信：客户端与服务器通信时不阻塞页面渲染，用户可继续交互。
2. 数据驱动更新：仅更新页面部分内容，减少带宽消耗。
3. 多技术融合：结合 JavaScript、XML（或 JSON）、HTML/CSS 等技术。

二、Ajax 工作原理与核心组件

1、工作流程

1. 客户端通过 JavaScript 发起请求；
2. 浏览器创建 XMLHttpRequest（XHR） 对象与服务器通信；
3. 服务器处理请求并返回数据（XML、JSON 等）；
4. JavaScript 接收数据并更新页面 DOM。

2、XMLHttpRequest（XHR）对象

创建方式：const xhr = new XMLHttpRequest();
关键方法：

• open(method, url, async)：设置请求方法、URL 和异步模式（默认 true）。
• send(data)：发送请求，data 为请求体（GET 请求时可为 null）。
• abort()：取消请求。

关键属性：

• readyState：请求状态（0 - 未初始化，1 - 已调用 open，2 - 已接收响应头，3 - 处理中，4 - 请求完成）。
• status：HTTP 状态码（如 200 成功，404 未找到）。
• responseText/responseXML：返回的文本 / XML 数据。

事件监听：

• onreadystatechange：状态变化时触发，常用于检查 readyState === 4 且 status === 200。

三、Ajax 请求方法与参数

1、常见请求方法

方法	用途	特点
GET	获取资源	参数附在 URL 后（如 ?key=value），有长度限制，浏览器会缓存。
POST	提交数据	参数在请求体中，无长度限制，不会缓存。
DELETE	删除资源	删除指定资源，需服务器支持。
PUT	更新资源	覆盖式更新，需服务器支持。

2、请求参数处理

• GET 请求：url + '?param1=value1¶m2=value2'
• POST 请求：需设置请求头 Content-Type，如：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1¶m2=value2');

或发送 JSON 数据：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ param1: 'value1', param2: 'value2' }));

四、Ajax 异步与错误处理

1、异步处理

• 传统回调：通过 onreadystatechange 监听请求完成。
• Promise 封装（现代方式）：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('请求失败'));
    xhr.send();
  });
}

2、错误处理

• onerror 事件：处理网络错误（如服务器不可达）。
• 状态码判断：

if (xhr.status >= 200 && xhr.status < 300) {
  // 成功处理
} else {
  // 错误处理，如 404、500 等
}

五、跨域资源共享（CORS）与解决方案

1、跨域问题

• 同源策略限制：浏览器禁止不同域名（协议、域名、端口任一不同）的请求交互。
• 常见错误：Access-Control-Allow-Origin 缺失。

2、解决方案

• 服务器配置 CORS：在响应头中添加：

Access-Control-Allow-Origin: * （允许所有域名，生产环境建议指定域名）
Access-Control-Allow-Methods: GET, POST, PUT

• 代理服务器：前端请求本地代理，由代理转发至目标服务器（如 Node.js 中间件）。
• JSONP：利用 script 标签跨域特性（仅支持 GET 请求）：

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url + `?callback=${callback.name}`;
  window[callback.name] = callback;
  document.body.appendChild(script);
}

六、Ajax 与现代替代方案

1、Fetch API（ES6+）

• 优点：更简洁的 Promise 接口，支持流式响应。
• 示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

2、Axios（第三方库）

• 优点：支持 Promise、请求 / 响应拦截、自动转换 JSON、浏览器与 Node 通用。

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

七、Ajax 最佳实践与性能优化

请求优化：

• 合并多个小请求为大请求，减少 HTTP 连接开销。
• 使用 GET 请求缓存数据（设置 Cache-Control 头）。

防抖与节流：避免频繁请求（如搜索联想功能）。

超时处理：设置 xhr.timeout 和 ontimeout 事件。
请求取消：使用 AbortController（Fetch API）或 xhr.abort()。

八、Ajax 安全性考虑

• XSS（跨站脚本攻击）：对用户输入数据进行转义，避免直接插入 DOM。
• CSRF（跨站请求伪造）：使用 token 验证请求来源，或设置 SameSite cookie。
• 敏感数据传输：使用 HTTPS 加密通信。

九、经典 Ajax 示例（原生 JavaScript）

// 发送 GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const users = JSON.parse(xhr.responseText);
    document.getElementById('users-list').innerHTML = users.map(user => `
${user.name}`).join('');
  }
};
xhr.send();

// 发送 POST 请求
const xhrPost = new XMLHttpRequest();
xhrPost.open('POST', 'https://api.example.com/login', true);
xhrPost.setRequestHeader('Content-Type', 'application/json');
xhrPost.onload = function() {
  if (xhrPost.status === 200) {
    alert('登录成功');
  }
};
xhrPost.send(JSON.stringify({ username: 'user', password: 'pass' }));

十、Ajax 封装全局 API

/**
 * 通用 AJAX 请求工具
 * 封装了 GET、POST、PUT、DELETE 等常用 HTTP 请求方法
 */
const HttpUtils = {
  /**
   * 发送 GET 请求
   * @param {string} url - 请求URL
   * @param {Object} params - 请求参数
   * @param {Object} options - 额外配置选项
   * @returns {Promise