在現代web開發中，動態加載數據是非常常見的需求。而Ajax是一種強大的技術，可以通過異步方式從服務器獲取數據，使得網頁能夠在不刷新的情況下更新和顯示最新的數據。在這篇文章中，我們將探討如何使用Ajax來獲取配置文件中的數據，并對這些數據進行處理和展示。

假設我們有一個網站，其中包含有關員工的信息。我們的服務器上有一個名為config.json的文件，其中存儲了員工的姓名、職位和薪水等信息。我們希望能夠通過Ajax獲取這些信息，并在網頁中展示出來。

// config.json文件示例
{
"employees": [
{
"name": "張三",
"position": "經理",
"salary": 10000
},
{
"name": "李四",
"position": "工程師",
"salary": 8000
},
{
"name": "王五",
"position": "銷售",
"salary": 5000
}
]
}

要實現這個目標，我們可以使用JavaScript中的Ajax技術。首先，我們需要創建一個XMLHttpRequest對象，然后使用該對象發送一個GET請求到服務器上的config.json文件。

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 發送GET請求，請求config.json文件
xhr.open('GET', 'config.json', true);
xhr.send();

當服務器響應請求時，我們需要通過onreadystatechange事件來監聽XHR對象的狀態變化。當狀態碼為4時，說明服務器已成功返回數據。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 代碼繼續在此處編寫
}
};

接下來，我們需要從響應的JSON數據中提取員工信息，并將其展示在網頁中。我們可以使用JSON.parse()方法將JSON字符串轉換為JavaScript對象，然后利用對象的屬性和方法來操作數據。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 對數據進行處理和展示
var employees = data.employees;
for (var i = 0; i < employees.length; i++) {
var employee = employees[i];
console.log('姓名：' + employee.name);
console.log('職位：' + employee.position);
console.log('薪水：' + employee.salary);
}
}
};

通過上述代碼，我們可以將每個員工的姓名、職位和薪水打印到控制臺中。如果我們希望在網頁中展示這些數據，我們可以在代碼中添加DOM操作，創建相應的元素并將數據插入其中。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 對數據進行處理和展示
var employees = data.employees;
var container = document.getElementById('employee-container');
for (var i = 0; i < employees.length; i++) {
var employee = employees[i];
var div = document.createElement('div');
div.innerHTML = '<p>姓名：' + employee.name + '</p>' +
'<p>職位：' + employee.position + '</p>' +
'<p>薪水：' + employee.salary + '</p>';
container.appendChild(div);
}
}
};

上述代碼中，我們首先通過getElementById()方法獲取到一個名為employee-container的容器元素，然后在每次循環中創建一個新的