xhr, jquery.ajax, axios前端发送请求

'# xhr, jquery.ajax, axios前端发送请求

一、背景与问题

在现代Web开发中，前后端分离架构已成为主流。前端需要通过HTTP请求与后端进行数据交互，而前端发送请求的方式经历了从原始的XMLHttpRequest到jQuery.ajax，再到Axios的演进过程。本文将深入剖析这三种技术的底层原理、实现差异、适用场景及常见问题。

二、基本原理

1. XMLHttpRequest (XHR) 原理

XHR是浏览器内置的HTTP请求接口，通过XMLHttpRequest对象实现。其核心机制包括：

• 同步/异步请求：通过async属性控制请求模式
• 请求头设置：通过setRequestHeader方法设置自定义头
• 事件驱动模型：通过onreadystatechange处理不同状态码
• 跨域限制：受同源策略约束，需配置CORS

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

2. jQuery.ajax 原理

jQuery对XHR进行了封装，提供了更简洁的API。其核心特点包括：

• 统一接口：通过$.ajax封装所有HTTP方法
• 自动处理：自动处理JSON数据转换、状态码判断
• 兼容性增强：支持IE6+的兼容性
• 链式调用：支持.done()/.fail()等链式方法

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    headers: {
        'Authorization': 'Bearer token'
    }
}).done(function(response) {
    console.log('Success:', response);
}).fail(function(error) {
    console.error('Error:', error);
});

3. Axios 原理

Axios是基于Promise的HTTP客户端，其核心优势在于：

• 异步处理：完全基于Promise的异步模型
• 拦截器机制：支持请求/响应拦截器
• 自动转换：自动将响应数据转换为JSON
• 客户端/服务端支持：支持浏览器和Node.js环境

axios.get('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer token'
    }
})
.then(response => {
    console.log('Axios Response:', response.data);
})
.catch(error => {
    console.error('Axios Error:', error);
});

三、环境准备

1. 确保开发环境支持：

   • 浏览器支持：现代浏览器均支持XHR和Fetch API
   • Node.js环境（用于Axios的Node.js场景）

2. 基础依赖：

   • jQuery 3.x（用于jQuery.ajax）
   • Axios 1.x（用于Axios）

四、核心实现

1. XHR 基本用法

// 基础GET请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('XHR Response:', JSON.parse(xhr.responseText));
        } else {
            console.error('XHR Error:', xhr.status);
        }
    }
};
xhr.send();

关键点解释：

• readyState 0-4状态码说明
• status 200-300表示成功
• responseText返回原始文本
• responseJSON自动解析JSON（需设置responseType为json）

2. jQuery.ajax 高级用法

// 带自定义头的POST请求
$.ajax({
    url: 'https://api.example.com/submit',
    method: 'POST',
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
    },
    data: JSON.stringify({
        username: 'test',
        password: '123456'
    }),
    processData: false,
    contentType: false
}).then(function(response) {
    console.log('jQuery Response:', response);
});

关键点解释：

• processData: false禁用自动序列化
• contentType: false自定义Content-Type
• $.ajax返回的Promise对象

3. Axios 拦截器与配置

// 配置全局拦截器
axios.interceptors.request.use(config => {
    // 添加token
    config.headers.Authorization = 'Bearer ' + getToken();
    return config;
}, error => {
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    // 处理响应数据
    return response.data;
}, error => {
    // 处理错误
    return Promise.reject(error);
});

关键点解释：

• 全局拦截器可统一处理认证、日志等逻辑
• 响应拦截器可统一处理数据转换
• 拦截器支持链式调用

五、完整案例

1. 用户登录完整案例

前端代码（Vue + Axios）

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        if (response.status === 200) {
          alert('登录成功');
          // 存储token
          localStorage.setItem('token', response.data.token);
        }
      } catch (error) {
        alert('登录失败');
        console.error(error);
      }
    }
  }
};
</script>

后端接口（Node.js + Express）

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    // 模拟验证逻辑
    if (username === 'admin' && password === '123456') {
        res.status(200).json({ token: 'mock_token' });
    } else {
        res.status(401).json({ error: 'Invalid credentials' });
    }
});

