AJAX（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術，它可以在不重載整個網頁的情況下，通過與服務器異步通信獲取數據并更新部分頁面內容。在網頁開發中，我們經常遇到需要加載PDF文件的場景，本文將介紹如何使用AJAX和文件流來加載PDF文件。

使用AJAX加載PDF文件的一種常見場景是當用戶在一個網站上點擊鏈接時，需要在網頁上顯示PDF文檔。傳統的做法是這樣的：當用戶點擊鏈接時，服務器返回一個帶有PDF文件鏈接的頁面，用戶再次點擊鏈接，網頁會重新加載并顯示PDF文件。這種方式效率低下且用戶體驗差。而使用AJAX加載PDF文件，可以實現無需刷新頁面就能顯示文檔，提高用戶體驗。

下面是一個使用AJAX和文件流加載PDF文件的示例代碼：

// HTML代碼點擊加載PDF文件
// JavaScript代碼
function loadPDF() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.pdf", true);
xhr.responseType = "blob";
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([xhr.response], {type: "application/pdf"});
var url = URL.createObjectURL(blob);
var iframe = document.createElement('embed');
iframe.setAttribute('src', url);
iframe.setAttribute('type', 'application/pdf');
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '600px');
document.getElementById("pdfContainer").appendChild(iframe);
}
};
xhr.send();
}

在上面的示例代碼中，首先創建了一個XMLHttpRequest對象xhr，然后調用open方法指定請求的URL和請求方式（GET），true表示發起異步請求。接下來，設置xhr的responseType為blob，表示我們期望得到一個二進制的響應。然后，通過定義xhr.onload事件處理函數來處理請求完成后的邏輯。如果請求成功，服務器會返回一個blob對象作為響應，我們需要將其轉換成URL對象，然后創建一個嵌入的iframe元素，設置其src為URL對象的URL，type為application/pdf，以及適當的寬度和高度。最后，將iframe元素添加到頁面中的指定容器內即可。

此時，用戶只需要點擊頁面中的按鈕，即可動態加載并顯示PDF文件。這種方式避免了頁面的刷新，大大提高了用戶體驗。

除了上述示例中的點擊按鈕觸發加載，AJAX和文件流加載PDF文件還可以應用于其他場景。比如，在一個在線文檔編輯器中，用戶可以上傳PDF文件進行編輯，通過AJAX和文件流的方式加載PDF文件，可以實現上傳后即時顯示在頁面上，方便用戶進行編輯操作。

總之，使用AJAX和文件流加載PDF文件是一種高效且用戶友好的方式。通過異步通信和動態加載，可以避免頁面的刷新并立即顯示所需的文檔，提高用戶體驗。無論是顯示閱讀PDF文件，還是在在線編輯器中加載PDF，這種基于文件流的AJAX方式都能生動地展示出其優勢。