如何为每个Ajax请求配置不同的ajaxComplete事件与加载图标？

嘿，这个需求我之前帮人解决过好多次，用原生JS完全能轻松实现！核心就是给每个Ajax请求绑定对应的加载元素，让加载状态精准对应到操作位置，而不是全局一刀切。下面给你一步步拆解具体实现方法：

每个需要加载反馈的操作，都在对应的页面位置提前放置好加载图标元素（默认隐藏）。然后封装一个带加载状态控制的Ajax工具函数，发起请求时显示对应位置的加载图标，请求完成（不管成功还是失败）后再隐藏它。同时保留全局加载图标，给需要全局提示的特殊请求使用。

1. 提前准备加载元素：根据不同操作的位置，添加对应的加载图标，比如按钮旁的小型图标、内容区域的加载提示，以及全局弹窗式加载。
2. 封装Ajax工具函数：把原生XMLHttpRequest封装成一个可复用的函数，支持传入加载元素的选择器或DOM对象，自动处理加载图标的显示/隐藏逻辑。
3. 绑定请求与加载元素：调用Ajax函数时，指定当前请求对应的加载元素，让状态和操作一一对应。

HTML部分（加载元素布局） #

<!-- 示例1：按钮旁的小型加载图标 -->
<button id="btn-user">获取用户信息</button>
<span class="loader small-loader" id="loader-user" style="display:none; margin-left:8px;">🔄</span>

<!-- 示例2：表格区域的加载图标 -->
<div id="table-wrap">
  <div class="loader small-loader" id="loader-table" style="display:none; text-align:center; padding:20px;">加载表格数据中...</div>
  <table id="data-table" style="display:none; width:100%; border-collapse:collapse;">
    <!-- 表格内容后续渲染 -->
  </table>
</div>

<!-- 全局加载图标（保留原有的全局弹窗） -->
<div class="loader global-loader" id="loader-global" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:16px; background:#fff; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.2);">全局加载中...</div>

CSS部分（优化加载动画） #

/* 给加载图标加旋转动画，提升视觉体验 */
.small-loader {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.global-loader {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

JS部分（封装Ajax与调用示例） #

// 封装带加载控制的Ajax工具函数
function ajaxWithLoader(options) {
  // 解构参数并设置默认值
  const {
    url,
    method = 'GET',
    data = null,
    loaderEl = null,
    onSuccess,
    onError
  } = options;

  // 获取加载元素的DOM对象（支持选择器字符串或直接传DOM）
  let loader = null;
  if (loaderEl) {
    loader = typeof loaderEl === 'string' ? document.querySelector(loaderEl) : loaderEl;
  }

  // 请求发起前显示加载图标
  if (loader) loader.style.display = 'inline-block';

  // 创建XHR对象
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);

  // 处理POST请求的JSON数据格式
  if (method.toUpperCase() === 'POST' && typeof data === 'object') {
    xhr.setRequestHeader('Content-Type', 'application/json');
    data = JSON.stringify(data);
  }

  // 请求完成后的统一处理（成功/失败都隐藏加载）
  const handleComplete = () => {
    if (loader) loader.style.display = 'none';
  };

  // 请求成功回调
  xhr.onload = function() {
    handleComplete();
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const response = JSON.parse(xhr.responseText);
        onSuccess?.(response);
      } catch (err) {
        onError?.(new Error('响应解析失败'));
      }
    } else {
      onError?.(new Error(`请求失败，状态码：${xhr.status}`));
    }
  };

  // 网络错误/超时处理
  xhr.onerror = () => {
    handleComplete();
    onError?.(new Error('网络请求出错'));
  };

  xhr.ontimeout = () => {
    handleComplete();
    onError?.(new Error('请求超时'));
  };

  // 发送请求
  xhr.send(data);
}

// --- 调用示例 ---
// 1. 按钮旁的加载状态
document.getElementById('btn-user').addEventListener('click', () => {
  ajaxWithLoader({
    url: '/api/user-info',
    loaderEl: '#loader-user',
    onSuccess: (res) => {
      console.log('用户信息获取成功:', res);
      // 这里可以添加渲染用户信息的逻辑
    },
    onError: (err) => {
      console.error('加载失败:', err);
      alert('获取用户信息失败，请重试');
    }
  });
});

// 2. 表格区域的加载状态
function loadTableData() {
  ajaxWithLoader({
    url: '/api/table-data',
    method: 'POST',
    data: { page: 1, size: 10 },
    loaderEl: '#loader-table',
    onSuccess: (res) => {
      console.log('表格数据加载成功:', res);
      document.getElementById('data-table').style.display = 'table';
      // 这里可以添加渲染表格的逻辑
    },
    onError: (err) => {
      console.error('表格加载失败:', err);
      alert('表格数据加载失败');
    }
  });
}

// 3. 使用全局加载图标
function doGlobalAction() {
  ajaxWithLoader({
    url: '/api/global-action',
    loaderEl: '#loader-global',
    onSuccess: (res) => {
      console.log('全局操作完成:', res);
      alert('操作成功！');
    },
    onError: (err) => {
      console.error('全局操作失败:', err);
      alert('操作失败，请稍后重试');
    }
  });
}

• 多请求共享加载元素：如果有多个请求同时作用于同一个加载区域，可以给加载函数加个计数器，等所有相关请求都完成后再隐藏加载图标，避免提前消失。
• 抽离加载控制函数：把显示/隐藏加载图标的逻辑单独写成showLoader(loaderEl)和hideLoader(loaderEl)，让代码更整洁。
• 自定义加载样式：可以根据不同场景设计不同的加载样式，比如按钮旁用小图标，列表区域用文字+图标组合，提升用户体验。

内容的提问来源于stack exchange，提问作者Ed91gg