js如何发送AJAX请求 AJAX请求的4种常见实现方式

在JavaScript中发送AJAX请求主要有以下四种常见实现方式，每种方式的特点、用法及适用场景如下：

• 特点：老牌AJAX实现方式，兼容性好（支持IE5+），但代码繁琐，需手动处理兼容性、状态变化及跨域问题。

• 兼容性处理：

  对象创建：通过浏览器嗅探判断是否支持原生XMLHttpRequest，否则使用ActiveXObject（IE旧版）。

  let xhr;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else { xhr = new ActiveXObject("Microsoft.XMLHTTP");}

  状态监听：通过onreadystatechange监听readyState变化，仅在readyState == 4（请求完成）时处理响应。

  xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); } else { console.error('Request failed. Status:', xhr.status); } }};

  跨域限制：需服务器设置CORS头（如Access-Control-Allow-Origin: *）。

• 适用场景：需兼容旧版IE浏览器或对请求有精细控制的项目。

• 特点：现代浏览器原生支持，基于Promise，语法简洁，支持链式调用，但需手动处理错误和Cookie。

• 优势：

  简洁语法：通过.then()和.catch()处理异步逻辑。

  fetch('
  https://api.example.com/data'
  ) .then(response => { if (!response.ok) throw new Error('Network error'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Fetch error:', error));

  请求头控制：支持自定义请求头（如Content-Type）。

  fetch('
  https://api.example.com/data'
  , { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })});

  Cookie处理：需手动设置credentials: 'include'发送Cookie。

• 注意事项：

  需检查response.ok判断HTTP错误状态码（如404）。

  不兼容IE浏览器（需polyfill）。

• 适用场景：现代浏览器项目，追求简洁代码和原生支持。

• 特点：通过jQuery封装，语法简洁，跨浏览器兼容性强，但依赖jQuery库。

• 用法：

  基础请求：通过$.ajax()配置URL、方法、回调等。

  $.ajax({ url: '
  https://api.example.com/data'
  , method: 'GET', success: function(data) { console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { console.error('Request failed:', textStatus, errorThrown); }});

  数据类型自动转换：通过dataType选项自动解析JSON响应。

• 优缺点：

  优点：兼容性好，代码简洁，适合已使用jQuery的项目。

  缺点：库体积较大（约30KB），回调函数嵌套可能导致代码可读性下降。

• 适用场景：遗留项目或需快速开发且已引入jQuery的场景。

• 特点：基于Promise的第三方HTTP客户端，支持浏览器和Node.js，功能强大且易用。

• 优势：

  自动数据转换：自动将请求/响应数据转换为JSON格式。

  拦截器机制：支持请求/响应拦截，便于添加全局逻辑（如身份验证）。

  axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config;});

  请求取消：通过CancelToken取消未完成请求。

  跨平台性：浏览器和Node.js代码一致。

• 用法示例：

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

• 适用场景：需要高级功能（如拦截器、取消请求）或跨平台开发的项目。

• 兼容性优先：选XMLHttpRequest（需兼容IE）或Axios（自动降级处理）。
• 简洁性优先：选Fetch API（现代浏览器）或Axios（功能更全）。
• 项目依赖：已用jQuery则选其AJAX方法，否则推荐Axios或Fetch。
• 功能需求：需拦截器、取消请求等选Axios；简单请求选Fetch。

四种方式各有优劣，需根据项目需求、兼容性要求及团队偏好综合选择。