AJAX（Asynchronous JavaScript and XML）是一種用于在后臺發送和接收數據的技術，可以實現無需刷新整個頁面而更新部分內容的效果。在實際應用中，我們常需要發送數據并在回調函數中對返回的數據進行處理。本文將介紹如何使用AJAX發送數據給回調函數，并通過舉例說明其用法和效果。

首先，我們來看一個簡單的例子。假設我們有一個表單，包含一個輸入框和一個按鈕。當用戶點擊按鈕時，我們要使用AJAX將輸入框中的內容發送給服務器，并將服務器返回的數據顯示在頁面中。

<pre>html
<form id="myForm" action="/api/submit" method="post">
<input type="text" id="myInput">
<button type="button" onclick="sendData()">提交</button>
</form>
<script>
function sendData() {
var input = document.getElementById("myInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/submit", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById("result").innerHTML = response;
}
};
xhr.send("data=" + encodeURIComponent(input));
}
</script>
<div id="result"></div>

上面的例子中，我們首先使用JavaScript獲取輸入框中的內容，然后創建一個XMLHttpRequest對象，并使用open方法指定請求類型和URL。接下來，我們通過setRequestHeader方法設置請求頭的Content-Type，告訴服務器我們將發送的數據為表單格式。然后，我們定義了一個回調函數，并在其中判斷服務器的響應狀態和返回的數據。最后，我們使用send方法將數據發送給服務器。

在這個例子中，當按鈕被點擊時，發送請求給服務器，并將輸入框的內容作為數據發送過去。服務器收到請求后進行處理，并返回一段文本。當服務器響應成功時，回調函數會被觸發，我們將返回的文本顯示在頁面中的一個div元素中。

除了使用XMLHttpRequest對象，我們還可以使用jQuery來發送數據給回調函數。jQuery是一個流行的JavaScript庫，它提供了更簡潔和便捷的方法來操作DOM和發送AJAX請求。

<pre>html
<form id="myForm" action="/api/submit" method="post">
<input type="text" id="myInput">
<button type="button">提交</button>
</form>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("button").click(function() {
var input = $("#myInput").val();
$.ajax({
url: "/api/submit",
type: "POST",
data: { data: input },
success: function(response) {
$("#result").html(response);
}
});
});
</script>

在這個例子中，我們使用了jQuery的ajax方法來發送數據給回調函數。當按鈕被點擊時，我們獲取輸入框的內容，然后使用ajax方法發送一個POST請求給服務器，并傳遞輸入框的內容作為數據。回調函數中的success屬性指定了請求成功時的處理函數，它會將服務器返回的數據顯示在頁面中的div元素中。

總結起來，無論是使用原生的XMLHttpRequest對象還是使用jQuery的ajax方法，我們都可以通過發送數據給回調函數來實現與服務器的交互。通過這種方式，我們可以動態地更新頁面的內容，提高用戶體驗，并實現更多復雜的功能。