在現代網頁開發中，經常需要使用AJAX技術來實現頁面的動態更新和與服務器的交互。一個常見的應用場景是修改密碼功能，通過彈出一個對話框，讓用戶輸入舊密碼和新密碼，并通過AJAX發送請求到服務器端來修改密碼。

舉個例子，假設我們有一個電子商務網站，用戶登錄后可以在個人中心修改密碼。當用戶點擊修改密碼按鈕時，會彈出一個對話框，其中包含了舊密碼和新密碼的輸入框，以及一個確認修改按鈕。用戶輸入完畢后，點擊確認修改按鈕，系統會將用戶輸入的舊密碼和新密碼通過AJAX發送到服務器端，服務器驗證舊密碼的正確性后，將新密碼更新到數據庫中。

下面是修改密碼彈出框的代碼：

function changePassword() {
let passwordForm = document.createElement('form');
passwordForm.innerHTML = `舊密碼:
新密碼:
確認修改`;
document.body.appendChild(passwordForm);
}

在changePassword函數中，我們首先創建一個form元素，然后使用innerHTML屬性將form的HTML代碼設置為包含了舊密碼和新密碼的輸入框以及確認修改按鈕的代碼。然后，我們使用appendChild方法將form元素添加到文檔的body元素中，這樣就實現了彈出修改密碼的對話框。

當用戶輸入完畢后，點擊確認修改按鈕，系統會調用submitChangePassword函數：

function submitChangePassword() {
let oldPassword = document.getElementById('oldPassword').value;
let newPassword = document.getElementById('newPassword').value;
let xhr = new XMLHttpRequest();
xhr.open("POST", "/changePassword", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
if (response.success) {
alert("密碼修改成功！");
} else {
alert("密碼修改失敗，請檢查舊密碼是否輸入正確。");
}
}
};
xhr.send(JSON.stringify({ oldPassword: oldPassword, newPassword: newPassword }));
}

在submitChangePassword函數中，我們首先通過getElementById方法獲取到舊密碼和新密碼的輸入框的值。然后，我們創建一個XMLHttpRequest對象，設置請求的方法是POST，URL是"/changePassword"（這是服務器端的處理修改密碼請求的接口），并將請求的內容類型設置為"application/json;charset=UTF-8"。接著，我們監聽XMLHttpRequest對象的onreadystatechange事件，當readyState變為4（即響應完成）且status為200（即響應成功）時，表示修改密碼請求已經成功返回。我們將響應的文本解析為JSON對象，根據返回的成功屬性來判斷密碼是否修改成功，并彈出相應的提示框。

通過以上代碼，我們實現了一個使用AJAX技術修改密碼的功能。用戶在彈出的對話框中輸入舊密碼和新密碼后，點擊確認修改按鈕，系統會通過AJAX將密碼修改請求發送給服務器端，服務器端驗證密碼的正確性并將新密碼更新到數據庫中，最后在前端彈出密碼修改成功或失敗的提示框。