Ajax是一種基于JavaScript和XML的異步通信技術，它可以在不刷新整個頁面的情況下更新網頁內容。天氣信息是我們日常生活中經常關注的內容之一，獲取所有城市的天氣信息通常需要發送多個請求并加載多個頁面，在沒有Ajax技術之前，這會導致網頁加載緩慢，用戶體驗不佳。然而，通過使用Ajax，我們可以輕松地獲取所有城市的天氣信息，并實時地將其展示在網頁上。本文將介紹如何使用Ajax獲取所有城市的天氣，以及展示一些示例。

首先，我們需要一個包含所有城市名稱和對應天氣網頁鏈接的數據源。這可以是一個JSON文件，也可以是一個后端API提供的數據。假設我們的數據源是一個JSON文件，其中包含一個包含所有城市的數組，每個城市對象包含城市名稱和對應的天氣網頁鏈接。

[
{
"city": "北京",
"link": "http://weather.com.cn/beijing.shtml"
},
{
"city": "上海",
"link": "http://weather.com.cn/shanghai.shtml"
},
...
]

接下來，我們需要使用Ajax發送請求，獲取每個城市的天氣信息。我們可以使用原生的JavaScript的XHR對象，也可以使用jQuery這樣的第三方庫來簡化操作。這里我們使用jQuery來演示。首先，在頁面的標簽中引入jQuery庫：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，我們可以編寫JavaScript代碼來使用Ajax獲取所有城市的天氣信息。首先，我們要使用$.getJSON()方法加載JSON文件：

$.getJSON('city_weather.json', function(data) {
// 處理數據
});

接著，我們可以在回調函數里遍歷所有城市對象，并使用$.ajax()方法獲取每個城市的天氣網頁內容：

$.each(data, function(index, city) {
$.ajax({
url: city.link,
success: function(weatherHTML) {
// 處理天氣網頁內容
}
});
});

在每次獲取天氣網頁內容成功后，我們可以解析HTML并提取出需要的天氣信息。以北京為例，我們可以獲取到類似下面這樣的HTML片段：

<div class="tem"...>
<span>-1℃</span>
<span>/</span>
<span>12℃</span>
</div>

從上面的HTML片段中，我們可以提取出當前溫度和最高最低溫度。我們可以使用jQuery選擇器來解析HTML：

var currentTemp = $(weatherHTML).find('.tem span:first').text();
var maxTemp = $(weatherHTML).find('.tem span:last').text();

最后，我們可以將得到的天氣信息動態地顯示在網頁上。我們可以使用JavaScript來創建DOM元素，并將天氣信息插入到頁面的指定位置。以北京為例，我們可以創建一個

var cityWeather = $('<div>').addClass('city-weather');
cityWeather.append($('<span>').text('當前溫度：' + currentTemp));
cityWeather.append($('<span>').text('最高最低溫度：' + maxTemp));
$('.weather-container').append(cityWeather);