添加到返回的ajax调用数据的表格

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页应用能够快速地更新网页的部分内容。

类型

GET 请求：用于请求数据，通常用于从服务器检索信息。
POST 请求：用于提交数据，通常用于向服务器发送新的数据。

应用场景

动态内容更新：如新闻动态、股票价格等实时信息的更新。
表单提交：用户填写表单后，通过 AJAX 提交数据，无需刷新页面。
搜索建议：用户在搜索框输入时，实时显示相关的搜索建议。

示例代码

以下是一个简单的 AJAX 调用示例，用于从服务器获取数据并将其添加到表格中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Table Example</title>
    <script>
        function loadData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    populateTable(data);
                }
            };
            xhr.open("GET", "https://api.example.com/data", true);
            xhr.send();
        }

        function populateTable(data) {
            var table = document.getElementById("dataTable");
            for (var i = 0; i < data.length; i++) {
                var row = table.insertRow(i + 1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = data[i].name;
                cell2.innerHTML = data[i].value;
            }
        }
    </script>
</head>
<body>
    <h2>Data Table</h2>
    <table id="dataTable" border="1">
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </table>
    <button onclick="loadData()">Load Data</button>
</body>
</html>