AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它能夠在不重新加載整個網頁的情況下，通過異步請求從服務器中獲取數據并將其顯示在網頁上。AJAX的出現極大地改進了用戶體驗，使得網頁加載更加快速、動態和高效。下面將通過幾個例子，來展示AJAX在網頁制作中的作用。

假設我們正在開發一個天氣預報網站。傳統的網頁制作方式是用戶輸入城市名稱，然后提交表單，在服務器端處理數據，并重新加載整個網頁顯示結果。這樣的方式會導致用戶等待時間過長，所以我們決定使用AJAX來改進用戶體驗。

const button = document.querySelector('.search-button');
const input = document.querySelector('.search-input');
const weatherDisplay = document.querySelector('.weather-display');
button.addEventListener('click', function() {
const city = input.value;
const url = 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=' + city;
fetch(url)
.then(response =>response.json())
.then(data =>{
// 使用獲取到的數據更新網頁內容
weatherDisplay.innerText = '當前溫度：' + data.current.temp_c + '℃';
})
.catch(error =>console.error(error));
});

上面的代碼部分使用了JavaScript和AJAX技術。當用戶點擊搜索按鈕時，AJAX會通過fetch函數從服務器獲取天氣數據，并將結果以JSON格式返回。然后，通過更新weatherDisplay元素的innerText屬性，將當前溫度顯示在網頁上。這樣，用戶體驗得到了顯著的提升，不需要等待整個網頁重新加載。

除了改進用戶體驗外，AJAX還可以用于實現更復雜的功能。繼續以天氣預報網站為例，我們可以使用AJAX來實現動態更新的天氣預報圖表。

// 獲取最近7天的天氣數據
fetch('https://api.weatherapi.com/v1/forecast.json?key=YOUR_API_KEY&q=London&days=7')
.then(response =>response.json())
.then(data =>{
const weatherData = data.forecast.forecastday;
const chartData = weatherData.map(day =>({
date: day.date,
temperature: day.day.avgtemp_c
}));
// 使用chartData繪制圖表
drawChart(chartData);
})
.catch(error =>console.error(error));

上述代碼使用了fetch函數從服務器獲取了最近7天的天氣數據。然后，通過對返回數據的處理，我們得到了日期和平均溫度對應的數組chartData。最后，通過drawChart函數，我們將數據用圖表的形式展示在網頁上。由于AJAX的異步特性，即使在數據加載過程中，網頁的其他部分仍然能夠正常運行，不會阻塞用戶的操作。

總之，AJAX在網頁制作中的作用是顯而易見的。它能夠提高用戶體驗，加快網頁加載速度，并且使網頁具備更多的動態和交互性。通過AJAX，我們可以從服務器獲取數據，并將其實時地展示在網頁上，為用戶提供更好的服務。