【AJAX】原生AJAX

一、背景与问题

AJAX（Asynchronous JavaScript and XML）技术自2005年被提出以来，一直是构建动态网页的核心手段。其核心思想是通过浏览器的XMLHttpRequest对象，在不刷新页面的前提下与服务器进行数据交互。尽管现代前端框架（如Vue、React）已经封装了大量异步请求功能，但原生AJAX在某些场景下仍具有不可替代的价值。

原生AJAX的核心优势在于：

无依赖：无需引入第三方库（如jQuery）
精准控制：可自定义请求头、超时、重试等行为
资源占用低：相比框架封装的库更轻量

但同时也存在局限性：

代码冗余：需要手动处理状态码、响应数据解析等
前端工程化不足：缺乏统一的封装和错误处理机制
跨域限制：需手动处理CORS问题

二、基本原理

AJAX的核心是XMLHttpRequest对象，它通过以下流程完成异步通信：

创建实例：new XMLHttpRequest()
配置请求：
- open()设置请求方法、URL、是否异步
- setRequestHeader()设置请求头
发送请求：send()方法
监听状态变化：onreadystatechange事件
处理响应：通过responseText/responseXML获取数据

关键状态码含义：

0：未初始化
1：已打开
2：请求完成（但未接收响应）
3：接收响应中
4：响应完成

三、环境准备

确保浏览器支持XMLHttpRequest（所有现代浏览器均支持），无需额外依赖。开发环境可使用HTML+JS文件直接测试。

<!DOCTYPE html>
<html>
<head>
  <title>原生AJAX示例</title>
</head>
<body>
  <div id="content"></div>
  <script src="ajax.js"></script>
</body>
</html>

四、核心实现

1. 基础GET请求

function fetchGet(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('响应数据:', xhr.responseText);
    }
  };
  
  xhr.send();
}

关键点：

异步模式（true）是默认行为
readystatechange事件需要显式监听
status字段包含HTTP状态码（200表示成功）

2. 带参数的POST请求

function fetchPost(url, data) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('响应数据:', JSON.parse(xhr.responseText));
    }
  };
  
  xhr.send(JSON.stringify(data));
}

关键点：

设置Content-Type头
必须使用JSON.stringify()序列化数据
服务器端需对应处理JSON格式

3. 处理JSON响应的完整示例

function fetchJson(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        try {
          const data = JSON.parse(xhr.responseText);
          console.log('解析成功:', data);
        } catch (e) {
          console.error('JSON解析失败:', e);
        }
      } else {
        console.error('请求失败:', xhr.status);
      }
    }
  };
  
  xhr.send();
}

关键点：

异常处理：需要捕获JSON解析错误
状态码检查：必须同时检查readyState和status

五、完整案例

用户信息查询系统

实现一个查询用户信息的完整案例，包含：

表单输入
异步请求
动态更新页面

<!DOCTYPE html>
<html>
<head>
  <title>用户信息查询</title>
</head>
<body>
  <h2>用户信息查询</h2>
  <input type="text" id="userId" placeholder="输入用户ID">
  <button onclick="queryUser()">查询</button>
  <div id="result"></div>

  <script>
    function queryUser() {
      const userId = document.getElementById('userId').value;
      const url = `https://api.example.com/users/${userId}`;
      
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      
      xhr.onreadystatechange = function() {
        const resultDiv = document.getElementById('result');
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            try {
              const data = JSON.parse(xhr.responseText);
              resultDiv.innerHTML = `
                <h3>用户信息</h3>
                <p><strong>ID:</strong> ${data.id}</p>
                <p><strong>姓名:</strong> ${data.name}</p>
                <p><strong>邮箱:</strong> ${data.email}</p>
              `;
            } catch (e) {
              resultDiv.innerHTML = '<p>数据解析失败</p>';
            }
          } else {
            resultDiv.innerHTML = `<p>请求失败: ${xhr.status}</p>`;
          }
        }
      };
      
      xhr.send();
    }
  </script>
</body>
</html>

关键点：

前端表单交互
动态更新DOM
错误处理机制

六、源码解析

以fetchJson函数为例，逐步分析：

创建实例：
```
const xhr = new XMLHttpRequest();
```
- 生成一个新的HTTP请求对象
配置请求：
```
xhr.open('GET', url, true);
```
- method: 请求方法
- url: 请求地址
- async: 异步标志（默认true）

设置请求头（可选）：

xhr.setRequestHeader('Accept', 'application/json');

监听状态变化：

xhr.onreadystatechange = function() {
  // 处理逻辑
};

发送请求：
```
xhr.send();
```
- 对于GET请求，可省略参数
- 对于POST请求，需传入数据体

