在 web 開發中，經常會遇到一種需求：根據用戶的選擇，實時更新頁面上的數據。這需要通過與服務器進行交互，以獲取新的數據并將其呈現在頁面上。而使用 Ajax 技術可以實現這一功能，其中一種常見的應用場景就是實現級聯輸出。通過 Ajax，我們可以在用戶選擇某個選項時，自動將與之相關的數據展示出來，從而提升用戶體驗和頁面交互的流暢性。

假設我們有一個城市和國家的級聯選擇框，當用戶選擇某個國家時，我們希望頁面上的城市選擇框能夠自動聯動更新，只顯示與所選國家相關的城市選項。在傳統的開發方式下，我們需要在用戶選擇國家時，刷新整個頁面，從服務器獲取相應數據并重新渲染城市選擇框。而使用 Ajax 技術，我們可以實現無刷新的更新，只更新城市選擇框的部分內容，從而提高頁面的響應速度和用戶體驗。

// HTML 代碼
<select id="country" onchange="getRelatedCities()">
<option value="0">請選擇國家</option>
<option value="1">中國</option>
<option value="2">美國</option>
<option value="3">日本</option>
</select>
<select id="city">
<option value="0">請選擇城市</option>
</select>
// JavaScript 代碼
function getRelatedCities() {
var countryCode = document.getElementById("country").value;
var citySelect = document.getElementById("city");
// 使用 Ajax 發送請求  
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var cities = JSON.parse(xhr.responseText);
// 根據返回的數據更新城市選擇框
updateCitySelect(cities);
}
};
xhr.open("GET", "/get-cities?countryCode=" + countryCode, true);
xhr.send();
}
function updateCitySelect(cities) {
var citySelect = document.getElementById("city");
// 清空原有選項
citySelect.innerHTML = "";
// 添加新的選項
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i].code;
option.innerHTML = cities[i].name;
citySelect.appendChild(option);
}
}

在上面的代碼中，我們通過監聽國家選擇框的 onchange 事件，當用戶選擇國家時，調用 getRelatedCities 函數。此函數中使用了 XMLHttpRequest 對象，通過發送 GET 請求獲取與所選國家有關的城市數據。服務器返回的數據格式可以是 JSON 格式，我們可以通過 JSON.parse 方法將其轉換為 JavaScript 對象。在收到服務器返回的城市數據后，我們調用 updateCitySelect 函數，根據數據更新城市選擇框的內容。

通過使用以上的代碼，我們可以在用戶選擇國家時，動態更新城市選擇框的選項，實現級聯輸出的效果。這樣用戶就可以方便地瀏覽與所選國家相關的城市選項，而不需要刷新整個頁面。這不僅提升了用戶體驗，還減少了網絡流量和服務器負載，提高了應用的性能。

總之，Ajax 技術的運用使得我們能夠實現無刷新的動態頁面更新，為交互性強、實時性要求高的應用提供了更好的解決方案。在級聯輸出的場景中，通過使用 Ajax，我們可以輕松地實現根據用戶選擇的數據，動態更新頁面內容，提升用戶體驗和頁面交互的流暢性。