在現代網頁開發中，動態加載 JavaScript 文件是一種常見的需求。通過使用 AJAX 技術，我們可以在用戶瀏覽網頁時異步加載 JavaScript 文件，從而提高網頁加載速度和用戶體驗。為了更好地展示加載過程，可以使用進度條顯示 JavaScript 文件加載的進度。本文將介紹如何使用 AJAX 加載 JavaScript 文件并實現一個簡單的進度條效果。

在實際開發中，我們常常需要加載第三方庫或插件的 JavaScript 文件。以加載 jQuery 庫為例，我們可以使用以下代碼來實現異步加載：

function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
// jQuery 腳本加載完成后執行的回調函數
console.log('jQuery 腳本加載完成！');
});

上述代碼中，loadScript 函數接受兩個參數：要加載的 JavaScript 文件的 URL 和加載完成后執行的回調函數。在函數內部，我們使用 document.createElement 創建了一個新的 script 元素，并將其 src 屬性設置為要加載的文件的 URL。在腳本加載完成后，會觸發 onload 事件，我們可以在回調函數中執行進一步的操作。

現在，我們要加入進度條效果。我們可以在加載過程中不斷更新進度條的寬度，從而實現進度的可視化。下面是一個簡單的示例：

// HTML
<div id="progress-bar"></div>
// CSS
#progress-bar {
width: 0%;
height: 10px;
background-color: #f0f0f0;
}
// JavaScript
var progressBar = document.getElementById('progress-bar');
var progress = 0;
var timer = setInterval(function() {
if (progress < 100) {
progress++;
progressBar.style.width = progress + '%';
} else {
clearInterval(timer);
}
}, 10);

上述代碼中，我們在 HTML 中創建了一個 div 元素，將其 id 屬性設置為 "progress-bar"。然后，使用 CSS 設置 div 元素的樣式，將其寬度初始化為 0 并設置背景顏色。接著，在 JavaScript 中定義一個計時器，每 10 毫秒更新一次進度條的寬度，直到進度達到 100%。在實際應用中，我們可以根據加載的 JavaScript 文件大小和進度來動態更新進度條。

最后，我們將 AJAX 加載和進度條效果結合起來：

function loadScript(url, callback, progressCallback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onprogress = function(event) {
if (event.lengthComputable) {
var progress = (event.loaded / event.total) * 100;
progressCallback(progress);
}
};
xhr.onload = function() {
if (xhr.status === 200) {
eval(xhr.responseText);
callback();
} else {
console.error('Failed to load script: ' + url);
}
};
xhr.send();
}
loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
// jQuery 腳本加載完成后執行的回調函數
console.log('jQuery 腳本加載完成！');
}, function(progress) {
// 進度回調函數
progressBar.style.width = progress + '%';
});

在上述代碼中，我們修改了 loadScript 函數，使用 XMLHttpRequest 對象發送異步請求。在請求過程中，我們通過 onprogress 事件監聽器來獲取加載進度，并通過 progressCallback 回調函數實時更新進度條。在腳本加載完成后，我們通過 eval 函數將腳本內容解析并執行，并在 callback 回調函數中執行進一步的操作。如果加載腳本失敗，則會在控制臺輸出錯誤信息。

綜上所述，通過使用 AJAX 加載 JavaScript 文件并結合進度條效果，我們可以實現更好的用戶體驗和網頁性能。無論是加載第三方庫還是自定義腳本，都可以使用類似的方法實現異步加載和可視化的進度展示。希望本文能對你理解和應用 AJAX 加載 JavaScript 文件以及進度條效果有所幫助。