Ajax 中的各种常见概念

┌──────────────────────────────────────────┐
│               浏览器                       │
│                                          │
│   用户操作 → JS 事件 → Ajax 请求           │
│                        ↓                │
│                   服务器处理 ← 后端 API     │
│                        ↓                │
│   JS 接收响应 → 更新 DOM（局部刷新）        │
└──────────────────────────────────────────┘

① 用户触发事件（点击、滚动、表单提交……）
② JavaScript 创建 XMLHttpRequest 或调用 fetch()
③ 向服务器发送 HTTP 请求
④ 服务器处理请求并返回数据（JSON/XML/文本）
⑤ JavaScript 接收响应并更新页面

// 1. 创建 XHR 对象
const xhr = new XMLHttpRequest();

// 2. 配置请求（method, url, async）
xhr.open('GET', '/api/users', true);

// 3. 设置回调
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

// 4. 发送请求
xhr.send();

xhr.onreadystatechange = function() {
    console.log('readyState:', xhr.readyState, 'status:', xhr.status);
};

// 发送 JSON
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: '张三', age: 25 }));

// 发送表单数据（文件上传）
const formData = new FormData();
formData.append('name', '张三');
formData.append('avatar', fileInput.files[0]);

const xhr2 = new XMLHttpRequest();
xhr2.open('POST', '/api/upload');
xhr2.send(formData);
// 注意：用 FormData 时不要手动设置 Content-Type，浏览器会自动设

// GET 请求
fetch('/api/users')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP ' + response.status);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('请求失败:', error));

// GET
fetch('/api/users?page=1&limit=10');

// POST — 发送 JSON
fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: '张三', age: 25 }),
});

// PUT — 更新资源
fetch('/api/users/123', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: '李四' }),
});

// DELETE — 删除资源
fetch('/api/users/123', { method: 'DELETE' });

// PATCH — 部分更新
fetch('/api/users/123', {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ age: 26 }),
});

const res = await fetch('/api/data');

// 解析为 JSON
const json = await res.json();

// 解析为文本
const text = await res.text();

// 解析为 Blob（图片、文件）
const blob = await res.blob();

// 解析为 FormData
const formData = await res.formData();

// 解析为 ArrayBuffer
const buffer = await res.arrayBuffer();

fetch('/api/protected', {
    headers: {
        'Authorization': 'Bearer ' + token,
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json',
    },
});

// 创建 AbortController
const controller = new AbortController();
const signal = controller.signal;

// 5秒超时
setTimeout(() => controller.abort(), 5000);

try {
    const res = await fetch('/api/slow-endpoint', { signal });
    const data = await res.json();
} catch (error) {
    if (error.name === 'AbortError') {
        console.error('请求超时');
    } else {
        console.error('请求失败:', error);
    }
}

// Fetch 方式（带进度需要 XHR）
function uploadWithProgress(url, file, onProgress) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url);

        xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) {
                onProgress((e.loaded / e.total) * 100);
            }
        };

        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error('HTTP ' + xhr.status));
            }
        };

        xhr.onerror = () => reject(new Error('网络错误'));

        const formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    });
}

https://www.example.com:443
└────┘ └──────────────┘ └─┘
  协议        域名       端口

// ❌ 跨域读取响应数据
fetch('https://other-site.com/api/data')
    .then(res => res.json())  // 被浏览器拦截

// ✅ 跨域请求仍然会发出，但 JS 无法读取响应

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

// Node.js (Express) 示例
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.example.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.header('Access-Control-Allow-Credentials', 'true');

    // 预检请求
    if (req.method === 'OPTIONS') {
        return res.sendStatus(204);
    }

    next();
});

// 这个请求会触发预检（OPTIONS）
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',  // 不是简单请求允许的类型
        'Authorization': 'Bearer xxx',       // 非简单请求头
    },
    body: JSON.stringify({ name: '张三' }),
});

预检流程：

浏览器 → OPTIONS /users → 服务器
                      ← 200 (允许跨域)
浏览器 → POST /users   → 服务器（正式请求）
                      ← 200 (响应数据)

// 前端需设置 credentials
fetch('https://api.example.com/data', {
    credentials: 'include',  // 携带 Cookie
});

// 服务端必须允许
// Access-Control-Allow-Origin: https://www.example.com  （不能是 *）
// Access-Control-Allow-Credentials: true

// 前端
function handleResponse(data) {
    console.log('收到数据:', data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

// 服务端返回一个函数调用
handleResponse({ "name": "张三", "age": 25 });

function jsonp(url, callbackName = 'callback') {
    return new Promise((resolve, reject) => {
        const funcName = 'jsonp_' + Date.now() + '_' + Math.random().toString(36).slice(2);
        window[funcName] = function(data) {
            delete window[funcName];
            document.body.removeChild(script);
            resolve(data);
        };

        const separator = url.includes('?') ? '&' : '?';
        const script = document.createElement('script');
        script.src = url + separator + callbackName + '=' + funcName;

        script.onerror = function() {
            delete window[funcName];
            document.body.removeChild(script);
            reject(new Error('JSONP 请求失败'));
        };

        document.body.appendChild(script);
    });
}

// 使用
jsonp('https://api.example.com/users')
    .then(data => console.log(data))
    .catch(err => console.error(err));

// Nginx 代理配置
location /api/ {
    proxy_pass https://target-api.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Content-Type: application/json         # 请求体格式
Authorization: Bearer <token>          # 身份认证
Accept: application/json               # 期望的响应格式
X-Requested-With: XMLHttpRequest       # 标识是 Ajax 请求
Cache-Control: no-cache                # 禁用缓存
If-Modified-Since: ...                 # 条件请求（缓存）
If-None-Match: "etag-value"            # 条件请求（ETag）

Content-Type: application/json; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600
Set-Cookie: sessionId=abc123; HttpOnly; Secure
X-Request-Id: req-uuid-123             # 请求追踪 ID
X-RateLimit-Remaining: 98              # 剩余请求次数
Access-Control-Allow-Origin: *         # CORS

// 统一处理认证失效
window.addEventListener('unhandledrejection', function(event) {
    if (event.reason?.status === 401) {
        // Token 过期，跳转登录
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    }
});