七、进阶使用

1. 超时处理

function fetchWithTimeout(url, timeout = 5000) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  
  xhr.timeout = timeout; // 设置超时时间（毫秒）
  
  xhr.ontimeout = function() {
    console.error('请求超时');
  };
  
  xhr.onreadystatechange = function() {
    // 处理逻辑
  };
  
  xhr.send();
}

2. 重试机制

function retryFetch(url, maxRetries = 3) {
  let retryCount = 0;
  
  function attempt() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log('成功获取数据');
        } else {
          if (retryCount < maxRetries) {
            retryCount++;
            setTimeout(attempt, 1000); // 等待1秒后重试
          } else {
            console.error('多次尝试失败');
          }
        }
      }
    };
    
    xhr.send();
  }
  
  attempt();
}

3. 文件上传

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://api.example.com/upload', true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('上传成功:', xhr.responseText);
    }
  };
  
  xhr.send(formData);
}

八、性能与工程实践

1. 性能优化

缓存策略：

const cache = {};

function fetchWithCache(url) {
  if (cache[url]) {
    console.log('使用缓存');
    return Promise.resolve(cache[url]);
  }
  return fetch(url).then(data => {
    cache[url] = data;
    return data;
  });
}

压缩传输：

xhr.setRequestHeader('Content-Encoding', 'gzip');

分页处理：

function fetchPage(page) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `https://api.example.com/data?page=${page}`, true);
  xhr.send();
}

2. 安全风险

CSRF防护：

服务器端需验证X-CSRF-Token头

前端需在请求中添加：

xhr.setRequestHeader('X-CSRF-Token', document.querySelector('meta[name="csrf-token"]').content);

XSS防护：

对响应数据进行HTML转义：

function escapeHTML(str) {
  return str.replace(/[<>&"]/g, (match) => {
    const map = { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' };
    return map[match] || match;
  });
}

九、常见问题与踩坑

1. 常见错误

问题	错误示例	解决方案
忘记检查状态码	`xhr.onreadystatechange`中直接处理响应	增加`if (xhr.readyState === 4 && xhr.status === 200)`
错误处理不完整	未捕获JSON解析错误	使用`try...catch`包裹解析逻辑
跨域请求失败	未设置`withCredentials`	添加`xhr.withCredentials = true;`
请求头未设置	直接发送JSON数据	必须设置`Content-Type`头
同步请求阻塞页面	使用`false`参数	优先使用异步模式

2. 踩坑案例

错误代码：

xhr.send(JSON.stringify(data));

问题分析：

未设置Content-Type头，可能导致服务器无法正确解析数据
未处理服务器返回的错误状态码

改进代码：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 处理成功
    } else {
      console.error('服务器返回错误:', xhr.status);
    }
  }
};

十、最佳实践

封装通用函数：

function ajax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', options.url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(`请求失败: ${xhr.status}`));
        }
      }
    };
    
    xhr.send(options.data ? JSON.stringify(options.data) : null);
  });
}

使用async/await：

async function getUserInfo(userId) {
  try {
    const data = await ajax({
      url: `https://api.example.com/users/${userId}`,
      method: 'GET'
    });
    console.log('用户信息:', data);
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

设置合理的超时：

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
  console.error('请求超时');
};

安全防护：
- 严格校验请求来源
- 使用HTTPS加密传输
- 设置CORS策略

十一、总结

原生AJAX作为Web开发的基础技术，虽然在现代框架中已被封装，但其核心原理和实现方式仍值得深入理解。通过本篇文章的探讨，我们深入分析了：

AJAX的工作机制和状态码含义
多种请求方式的实现细节
完整的前端交互案例
常见错误及其解决方案
性能优化和安全防护策略

在实际开发中，建议：

在需要精细控制请求行为的场景使用原生AJAX（如自定义重试策略、特殊请求头）
在需要快速实现功能时使用框架封装的AJAX方法
对涉及敏感数据的操作，务必添加安全防护机制

掌握原生AJAX的原理和实现，不仅能帮助我们更好地理解现代前端框架的底层机制，也能在应对特殊需求时提供可靠的解决方案。

【AJAX】原生AJAX

【AJAX】原生AJAX

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础GET请求

2. 带参数的POST请求

3. 处理JSON响应的完整示例

五、完整案例

用户信息查询系统

六、源码解析

七、进阶使用

1. 超时处理

2. 重试机制

3. 文件上传

八、性能与工程实践

1. 性能优化

2. 安全风险

九、常见问题与踩坑

1. 常见错误

2. 踩坑案例

十、最佳实践

十一、总结

评论已关闭

推荐阅读