HTML代码怎么实现异步加载_HTML代码异步数据加载方法与加载状态优化

function loadDataWithXHR() {
    const xhr = new XMLHttpRequest();
    const targetElement = document.getElementById('async-content');

    // 监听状态变化
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) { // 请求完成
            if (xhr.status === 200) { // 成功
                targetElement.innerHTML = xhr.responseText;
            } else { // 失败
                targetElement.innerHTML = '<p style="color: red;">加载失败，请稍后再试。</p>';
                console.error('XHR request failed:', xhr.status);
            }
        } else {
            // 可以在这里显示加载动画
            targetElement.innerHTML = '<p>数据加载中...</p>';
        }
    };

    // 配置请求
    xhr.open('GET', 'https://api.example.com/data', true); // true表示异步
    // 发送请求
    xhr.send();
}

// 假设页面上有一个按钮触发加载
// <button onclick="loadDataWithXHR()">加载XHR数据</button>
// <div id="async-content"></div>

function loadDataWithFetch() {
    const targetElement = document.getElementById('async-content-fetch');
    targetElement.innerHTML = '<p>数据加载中...</p>'; // 显示加载状态

    fetch('https://api.example.com/data')
        .then(response => {
            if (!response.ok) {
                // 如果HTTP状态码不是2xx，抛出错误
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // 解析JSON数据
        })
        .then(data => {
            // 假设返回的数据是JSON格式，我们把它显示出来
            targetElement.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
        })
        .catch(error => {
            targetElement.innerHTML = `<p style="color: red;">加载失败：${error.message}</p>`;
            console.error('Fetch request failed:', error);
        });
}

// 假设页面上有一个按钮触发加载
// <button onclick="loadDataWithFetch()">加载Fetch数据</button>
// <div id="async-content-fetch"></div>

async function getPosts() {
    const loadingIndicator = document.getElementById('loading-spinner');
    const postsContainer = document.getElementById('posts-list');
    loadingIndicator.style.display = 'block'; // 显示加载动画
    postsContainer.innerHTML = ''; // 清空旧内容

    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5'); // 假设获取5篇文章
        if (!response.ok) {
            throw new Error(`网络请求失败，状态码: ${response.status}`);
        }
        const posts = await response.json(); // 解析JSON数据

        let htmlContent = '<ul>';
        posts.forEach(post => {
            htmlContent += `<li><h3>${post.title}</h3><p>${post.body}</p></li>`;
        });
        htmlContent += '</ul>';
        postsContainer.innerHTML = htmlContent;

    } catch (error) {
        console.error('获取文章失败:', error);
        postsContainer.innerHTML = `<p style="color: red;">抱歉，文章加载出错了：${error.message}</p>`;
    } finally {
        loadingIndicator.style.display = 'none'; // 隐藏加载动画
    }
}

// HTML结构示例
// <button onclick="getPosts()">加载最新文章</button>
// <div id="loading-spinner" style="display: none;">加载中...</div>
// <div id="posts-list"></div>

async function submitFormData() {
    const form = document.getElementById('user-form');
    const formData = new FormData(form); // 获取表单数据
    const resultDiv = document.getElementById('submit-result');
    resultDiv.innerHTML = '正在提交...';

    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST', // 指定请求方法
            headers: {
                'Content-Type': 'application/json' // 告诉服务器我们发送的是JSON数据
            },
            body: JSON.stringify({ // 将数据转换为JSON字符串
                title: formData.get('title'),
                body: formData.get('body'),
                userId: 1
            })
        });

        if (!response.ok) {
            throw new Error(`提交失败，状态码: ${response.status}`);
        }

        const data = await response.json();
        resultDiv.innerHTML = `<p style="color: green;">提交成功！</p><pre>${JSON.stringify(data, null, 2)}</pre>`;
        form.reset(); // 提交成功后清空表单
    } catch (error) {
        console.error('表单提交失败:', error);
        resultDiv.innerHTML = `<p style="color: red;">提交失败：${error.message}</p>`;
    }
}

// HTML结构示例
// <form id="user-form" onsubmit="event.preventDefault(); submitFormData();">
//     <input type="text" name="title" placeholder="标题" required><br>
//     <textarea name="body" placeholder="内容" required></textarea><br>
//     <button type="submit">提交</button>
// </form>
// <div id="submit-result"></div>

let controller; // 全局或局部变量，用于存储 AbortController

async function fetchDataWithAbort() {
    if (controller) { // 如果有未完成的请求，先取消
        controller.abort();
    }
    controller = new AbortController();
    const signal = controller.signal; // 获取信号

    const targetElement = document.getElementById('abort-content');
    targetElement.innerHTML = '<p>数据加载中...</p>';

    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', { signal }); // 将信号传递给fetch
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        const data = await response.json();
        targetElement.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    } catch (error) {
        if (error.name === 'AbortError') {
            targetElement.innerHTML = '<p style="color: orange;">请求已取消。</p>';
            console.log('Fetch request aborted.');
        } else {
            targetElement.innerHTML = `<p style="color: red;">加载失败：${error.message}</p>`;
            console.error('Fetch request failed:', error);
        }
    }
}

function cancelFetch() {
    if (controller) {
        controller.abort(); // 取消请求
        controller = null; // 清除controller
    }
}

// HTML结构示例
// <button onclick="fetchDataWithAbort()">加载可取消数据</button>
// <button onclick="cancelFetch()">取消加载</button>
// <div id="abort-content"></div>