AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据交互的技术。通过AJAX，我们可以在不刷新整个页面的情况下，通过发送HTTP请求获取服务器返回的数据，并将数据插入到网页中，从而实现动态更新页面的效果。在有多个表格需要从服务器获取数据的情况下，我们可以通过使用AJAX来实现获取多表数据的功能。本文将介绍如何使用AJAX获取多表数据，并通过举例来说明。
假设我们有一个网页，需要从服务器获取两个不同表格的数据分别插入到页面中。首先，我们需要创建一个HTTP请求，并指定请求的URL和请求方法（GET或POST）。然后，我们可以使用AJAX库或者原生JavaScript来发送请求，并在请求成功后，将数据插入到对应的表格中。
<span><span>function</span> loadData() {</span>
<span><span>var</span> xhttp = <span>new</span> XMLHttpRequest();</span>
<span>xhttp.onreadystatechange = <span>function</span>() {</span>
<span><span>if</span> (this.readyState == 4 && this.status == 200) {</span>
<span><span>var</span> data1 = JSON.parse(this.responseText).table1;</span>
<span><span>var</span> data2 = JSON.parse(this.responseText).table2;</span>
<span>insertDataIntoTable(data1, 'table1');</span>
<span>insertDataIntoTable(data2, 'table2');</span>
<span>}</span>
<span>}</span>;
<span>xhttp.open('GET', 'http://example.com/getData', true);</span>
<span>xhttp.send();</span>
<span>}</span>
<span><span>function</span> insertDataIntoTable(data, tableId) {</span>
<span><span>var</span> table = document.getElementById(tableId);</span>
<span><span>var</span> tbody = table.getElementsByTagName('tbody')[0];</span>
<span>data.forEach(<span>function</span>(item) {</span>
<span><span>var</span> row = tbody.insertRow();</span>
<span>Object.keys(item).forEach(<span>function</span>(key) {</span>
<span><span>var</span> cell = row.insertCell();</span>
<span>cell.textContent = item[key];</span>
<span>}</span>);
<span>}</span>);
<span>}</span>在上面的代码中，我们定义了一个loadData函数来发送AJAX请求，并在请求成功后调用insertDataIntoTable函数将数据插入到表格中。在insertDataIntoTable函数中，我们首先获取到对应的表格和表格体，并遍历数据数组，依次在表格体中插入表格行和单元格。
举个例子，假设我们有两个表格，id分别为table1和table2。服务器返回的数据格式为JSON，其中包含了两个键值对table1和table2，对应每个表格的数据数组。在网页加载完成后，我们可以调用loadData函数来获取并插入数据：
<span><span>document</span>.addEventListener('DOMContentLoaded', loadData);</span>通过上述代码，当网页加载完成后，loadData函数会被触发，发送请求并将返回的数据插入到table1和table2表格中。
总结而言，通过使用AJAX技术，我们可以轻松地从服务器获取多个表格的数据，并将数据动态地插入到网页中，实现动态更新页面的效果。这在需要加载大量数据或者频繁更新数据的应用中是非常有用的。