AJAX（Asynchronous JavaScript and XML）是一種用于在前端和后端之間進行異步通信的技術。它允許我們在不刷新整個頁面的情況下，通過發送HTTP請求來獲取或發送數據。在本文中，我們將學習如何使用AJAX來傳遞input標簽中的值。

假設我們有一個簡單的網頁，其中包含一個input元素和一個button元素。當用戶在input中鍵入一些文本之后，點擊按鈕時，我們希望通過AJAX將輸入的值發送給后端進行處理，然后將處理后的結果返回并顯示在頁面上。

<input type="text" id="inputText" />
<button onclick="sendData()">發送數據</button>
<p id="result" style="display: none;"></p>

在上面的代碼中，我們設置了一個id為"inputText"的input元素，一個點擊時調用sendData函數的button元素，以及一個id為"result"的隱藏p元素，用于顯示處理后的結果。

首先，我們需要編寫一個JavaScript函數來獲取input元素中的值，并通過AJAX發送給后端。以下是一個簡單示例：

function sendData() {
var input = document.getElementById('inputText').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('result').innerHTML = xhr.responseText;
document.getElementById('result').style.display = 'block';
}
};
xhr.open('POST', '/backend', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('input=' + input);
}

在這段代碼中，我們首先使用document.getElementById('inputText').value來獲取input元素中的值，并將其存儲在input變量中。然后，我們創建了一個XMLHttpRequest對象，它用于發送HTTP請求。當請求狀態發生變化時，我們使用onreadystatechange事件處理程序來處理響應。

在onreadystatechange事件處理程序中，我們首先檢查請求狀態是否為4（請求已完成）且狀態碼為200（成功）。如果滿足這兩個條件，我們將后端返回的值設置為"result"元素的innerHTML，并將其顯示出來。

接下來，我們使用xhr.open('POST', '/backend', true)來設置請求的類型、URL和異步標志。在此示例中，我們假設后端的URL為/backend，并采用POST請求類型。

最后，我們使用xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')來設置請求的Content-type頭，以確保服務器能夠正確解析我們發送的數據。

最后，我們使用xhr.send('input=' + input)發送請求。注意，我們在發送的數據中使用了input變量的值。

當我們點擊按鈕時，sendData函數將會被調用。它將獲取input元素的值，并通過AJAX將其發送給后端。一旦后端處理完數據并返回響應，我們將在頁面上顯示處理后的結果。

使用AJAX傳遞input標簽中的值是一種很常見的技術，在實際開發中非常有用。它使我們能夠在不刷新整個頁面的情況下，實現前后端之間的實時數據交互。希望本文能夠幫助你理解并掌握這一技術。