Ajax无刷新交互全实例指南

一、基础实现方案

1.1 原生JavaScript实现

function fetchUserData(userId) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/api/users/${userId}`, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            const user = JSON.parse(xhr.responseText);
            document.getElementById('user-info').innerHTML = `
                <p>姓名：${user.name}</p>
                <p>邮箱：${user.email}</p>
            `;
        } else {
            console.error('请求失败:', xhr.statusText);
        }
    };
    
    xhr.onerror = function() {
        console.error('网络错误');
    };
    
    xhr.send();
}

1.2 响应数据处理

graph TD
    A[发起Ajax请求] --> B{响应成功?}
    B -->|是| C[解析JSON数据]
    B -->|否| D[显示错误信息]
    C --> E[更新DOM元素]
    E --> F[触发UI动画]
    style C fill:#6f9,stroke:#333
    style D fill:#f66,stroke:#333

二、jQuery优化方案

2.1 简洁调用方式

function loadProductList(category) {
    $.ajax({
        url: '/api/products',
        type: 'GET',
        data: { category: category },
        dataType: 'json',
        success: function(products) {
            const $list = $('#product-list').empty();
            products.forEach(p => {
                $list.append(`
                    <div class="product-card">
                        <h3>${p.name}</h3>
                        <p>价格：¥${p.price}</p>
                    </div>
                `);
            });
            animateCards();
        },
        error: function(xhr) {
            toastr.error('加载失败: ' + xhr.status);
        }
    });
}

2.2 链式调用示例

// 提交表单数据
$('#order-form').submit(function(e) {
    e.preventDefault();
    $(this).find('button').prop('disabled', true);
    
    $.post('/api/orders', $(this).serialize())
        .done(function(res) {
            $('#order-result').html(`订单号: ${res.orderId}`);
        })
        .fail(function() {
            alert('提交失败，请重试');
        })
        .always(function() {
            $(this).find('button').prop('disabled', false);
        });
});

三、Fetch API现代实践

3.1 基本请求模式

async function updateProfile(profileData) {
    try {
        const response = await fetch('/api/profile', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': getCSRFToken()
            },
            body: JSON.stringify(profileData)
        });
        
        if (!response.ok) throw new Error(response.statusText);
        
        const result = await response.json();
        showNotification('保存成功', 'success');
        return result;
    } catch (error) {
        showNotification(error.message, 'error');
        throw error;
    }
}

3.2 取消请求实现

let controller = null;

function searchProducts(keyword) {
    // 取消前一个请求
    if (controller) controller.abort();
    
    controller = new AbortController();
    
    fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
        signal: controller.signal
    })
    .then(response => response.json())
    .then(data => {
        renderSearchResults(data.items);
        controller = null;
    })
    .catch(err => {
        if (err.name !== 'AbortError') {
            console.error('搜索失败:', err);
        }
    });
}

四、Axios企业级方案

4.1 全局配置

// axios-config.js
import axios from 'axios';

const instance = axios.create({
    baseURL: '/api/v2',
    timeout: 10000,
    headers: {'X-Requested-With': 'XMLHttpRequest'}
});

// 请求拦截器
instance.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${getToken()}`;
    return config;
}, error => {
    return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
    return response.data;
}, error => {
    if (error.response.status === 401) {
        redirectToLogin();
    }
    return Promise.reject(error);
});

export default instance;

4.2 文件上传实现

// 文件上传组件
async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('metadata', JSON.stringify({
        uploader: currentUser.id,
        tags: ['document']
    }));

    try {
        const progressBar = document.getElementById('upload-progress');
        const response = await axios.post('/uploads', formData, {
            onUploadProgress: progress => {
                const percent = Math.round(
                    (progress.loaded * 100) / progress.total
                );
                progressBar.style.width = `${percent}%`;
            }
        });
        
        return response.data.fileUrl;
    } catch (err) {
        console.error('上传失败:', err);
        throw err;
    }
}

五、前端状态管理

5.1 请求状态跟踪

// Vue示例
data() {
    return {
        loading: false,
        error: null,
        posts: []
    }
},
methods: {
    async fetchPosts() {
        this.loading = true;
        this.error = null;
        
        try {
            const res = await axios.get('/posts');
            this.posts = res.data;
        } catch (err) {
            this.error = err.response?.data?.message || err.message;
        } finally {
            this.loading = false;
        }
    }
}

5.2 React Hook封装

// useApi.js
import { useState } from 'react';

export default function useApi(apiFunc) {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);

    const request = async (...args) => {
        setLoading(true);
        try {
            const result = await apiFunc(...args);
            setData(result.data);
            return result;
        } catch (err) {
            setError(err.response?.data || err.message);
            throw err;
        } finally {
            setLoading(false);
        }
    };

    return { data, error, loading, request };
}

// 使用示例
const { data, loading, request } = useApi(axios.get);
request('/users');

六、性能优化策略

6.1 请求合并技术

