Ajax（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交互的技術。它能夠使網頁在不刷新的情況下更新部分內容，提供了更好的用戶體驗。在網頁開發中，我們經常需要通過Ajax向服務器發送數據，并獲取服務器返回的數據。本文將著重介紹如何通過Ajax發送框中的數據，并展示一些常見的示例。

使用Ajax發送框中的數據，首先需要確定數據要發送到的目標地址。這個目標地址可以是服務器上的一個處理請求的頁面，也可以是一個API接口。下面是一個示例，通過Ajax向服務器發送用戶名和密碼，進行登錄驗證：

// HTML代碼
<form id="loginForm">
<input type="text" id="username" name="username" placeholder="用戶名">
<input type="password" id="password" name="password" placeholder="密碼">
<button type="submit">登錄</button>
</form>
// JavaScript代碼
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send('username=' + username + '&password=' + password);
});

上述示例中，我們首先通過JavaScript獲取到了用戶名和密碼的輸入值。然后創建了一個XMLHttpRequest對象，并使用open方法指定了請求的方法、發送的目標地址以及是否使用異步方式。接下來，我們使用setRequestHeader方法設置了請求頭部的Content-Type，它指定了我們發送的數據類型為表單數據。最后，通過send方法發送了具體的請求數據，即將用戶名和密碼以字符串形式拼接在URL的參數中。當服務器返回響應時，我們在onreadystatechange方法中捕獲并處理相關數據。

除了發送表單數據，我們也可以通過Ajax發送其他類型的數據，例如JSON數據。假設我們有一個框，用戶可以輸入一段文本，并在按下回車鍵后使用Ajax將這段文本發送給服務器，進行存儲。

// HTML代碼
<input type="text" id="textInput">
// JavaScript代碼
document.getElementById('textInput').addEventListener('keyup', function(event) {
if (event.keyCode === 13) { // 回車鍵的keyCode為13
var text = this.value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save-text', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify({ text: text }));
}
});

在上述示例中，我們通過addEventListener方法監聽了文本輸入框的keyup事件，當用戶按下回車鍵時，獲取到文本輸入框的值，并將其封裝成一個JSON對象。然后創建了一個XMLHttpRequest對象，并設置請求頭部的Content-Type為application/json，表示我們發送的數據類型為JSON數據。最后，通過send方法將JSON數據發送給服務器。當服務器返回響應時，我們在onreadystatechange方法中捕獲并處理相關數據。

通過上述示例，我們可以看到通過Ajax發送框中的數據可以實現各種功能。無論是表單數據還是其他類型的數據，Ajax都能夠滿足我們的需求。使用Ajax不僅可以提升用戶的體驗，還可以減輕服務器的負擔，增加網頁的響應速度。希望本文對你理解和運用Ajax發送框數據有所幫助。