在現代網頁應用中，實現動態交互是非常常見的需求。一個常用的技術是使用 Ajax（Asynchronous JavaScript and XML）進行異步數據交互。Ajax 可以在不刷新整個頁面的情況下，異步加載數據和更新網頁內容，給用戶帶來更好的交互體驗。然而，當用戶提交表單或者進行其他操作時，可能會有一些網絡延遲，導致用戶等待的時間過長。為了提供更好的用戶體驗，我們可以在提交時增加“加載中”的提示，讓用戶知道系統正在處理請求。本文將探討如何使用 Ajax 在提交時增加“加載中”效果。

在實現“加載中”效果之前，我們需要先了解基本的 Ajax 工作原理。Ajax 是基于瀏覽器提供的 XMLHttpRequest 對象進行數據交互的。通過創建一個 XMLHttpRequest 對象，我們可以發送各種類型的請求，并處理服務器返回的響應。當我們收到服務器響應后，可以根據需要更新網頁內容，無需刷新整個頁面。

在一個場景中，例如用戶點擊了一個按鈕，觸發了一個 Ajax 請求，并希望顯示“加載中”的效果。我們可以在點擊按鈕時，首先獲取到用于顯示“加載中”的區域的 DOM 元素。然后，通過添加一個新的 DOM 元素或者修改已有的 DOM 元素，顯示“加載中”的提示信息。接著，我們使用 XMLHttpRequest 對象發送請求到服務器，并在收到響應后，更新頁面或者處理其他邏輯。

// HTML
<button id="submitBtn">提交</button>
<div id="loadingDiv"></div>
// JavaScript
var submitBtn = document.getElementById('submitBtn');
var loadingDiv = document.getElementById('loadingDiv');
submitBtn.addEventListener('click', function() {
// 顯示“加載中”的提示
loadingDiv.innerHTML = '加載中...';
// 創建并配置 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit', true);
// 發送請求
xhr.send();
// 監聽服務器響應
xhr.onload = function() {
if (xhr.status === 200) {
// 處理服務器響應
loadingDiv.innerHTML = '提交成功';
} else {
loadingDiv.innerHTML = '提交失敗';
}
};
});

上述代碼中，我們首先在 HTML 中定義了一個按鈕和一個用于顯示“加載中”的區域的 div 元素。在 JavaScript 中，我們獲取到了按鈕和 div 元素的引用，并使用 addEventListener 方法為按鈕添加了一個點擊事件的監聽器。

在點擊事件的監聽器中，我們首先使用 innerHTML 屬性將加載中的提示信息顯示在 div 元素中。接著，創建了一個 XMLHttpRequest 對象，并配置了請求的方法和 URL。最后，我們發送了請求，并監聽 XMLHttpRequest 對象的 onload 事件。如果服務器響應的狀態碼為 200，表示請求成功，我們則更新 div 元素的內容為“提交成功”。否則，更新為“提交失敗”。

通過以上方式，我們成功地實現了在提交時增加“加載中”效果的功能。無論是提交表單還是進行其他操作，用戶都能夠清楚地知道系統正在處理請求，提高了用戶體驗。

需要注意的是，以上代碼只是一個簡單的示例，實際使用時可能還需要對發送的請求參數進行處理，以及處理其他的業務邏輯。另外，為了更好的用戶體驗，我們可以使用 CSS 樣式和動畫效果美化“加載中”的顯示。

總之，通過使用 Ajax 在提交時增加“加載中”效果，我們可以提升網頁應用的用戶體驗。用戶不再無所適從，而是得到了明確的反饋，知道系統正在處理他們的請求。這種改進不僅能夠提高用戶滿意度，還能夠提高網站的可用性和效率。