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技術，我們可以輕松地從服務器獲取多個表格的數據，并將數據動態地插入到網頁中，實現動態更新頁面的效果。這在需要加載大量數據或者頻繁更新數據的應用中是非常有用的。