关键点分析：

• 前端使用Axios的POST请求
• 后端返回token用于后续请求
• 使用localStorage存储token
• 添加错误处理机制

六、源码解析

1. Axios源码关键点

// Axios核心函数
function createInstance(defaultConfig) {
    const instance = {
        defaults: defaultConfig,
        request: function(config) {
            // 构造请求配置
            const config = mergeConfig(this.defaults, config);
            // 添加拦截器
            config = this.interceptors.request.forEach(interceptor => {
                config = interceptor(config);
            });
            // 发送请求
            return axios.request(config);
        }
    };
    return instance;
}

关键点解析：

• 配置合并机制
• 拦截器链式处理
• 核心请求函数的封装

2. jQuery.ajax源码关键点

function ajax(options) {
    const settings = jQuery.extend(true, {}, jQuery.ajaxSettings, options);
    // 处理headers
    if (settings.headers) {
        jQuery.each(settings.headers, (key, value) => {
            xhr.setRequestHeader(key, value);
        });
    }
    // 发送请求
    xhr.send(settings.data);
}

关键点解析：

• 配置合并机制
• 自动处理headers
• 简化了XHR的复杂度

七、进阶使用

1. 使用Axios的请求/响应拦截器

// 全局请求拦截器
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

// 全局响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.headers['content-type'] === 'application/json') {
            return response.data;
        }
        return response;
    },
    error => {
        if (error.response && error.response.status === 401) {
            // 处理401错误
            alert('未授权，请重新登录');
        }
        return Promise.reject(error);
    }
);

2. 使用Axios的CancelToken实现取消请求

const source = axios.CancelToken.source();
axios.get('/api/data', {
    cancelToken: source.token
}).catch(thrown => {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // 处理错误
    }
});
// 取消请求
source.cancel('用户主动取消请求');

八、性能与工程实践

1. 性能优化策略

2. 异常处理方案

try {
    const response = await axios.get('/api/data');
    console.log(response.data);
} catch (error) {
    if (error.response) {
        console.error('Server responded with status:', error.response.status);
    } else if (error.request) {
        console.error('No response received:', error.request);
    } else {
        console.error('Error setting up request:', error.message);
    }
}

3. 安全实践

1. CSRF防护：使用XSRF-TOKEN头
2. 数据加密：使用Content-Security-Policy头
3. HTTPS：强制使用HTTPS协议
4. CORS配置：正确设置Access-Control-Allow-Origin

九、常见问题与踩坑

1. 常见错误及解决办法

2. 常见性能陷阱

• 过度使用JSON.stringify：可能导致内存泄漏
• 未设置Content-Type：可能导致数据解析错误
• 未处理超时：使用timeout配置避免阻塞

3. 安全风险分析

十、最佳实践

1. 推荐方案选择

2. 代码规范建议

• 使用async/await替代.then()提高可读性
• 使用拦截器统一处理错误和日志
• 使用responseType: 'json'自动解析数据
• 为关键请求添加超时机制

3. 工程实践建议

• 使用axios.create()创建实例，避免全局污染
• 在前端配置文件中集中管理API地址
• 使用TypeScript增强类型安全
• 对敏感接口添加验证和签名

十一、总结

前端发送请求是Web开发的核心能力，从XHR到jQuery.ajax再到Axios，每种技术都有其适用场景和局限性。理解这些技术的底层原理，能够帮助开发者做出更优的技术选型。

在实际项目中，应根据以下因素选择技术方案：

• 项目复杂度：简单场景可使用jQuery.ajax，复杂场景推荐Axios
• 兼容性需求：需要支持旧浏览器时使用XHR
• 性能要求：需要高性能时使用Axios的底层优化
• 安全需求：需要严格控制请求时使用token和CORS配置

建议在现代项目中优先使用Axios，其提供的拦截器、Promise模型和配置灵活性能够显著提升开发效率。同时要特别注意安全性，避免常见的CSRF、XSS等漏洞。通过合理使用这些技术，可以构建出更健壮、可维护的前端应用。