Javascript ajax调用页面onload

JavaScript AJAX 调用与页面 onload 事件

基础概念

AJAX (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。onload 事件是当页面完全加载（包括所有依赖资源如图片和样式表）后触发的事件。

常见类型

原生 JavaScript AJAX：使用 XMLHttpRequest 对象
jQuery AJAX：简化的 AJAX 方法
Fetch API：现代 JavaScript 提供的更简洁的接口
Axios：流行的第三方 HTTP 客户端库

应用场景

动态加载内容（如新闻、评论）
表单提交不刷新页面
实时数据更新（如股票行情）
无限滚动页面
自动完成/搜索建议

常见问题与解决方案

问题1：AJAX 调用在 onload 事件中不起作用

原因：

脚本执行顺序问题
跨域限制
网络请求失败
回调函数未正确处理

解决方案：

window.onload = function() {
    // 使用原生 XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'your-api-endpoint', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText));
        }
    };
    xhr.send();
    
    // 或者使用更现代的 Fetch API
    fetch('your-api-endpoint')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
};

问题2：AJAX 请求在页面加载时太慢

原因：

服务器响应慢
请求数据量过大
网络延迟

解决方案：

优化后端API性能
实现分页或懒加载
使用缓存机制
显示加载指示器

问题3：跨域请求被阻止

原因：

浏览器的同源策略限制

解决方案：

确保服务器设置正确的 CORS 头
使用 JSONP（仅限 GET 请求）
设置代理服务器

最佳实践示例

document.addEventListener('DOMContentLoaded', function() {
    // 更轻量级的替代方案，不需要等待所有资源加载
    loadData();
});

function loadData() {
    // 显示加载状态
    document.getElementById('loading').style.display = 'block';
    
    fetch('https://api.example.com/data')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 处理数据
            renderData(data);
            // 隐藏加载状态
            document.getElementById('loading').style.display = 'none';
        })
        .catch(error => {
            console.error('Fetch error:', error);
            document.getElementById('error').style.display = 'block';
            document.getElementById('loading').style.display = 'none';
        });
}

function renderData(data) {
    // 更新DOM
    const container = document.getElementById('data-container');
    container.innerHTML = data.map(item => `<div>${item.name}</div>`).join('');
}