AJAX（Asynchronous JavaScript and XML）技術是一種無需刷新整個頁面即可向服務器發送和接收數據的方法。在前端開發中，我們經常使用AJAX來實現無刷新更新數據或處理用戶提交的數據。本文將介紹如何使用AJAX提交數據，并通過多個舉例來說明如何接收返回的數據。

在使用AJAX提交數據時，我們通常會借助JavaScript中的XMLHttpRequest對象來與服務器進行通信。下面是一個簡單的例子，演示了如何使用AJAX發送一個GET請求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
console.log(response);
}
};
xhr.send();

上述代碼中，我們創建了一個XMLHttpRequest對象，并使用open方法指定了請求的方法（GET）、URL（"data.php"）和是否為異步請求（true）。然后，我們通過onreadystatechange事件監聽對象的狀態變化。當readyState變為4（即請求已完成）且status為200（即請求成功）時，我們可以通過responseText屬性獲取服務器返回的數據。在這個例子中，我們將返回的數據打印到控制臺，實際應用中我們可以根據需要對返回的數據進行處理。

除了GET請求，我們還可以使用POST方法向服務器提交數據。下面是一個POST請求的例子：

var xhr = new XMLHttpRequest();
xhr.open("POST", "save.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
console.log(response);
}
};
var data = "name=John&age=25";
xhr.send(data);

在這個例子中，我們使用open方法指定了請求的方法（POST）、URL（"save.php"）和是否為異步請求（true）。接下來，我們使用setRequestHeader方法設置請求頭，指定要發送的數據的類型為"application/x-www-form-urlencoded"，這是常見的POST請求數據格式。然后，我們通過send方法將數據發送給服務器。在服務器端可以使用相應的語言（如PHP）來獲取和處理這些數據。

以上示例中，我們僅僅是通過AJAX提交了數據，而在實際應用中往往需要獲取服務器返回的數據。下面是一個例子，演示了如何從服務器接收JSON格式的數據：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response.name);
console.log(response.age);
}
};
xhr.send();

在這個例子中，我們假設服務器返回的數據是一個JSON對象，包含name和age兩個屬性。我們通過JSON.parse方法將返回的數據解析為一個JavaScript對象，并可以通過對象的屬性來獲取對應的值。

以上是關于如何使用AJAX提交數據并接收返回數據的一些例子。通過借助XMLHttpRequest對象，我們可以在前端實現異步請求數據的效果，大大提升了用戶體驗。