元素，將其設置一個特定的id，例如weather-info。

html
<div id="weather-info"></div>

接下來，我們使用JavaScript編寫Ajax請求的代碼，以獲取天氣數據。

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/weather-api?city=上海', true); // 替換URL為真實的天氣API接口
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
var data = JSON.parse(xhr.responseText);
var weatherInfo = document.getElementById('weather-info');
weatherInfo.innerHTML = '城市：' + data.city + '<br>' +
'溫度：' + data.temperature + '℃<br>' +
'天氣狀況：' + data.condition;
} else {
console.log('請求錯誤');
}
};
xhr.send();

在上述代碼中，我們使用XMLHttpRequest對象創建了一個Ajax請求，通過調用open方法來指定請求的類型（這里使用GET請求）和URL。onload事件監聽器將在請求成功返回數據后執行。在onload處理函數中，我們首先檢查請求的狀態碼是否正確，然后解析響應數據，并將數據顯示在weather-info標簽中。
通過上述代碼，當用戶在輸入框中輸入城市名稱并點擊查詢按鈕后，Ajax請求將會被發送到服務器，并將返回的天氣數據顯示在網頁上。用戶無需刷新整個頁面，就能夠實時獲取最新的天氣信息。
Ajax的優勢不僅僅體現在天氣預報網站上，還可以應用于許多其他場景。例如，假設我們正在開發一個電子商務網站，用戶可以通過點擊一個按鈕來添加商品到購物車。我們可以將商品的名稱、價格等信息通過Ajax請求發送到服務器并將其顯示在一個購物車的標簽中，從而實現實時更新購物車內容的功能。
總結而言，Ajax是一種強大的網頁開發技術，可以使網頁能夠實時地從服務器獲取數據并在不刷新整個頁面的情況下更新部分內容。通過使用Ajax，我們可以提供更加流暢和用戶友好的網頁體驗。無論是天氣預報網站還是電子商務網站，都可以通過Ajax實現實時更新數據的功能，為用戶帶來更好的體驗。