// 批量查询用户
async function getUsersBatch(ids) {
    const batchSize = 50; // 每批50个ID
    const results = [];
    
    for (let i = 0; i < ids.length; i += batchSize) {
        const batchIds = ids.slice(i, i + batchSize);
        const res = await axios.post('/users/batch', { ids: batchIds });
        results.push(...res.data);
    }
    
    return results;
}

6.2 缓存实现方案

const apiCache = new Map();

async function cachedRequest(url, options = {}) {
    const cacheKey = JSON.stringify({ url, options });
    
    if (apiCache.has(cacheKey)) {
        return apiCache.get(cacheKey);
    }
    
    const response = await fetch(url, options);
    const data = await response.json();
    
    apiCache.set(cacheKey, data);
    setTimeout(() => apiCache.delete(cacheKey), 300000); // 5分钟缓存
    
    return data;
}

七、安全防护措施

7.1 CSRF防护配置

// Django示例
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true;

// Laravel示例
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

7.2 请求限流处理

// 请求队列管理
const requestQueue = [];
let inProgress = false;

async function processQueue() {
    if (inProgress || requestQueue.length === 0) return;
    
    inProgress = true;
    const { url, options, resolve, reject } = requestQueue.shift();
    
    try {
        const response = await fetch(url, options);
        resolve(response);
    } catch (error) {
        reject(error);
    } finally {
        inProgress = false;
        setTimeout(processQueue, 1000); // 1秒间隔
    }
}

function throttledFetch(url, options) {
    return new Promise((resolve, reject) => {
        requestQueue.push({ url, options, resolve, reject });
        processQueue();
    });
}

八、实时通信进阶

8.1 SSE实时数据流

// 服务器推送事件处理
function setupEventSource() {
    const eventSource = new EventSource('/api/notifications');
    
    eventSource.onmessage = event => {
        const notification = JSON.parse(event.data);
        addNotificationToUI(notification);
    };
    
    eventSource.onerror = () => {
        console.warn('连接中断，5秒后重试...');
        setTimeout(setupEventSource, 5000);
    };
}

8.2 WebSocket双向通信

// 聊天室实现
class ChatClient {
    constructor() {
        this.socket = new WebSocket(`wss://${location.host}/chat`);
        this.setupHandlers();
    }
    
    setupHandlers() {
        this.socket.onmessage = event => {
            const message = JSON.parse(event.data);
            this.displayMessage(message);
        };
        
        this.socket.onclose = () => {
            this.showReconnectButton();
        };
    }
    
    sendMessage(text) {
        if (this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify({
                content: text,
                timestamp: Date.now()
            }));
        }
    }
}

九、错误处理最佳实践

9.1 统一错误处理

// 错误分类处理
function handleApiError(error) {
    if (error.response) {
        // 服务器响应错误
        switch (error.response.status) {
            case 401:
                redirectToLogin();
                break;
            case 403:
                showForbiddenModal();
                break;
            case 500:
                logErrorToService(error);
                showServerError();
                break;
            default:
                toast.error(error.response.data.message);
        }
    } else if (error.request) {
        // 请求未收到响应
        showNetworkError();
    } else {
        // 其他错误
        console.error('Error:', error.message);
    }
}

9.2 重试机制实现

async function fetchWithRetry(url, options, retries = 3) {
    try {
        const response = await fetch(url, options);
        if (!response.ok) throw new Error(response.statusText);
        return response;
    } catch (error) {
        if (retries <= 0) throw error;
        await new Promise(resolve => setTimeout(resolve, 1000));
        return fetchWithRetry(url, options, retries - 1);
    }
}

十、完整项目示例

10.1 评论系统实现

// 前端代码
class CommentSystem {
    constructor() {
        this.commentForm = document.getElementById('comment-form');
        this.commentList = document.getElementById('comment-list');
        this.bindEvents();
        this.loadComments();
    }
    
    bindEvents() {
        this.commentForm.addEventListener('submit', async e => {
            e.preventDefault();
            const formData = new FormData(this.commentForm);
            
            try {
                await axios.post('/comments', formData);
                this.commentForm.reset();
                this.loadComments();
            } catch (err) {
                alert('评论提交失败: ' + err.message);
            }
        });
    }
    
    async loadComments() {
        try {
            const { data } = await axios.get('/comments');
            this.renderComments(data);
        } catch (err) {
            console.error('加载评论失败:', err);
        }
    }
    
    renderComments(comments) {
        this.commentList.innerHTML = comments.map(comment => `
            <div class="comment">
                <strong>${comment.author}</strong>
                <p>${comment.content}</p>
                <small>${new Date(comment.createdAt).toLocaleString()}</small>
            </div>
        `).join('');
    }
}

new CommentSystem();

10.2 后端接口示例(Node.js)

// Express路由
const express = require('express');
const router = express.Router();
const Comment = require('../models/Comment');

router.get('/comments', async (req, res) => {
    try {
        const comments = await Comment.find()
            .sort({ createdAt: -1 })
            .limit(50);
        res.json(comments);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

router.post('/comments', async (req, res) => {
    const comment = new Comment({
        author: req.body.author,
        content: req.body.content
    });
    
    try {
        const savedComment = await comment.save();
        res.status(201).json(savedComment);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

关键总结：