HTML表格如何实现数据的API调用？有哪些方法？

<table id="myDataTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据会动态加载到这里 -->
    </tbody>
</table>
<div id="loadingIndicator" style="display: none;">加载中...</div>
<div id="errorMessage" style="color: red; display: none;"></div>

document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.querySelector('#myDataTable tbody');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const errorMessage = document.getElementById('errorMessage');
    const apiUrl = 'https://api.example.com/data'; // 替换成你的API地址

    // 显示加载指示器
    loadingIndicator.style.display = 'block';
    errorMessage.style.display = 'none'; // 确保错误信息隐藏

    fetch(apiUrl)
        .then(response => {
            // 检查HTTP响应状态码，例如200 OK
            if (!response.ok) {
                // 如果不是成功的响应，抛出错误
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            // 解析JSON数据
            return response.json();
        })
        .then(data => {
            // 隐藏加载指示器
            loadingIndicator.style.display = 'none';

            // 确保数据是数组，并且有内容
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(item => {
                    const row = document.createElement('tr'); // 创建行

                    // 创建单元格并填充数据
                    const idCell = document.createElement('td');
                    idCell.textContent = item.id; // 假设数据中有id字段
                    row.appendChild(idCell);

                    const nameCell = document.createElement('td');
                    nameCell.textContent = item.name; // 假设数据中有name字段
                    row.appendChild(nameCell);

                    const statusCell = document.createElement('td');
                    statusCell.textContent = item.status; // 假设数据中有status字段
                    row.appendChild(statusCell);

                    tableBody.appendChild(row); // 将行添加到表格体
                });
            } else {
                // 处理空数据的情况
                tableBody.innerHTML = '<tr><td colspan="3">暂无数据</td></tr>';
            }
        })
        .catch(error => {
            // 捕获请求或处理过程中的任何错误
            console.error('获取数据失败:', error);
            loadingIndicator.style.display = 'none'; // 隐藏加载指示器
            errorMessage.textContent = `数据加载失败：${error.message}`;
            errorMessage.style.display = 'block'; // 显示错误信息
            tableBody.innerHTML = '<tr><td colspan="3">数据加载失败，请稍后再试。</td></tr>';
        });
});

// XHR的简单示例
function loadDataWithXHR() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true); // true表示异步
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 请求完成
            if (xhr.status === 200) { // HTTP状态码200表示成功
                const data = JSON.parse(xhr.responseText);
                // 类似Fetch，这里处理数据并填充表格
                console.log('XHR data:', data);
            } else {
                console.error('XHR error:', xhr.status, xhr.statusText);
            }
        }
    };
    xhr.send();
}
// loadDataWithXHR();

// jQuery Ajax的简单示例
// 确保页面中已引入jQuery库
/*
$(document).ready(function() {
    $.ajax({
        url: 'https://api.example.com/data',
        method: 'GET',
        dataType: 'json', // 期望返回的数据类型
        success: function(data) {
            // 类似Fetch，这里处理数据并填充表格
            console.log('jQuery Ajax data:', data);
        },
        error: function(xhr, status, error) {
            console.error('jQuery Ajax error:', status, error);
        }
    });
});
*/

// Axios的简单示例
// 确保已通过npm/cdn引入Axios库
/*
axios.get('https://api.example.com/data')
    .then(response => {
        const data = response.data; // Axios会自动解析JSON
        // 类似Fetch，这里处理数据并填充表格
        console.log('Axios data:', data);
    })
    .catch(error => {
        console.error('Axios error:', error);
    });
*/