在進行前端開發中，當使用Ajax技術與后臺進行數據交互時，有時候需要在請求發送期間給用戶提供一個遮罩層，以防止用戶重復操作或者顯示請求正在進行的信息。本文將討論如何在Ajax執行時添加遮罩層，并在請求完成后關閉遮罩層。
對于一個常見的場景，比如在網頁上點擊一個按鈕，觸發Ajax請求向服務器端發送數據。在此期間，我們希望能夠禁用按鈕，避免用戶多次點擊。同時，我們需要添加一個加載中的提示信息，以告知用戶請求正在進行中。這時，可以通過動態添加一個遮罩層來實現。
首先，我們可以使用HTML和CSS創建一個遮罩層的基本樣式。例如：

<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.overlay .loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>

接下來，在Ajax的請求發送之前，我們可以通過jQuery來動態添加遮罩層。例如：

$(document).ajaxStart(function(){
var $overlay = $('<div class="overlay"></div>');
var $loading = $('<div class="loading">Loading...</div>');
$overlay.append($loading);
$('body').append($overlay);
$overlay.show();
});

在這段代碼中，我們使用ajaxStart事件來監聽Ajax請求的開始。在事件處理函數中，我們先創建一個遮罩層的元素，并將加載中的提示信息放入其中。最后，將遮罩層添加到body元素中，并顯示出來。
當Ajax請求完成后，我們將通過ajaxStop事件來關閉遮罩層。例如：

$(document).ajaxStop(function(){
$('.overlay').remove();
});

在這段代碼中，我們使用ajaxStop事件來監聽Ajax請求的結束。在事件處理函數中，我們通過選擇器選中遮罩層的元素，并將其從DOM中移除，以達到關閉遮罩層的效果。
通過添加以上的代碼，我們就完成了在Ajax執行時添加遮罩層并在請求完成后關閉遮罩層的操作。當用戶點擊按鈕觸發Ajax請求時，屏幕將會出現一個遮罩層，并顯示加載中的提示信息。在請求完成后，遮罩層會自動關閉。
舉個例子來說明以上代碼的應用。假設我們正在開發一個圖書館管理系統，我們需要在用戶點擊借書按鈕后，向服務器發送Ajax請求，進而將該書籍的庫存信息更新。在請求發送期間，我們希望禁用借書按鈕，并顯示一個加載中的提示。當請求完成后，遮罩層將會自動關閉，用戶可以繼續進行其他操作。
在實際應用中，我們可以根據具體的需求對遮罩層進行個性化的定制，比如更改遮罩層的顏色、加載中提示信息等。同時，我們也可以通過添加一些動畫效果來提升用戶體驗。
總之，通過在Ajax執行時添加遮罩層并在請求完成后關閉遮罩層，我們可以在前端開發中提供更好的用戶體驗，防止用戶重復點擊、顯示請求進行中的信息。希望本文的內容能夠幫助讀者們更好地理解和應用這個技術。