AJAX是一種用于在頁面上異步加載數(shù)據(jù)的技術(shù)，它可以幫助我們實(shí)時(shí)獲取文本框輸入的值。當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，我們可以使用AJAX技術(shù)將輸入的值發(fā)送到服務(wù)器，然后服務(wù)器對這些值進(jìn)行處理，并將處理結(jié)果返回給頁面。通過這種方式，我們可以在不刷新整個(gè)頁面的情況下獲取到用戶輸入的值，從而實(shí)現(xiàn)更加優(yōu)化和流暢的用戶體驗(yàn)。

假設(shè)我們有一個(gè)簡單的頁面，其中有一個(gè)文本框用于輸入姓名，并有一個(gè)按鈕用于觸發(fā)發(fā)送姓名到服務(wù)器的操作。當(dāng)用戶在文本框中輸入完畢后，點(diǎn)擊按鈕，頁面使用AJAX技術(shù)將輸入的姓名發(fā)送到服務(wù)器，并將服務(wù)器返回的結(jié)果顯示在頁面上。

<input type="text" id="name" />
<button onclick="sendName()">提交</button>
<script>
function sendName() {
var name = document.getElementById("name").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
alert("服務(wù)器返回的結(jié)果是：" + response);
}
};
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=" + name);
}
</script>

在上面的代碼中，我們首先通過getElementById方法獲取了文本框的值，然后創(chuàng)建了一個(gè)XMLHttpRequest對象。通過onreadystatechange事件監(jiān)聽器，我們可以在服務(wù)器返回結(jié)果后進(jìn)行處理。當(dāng)readyState為4且HTTP狀態(tài)碼為200時(shí)，表示服務(wù)器返回結(jié)果成功，我們可以通過responseText屬性獲取到服務(wù)器返回的結(jié)果。在這個(gè)例子中，我們使用alert方法將結(jié)果顯示在一個(gè)彈出框中，你也可以根據(jù)實(shí)際需求將結(jié)果嵌入頁面中的其他元素中。

除了通過XMLHttpRequest對象發(fā)送數(shù)據(jù)到服務(wù)器外，我們還可以使用jQuery庫來簡化AJAX操作的代碼。jQuery提供了一個(gè)名為$.ajax的方法可以方便地發(fā)送異步HTTP請求，同時(shí)支持多種數(shù)據(jù)格式的處理。

<input type="text" id="name" />
<button onclick="sendName()">提交</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function sendName() {
var name = $("#name").val();
$.ajax({
url: "server.php",
type: "POST",
data: { name: name },
success: function(response) {
alert("服務(wù)器返回的結(jié)果是：" + response);
}
});
}
</script>

在這個(gè)例子中，我們首先引入了jQuery庫，并使用了$()函數(shù)來獲取文本框的值。然后，我們調(diào)用$.ajax方法發(fā)送異步請求。通過指定url、type和data參數(shù)，我們可以實(shí)現(xiàn)與上面的純JavaScript代碼相同的功能。在success回調(diào)函數(shù)中，我們同樣通過alert方法顯示服務(wù)器返回的結(jié)果。

通過使用AJAX技術(shù)獲取文本框輸入的值，我們可以實(shí)現(xiàn)實(shí)時(shí)的數(shù)據(jù)交互和更好的用戶體驗(yàn)。上面的例子只是AJAX的一個(gè)入門示例，你可以根據(jù)實(shí)際項(xiàng)目需求進(jìn)行更復(fù)雜的操作。希望這篇文章對你理解AJAX獲取文本框輸入的值有所幫助。