前端开发|数据交互：ajax请求的详细写法，ajax请求的详细写法怎么写

前端开发 | 数据交互：AJAX请求的详细写法指南

2025年8月最新动态：随着WebAssembly技术的成熟，现代AJAX请求处理正变得更加高效，最新浏览器版本已全面支持Promise-based的Fetch API,但传统XMLHttpRequest依然广泛应用于遗留系统中。

AJAX请求基础概念

AJAX全称Asynchronous JavaScript and XML（异步JavaScript和XML），它允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。

虽然名字里有XML，但现在JSON才是主流数据格式，AJAX的核心就是通过JavaScript发起HTTP请求,然后处理服务器返回的数据。

传统XMLHttpRequest写法

基础GET请求

// 1. 创建XHR对象
const xhr = new XMLHttpRequest();
// 2. 配置请求
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求
// 3. 设置回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    const response = JSON.parse(xhr.responseText);
    console.log('获取到的数据:', response);
  } else {
    // 请求出错
    console.error('请求失败:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('请求发生错误');
};
// 4. 发送请求
xhr.send();

POST请求带参数

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 201) { // 201表示资源创建成功
    console.log('提交成功:', xhr.responseText);
  }
};
const data = {
  username: '张三',
  email: 'zhangsan@example.com'
};
xhr.send(JSON.stringify(data));

现代Fetch API写法

Fetch API提供了更简洁的Promise-based接口,是现代浏览器的首选方案。

基础GET请求

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json(); // 解析JSON数据
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

POST请求带参数

const postData = { '我的文章',
  content: '这是文章内容...'
};
fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here' // 认证令牌
  },
  body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => console.log('创建成功:', data))
.catch(error => console.error('错误:', error));

进阶技巧与最佳实践

请求超时处理

XMLHttpRequest方式:

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

Fetch API + AbortController:

const controller = new AbortController();
const signal = controller.signal;
// 设置5秒后超时
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeoutId);
    console.log(data);
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.error('请求超时');
    } else {
      console.error('其他错误:', err);
    }
  });

文件上传

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
formData.append('description', '这是我的文件');
fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
  // 注意: 不要手动设置Content-Type，浏览器会自动处理
})
.then(response => response.json())
.then(result => {
  console.log('上传成功:', result);
});

错误处理增强版

async function fetchWithErrorHandling(url, options = {}) {
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      // 尝试获取错误信息
      let errorMsg = `HTTP错误! 状态码: ${response.status}`;
      try {
        const errorData = await response.json();
        errorMsg = errorData.message || errorMsg;
      } catch (e) {
        // 无法解析JSON错误信息
      }
      throw new Error(errorMsg);
    }
    return await response.json();
  } catch (error) {
    console.error('请求失败:', error.message);
    throw error; // 可以选择继续抛出或处理
  }
}
// 使用示例
fetchWithErrorHandling('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => {
    // 错误已在前面的函数中处理，这里可以做额外处理
  });

实际项目中的封装建议

在实际项目中,我们通常会封装一个通用的请求函数：

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }
  async request(endpoint, method = 'GET', body = null) {
    const url = `${this.baseUrl}${endpoint}`;
    const headers = {
      'Content-Type': 'application/json',
      // 可以在这里添加认证头等
    };
    const config = {
      method,
      headers,
      credentials: 'include' // 如果需要发送cookies
    };
    if (body) {
      config.body = JSON.stringify(body);
    }
    try {
      const response = await fetch(url, config);
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || '请求失败');
      }
      return await response.json();
    } catch (error) {
      console.error(`API请求错误: ${endpoint}`, error);
      throw error;
    }
  }
  get(endpoint) {
    return this.request(endpoint);
  }
  post(endpoint, body) {
    return this.request(endpoint, 'POST', body);
  }
  // 可以继续添加put, delete等方法...
}
// 使用示例
const api = new ApiClient('https://api.example.com');
// 获取数据
api.get('/users')
  .then(users => console.log(users));
// 创建数据
api.post('/users', { name: '李四', age: 28 })
  .then(newUser => console.log('创建的用户:', newUser));

跨域请求处理

当你的前端应用和API不在同一个域名下时，会遇到跨域问题,解决方法有：

1. CORS：后端设置正确的响应头

   • Access-Control-Allow-Origin
   • Access-Control-Allow-Methods
   • Access-Control-Allow-Headers

2. 代理服务器：在开发环境中可以配置代理

   

// 开发环境配置示例（webpack.config.js）
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

性能优化建议

1. 请求合并：对于多个小请求，考虑合并为一个
2. 缓存策略：合理使用缓存控制头
3. 取消重复请求：避免同时发送多个相同请求
4. 请求优先级：关键请求优先加载
5. 数据压缩：使用gzip等压缩技术

AJAX请求是前端开发中最基础也是最重要的技能之一，从传统的XMLHttpRequest到现代的Fetch API，技术不断演进，但核心概念不变，掌握这些技术后,你可以：

• 从服务器获取数据并动态更新页面
• 提交表单数据而无需页面刷新
• 实现更流畅的用户体验
• 构建真正的单页应用(SPA)

随着2025年新技术的发展，AJAX请求可能会进一步简化,但理解其底层原理将帮助你更好地适应未来的变化。