jQuery是現代JavaScript編程中不可或缺的工具之一，它可以輕松地處理DOM操作、事件處理和動畫效果，而加入ajax功能后，可以實現頁面與后端進行數據交互，無需刷新頁面。在ajax請求中，請求時間可能比較長，為了優化用戶體驗，我們可以加入進度條，讓用戶知道請求的進展情況。

// 創建進度條元素
var progressBar = $('<div></div>').addClass('progress-bar').attr('role', 'progressbar').appendTo($('.progress'));
// 配置ajax請求
$.ajax({
url: 'example.php',
dataType: 'json',
xhrFields: {
onprogress: function(e) {
if (e.lengthComputable) {
// 計算進度百分比
var percent = (e.loaded / e.total) * 100;
// 更新進度條
progressBar.css('width', percent + '%').attr('aria-valuenow', percent).text(percent.toFixed(0) + '%');
}
}
},
success: function(data) {
// 成功回調函數
},
error: function(jqXHR, textStatus, errorThrown) {
// 失敗回調函數
},
complete: function() {
// 完成回調函數
}
});

上面的代碼首先創建了一個進度條元素，并設置為不可見狀態，然后通過ajax請求的xhrFields屬性中的onprogress選擇器，監聽請求的進度事件。在事件中計算進度百分比，并更新進度條的寬度和百分比文本。最后，我們可以在成功、失敗、完成時分別執行對應的回調函數。

需要注意的是，在使用ajax請求時，我們需要確保請求是異步的，因為同步請求會阻塞瀏覽器，無法進行相關操作。另外，進度條的樣式可以通過CSS自定義，例如設置顏色、寬度等等，以便更好地搭配頁面主題。