Ajax（Asynchronous JavaScript and XML）是一種在web應用中發送和接收數據的技術。它允許在不刷新整個頁面的情況下，通過異步請求與服務器進行通信。當從服務器獲取到數據后，我們可以對數據進行格式化，以便更好地展示給用戶。本文將介紹如何使用Ajax來獲取數據，并對這些數據進行格式化。

1. 發送Ajax請求并獲取數據

要發送Ajax請求，我們可以使用JavaScript中的XMLHttpRequest對象。以下是一個簡單的代碼示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 對數據進行格式化
}
};
xhr.send();

在以上代碼中，我們創建了一個XMLHttpRequest對象并指定了請求類型（GET）、請求URL（data.json）和是否需要異步處理（true）。在每次 readyState 改變時，我們檢查是否完成請求（ readyState === 4）并且狀態碼為 200 才做后續處理。如果請求順利完成，我們通過JSON.parse()方法將響應的文本數據解析為JavaScript對象。

2. 格式化數據

一旦從服務器獲取到數據，我們可以使用JavaScript中的一些方法和技術來對數據進行格式化。以下是幾種常見的格式化方式：

2.1. 表格格式化

如果我們從服務器得到一組數據，最常見的一種格式化方式就是將數據以表格的形式展示給用戶。我們可以通過JavaScript動態創建一個HTML表格，并將每個數據項作為一個表格行插入到表格中。以下是一個簡單的例子：

var table = document.createElement('table');
for (var i = 0; i < data.length; i++) {
var row = document.createElement('tr');
var cell1 = document.createElement('td');
cell1.innerHTML = data[i].name;
var cell2 = document.createElement('td');
cell2.innerHTML = data[i].age;
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
}
document.body.appendChild(table);

2.2. 圖表格式化

如果我們從服務器獲取到的數據適合用圖表來展示，我們可以使用JavaScript中的圖表庫（如Chart.js、D3.js等）將數據以圖表的形式呈現給用戶。以下是一個使用Chart.js創建柱狀圖的例子：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(function(item) {
return item.month;
}),
datasets: [{
label: '銷售額',
data: data.map(function(item) {
return item.sales;
}),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

2.3. 文本格式化

有些情況下，我們可能只需要將從服務器獲取的數據以文本形式展示給用戶，而不需要其他格式化方式。這時候，我們可以直接通過JavaScript將數據插入到HTML元素中即可。以下是一個簡單的例子：

var div = document.createElement('div');
div.innerHTML = '<h2>' + data.title + '</h2><p>' + data.content + '</p>';
document.body.appendChild(div);

3. 總結

通過Ajax獲取和格式化數據，可以幫助我們更好地展示數據給用戶。無論是以表格、圖表還是純文本的形式，我們都可以根據實際需要選擇適合的數據格式化方式。通過簡單的JavaScript代碼，我們能夠將從服務器獲取到的數據以更易讀、美觀的方式展示給用戶，提升用戶體驗。

以上僅是關于Ajax如何返回數據格式化的簡要介紹，實際應用中還有更多細節和復雜性需要考慮。不同的數據格式化方式可以根據實際需求進行擴展和調整。