AJAX是一種用于實現網頁上數據交互的技術，通過AJAX可以在不刷新整個網頁的情況下獲取服務器端的數據。而獲取文件夾中的文件名是一個常見的需求，比如在一個網頁中展示一個文件夾下的所有文件名。本文將介紹如何使用AJAX來獲取文件夾中的文件名，并進行展示。

在開始之前，我們需要明確一點，即在網頁上無法直接獲取文件系統的信息。也就是說，無法通過JavaScript來直接獲取文件名。但是可以通過AJAX來請求服務器端的接口，然后在服務器端獲取文件名并返回給前端。

首先，我們需要創建一個服務器端的接口來獲取文件夾中的文件名。舉例來說，假設我們有一個文件夾"photos"，里面有很多照片文件。我們可以創建一個名為"getFilenames.php"的接口文件，用來獲取"photos"文件夾中的所有文件名：

<?php
$dir = 'photos/';
$files = array_diff(scandir($dir), array('..', '.'));
echo json_encode($files);
?>

上述代碼中，我們使用PHP的scandir函數來獲取指定文件夾中的所有文件名，并使用array_diff函數去掉數組中的"."和".."，然后通過json_encode函數將文件名數組轉換成JSON格式，并返回給AJAX請求。

接下來，在前端HTML頁面中使用AJAX來請求服務器端的接口，并獲取文件名。舉例來說，我們在頁面上有一個<div>元素，用來展示文件名：

<div id="filenames"></div>

接下來，我們可以使用JavaScript代碼來發送AJAX請求，并將返回的文件名展示在<div>元素中。示例代碼如下：

<script>
// 創建XMLHttpRequest對象
var xmlhttp = new XMLHttpRequest();
// 定義回調函數
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 文件名數組
var filenames = JSON.parse(this.responseText);
// 將文件名展示在div中
var div = document.getElementById("filenames");
div.innerHTML = "";
for (var i = 0; i < filenames.length; i++) {
div.innerHTML += "<p>" + filenames[i] + "</p>";
}
}
};
// 發送AJAX請求
xmlhttp.open("GET", "getFilenames.php", true);
xmlhttp.send();
</script>

上述代碼中，我們首先創建了一個XMLHttpRequest對象，用來發送AJAX請求。然后定義了回調函數，當AJAX請求的狀態發生變化時，會自動執行該回調函數。我們在回調函數中獲取服務器返回的文件名數組，并將其展示在<div>元素中，每個文件名使用<p>標簽包裹。

通過上述步驟，我們就可以通過AJAX獲取文件夾中的文件名，并在前端網頁中進行展示了。這種方式可以應用于各種文件夾列表展示的場景，比如圖片庫、文件下載等。

總之，使用AJAX可以很方便地獲取文件夾中的文件名，并在前端網頁中展示。通過服務器端的接口，我們可以實現獲取文件系統中的信息，通過AJAX將數據傳遞給前端，實現動態展示。希望本文對您有所幫助！