AJAX（Asynchronous JavaScript and XML）是一種用于在網(wǎng)頁(yè)中進(jìn)行異步數(shù)據(jù)傳輸?shù)募夹g(shù)。傳統(tǒng)上，當(dāng)需要將文件上傳到服務(wù)器時(shí)，需要通過(guò)刷新整個(gè)頁(yè)面或者跳轉(zhuǎn)到新的頁(yè)面來(lái)完成。然而，使用AJAX，我們可以在頁(yè)面不刷新的情況下，異步傳輸文件名到服務(wù)器。本文將介紹如何使用AJAX傳輸文件名以及相關(guān)的代碼示例和解釋。

使用AJAX傳輸文件名的一種常見(jiàn)場(chǎng)景是文件上傳功能。例如，在一個(gè)網(wǎng)站上，用戶可以選擇本地計(jì)算機(jī)上的文件并上傳到服務(wù)器。在用戶選擇文件后，我們可以使用AJAX將文件名傳輸?shù)椒?wù)器進(jìn)行后續(xù)處理，例如保存文件到數(shù)據(jù)庫(kù)或者進(jìn)行文件類(lèi)型檢查。

我們可以使用HTML的<input type="file">元素來(lái)創(chuàng)建一個(gè)文件上傳輸入框。當(dāng)用戶選擇文件后，我們可以通過(guò)JavaScript來(lái)獲取選擇的文件名，并使用AJAX將文件名傳輸?shù)椒?wù)器。以下是一個(gè)簡(jiǎn)單的示例：

<input id="file-input" type="file" />
<button onclick="uploadFile()">上傳</button>
<script>
function uploadFile() {
var file = document.getElementById("file-input").files[0];
var fileName = file.name;
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send("fileName=" + fileName);
}
</script>

在上面的代碼中，當(dāng)用戶點(diǎn)擊“上傳”按鈕時(shí)，JavaScript中的uploadFile函數(shù)被調(diào)用。該函數(shù)首先獲取文件輸入框中選擇的文件，并從中提取文件名。然后，我們創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并使用open方法指定請(qǐng)求的方法、URL和異步選項(xiàng)。接下來(lái)，我們通過(guò)調(diào)用setRequestHeader方法設(shè)置HTTP請(qǐng)求的頭部信息，告訴服務(wù)器請(qǐng)求的數(shù)據(jù)類(lèi)型。在這個(gè)例子中，我們使用了URL編碼的表單數(shù)據(jù)。然后，我們?cè)O(shè)置了onreadystatechange事件處理程序，在請(qǐng)求狀態(tài)變?yōu)?且狀態(tài)碼為200時(shí)，打印出服務(wù)器的響應(yīng)結(jié)果。最后，我們使用send方法將文件名作為參數(shù)發(fā)送到服務(wù)器。

在服務(wù)器端，我們可以使用PHP或其他服務(wù)器端語(yǔ)言來(lái)接收AJAX傳輸?shù)奈募Ｏ旅媸且粋€(gè)簡(jiǎn)單的PHP示例：

<?php
$fileName = $_POST["fileName"];
// 進(jìn)一步處理文件名
?>

在上面的PHP代碼中，我們使用$_POST全局?jǐn)?shù)組來(lái)訪問(wèn)通過(guò)POST方法傳輸?shù)臄?shù)據(jù)。我們可以通過(guò)$_POST["fileName"]來(lái)獲取AJAX傳輸?shù)奈募缓笤龠M(jìn)行進(jìn)一步的處理。

總結(jié)來(lái)說(shuō)，使用AJAX傳輸文件名是一種非常方便和高效的方式，可以實(shí)現(xiàn)在網(wǎng)頁(yè)中異步上傳文件并在服務(wù)器端進(jìn)行進(jìn)一步處理。我們可以使用HTML和JavaScript來(lái)獲取用戶選擇的文件名，并使用AJAX將文件名傳輸?shù)椒?wù)器。在服務(wù)器端，我們可以使用PHP或其他服務(wù)器端語(yǔ)言來(lái)接收AJAX傳輸?shù)奈募⑦M(jìn)行后續(xù)的處理。