AJAX（Asynchronous JavaScript and XML）是一種基于前端技術的異步通信方式，它可以在不重新加載整個頁面的情況下，與后端進行數據的交互。通過使用AJAX，我們可以實現網頁的動態更新，提高用戶體驗。本文將介紹AJAX的基本原理以及如何使用AJAX來調用后端的action。

在介紹如何使用AJAX調用action之前，我們先來了解一下AJAX的基本工作原理。AJAX通過使用XMLHttpRequest對象來建立與后端的通信連接。它可以發送HTTP請求，并異步地接收后端的響應，而不用刷新整個頁面。這樣一來，我們就可以在用戶與網頁進行交互的同時，動態地更新網頁的內容。

舉個例子來說明AJAX的應用場景。假設我們正在開發一個在線購物網站，用戶可以通過點擊“加入購物車”的按鈕將商品添加到購物車中。在傳統的網頁開發中，當用戶點擊按鈕后，我們需要刷新整個頁面，才能更新購物車中的商品數量。而使用AJAX，我們可以通過后臺的action來實現異步加入購物車的功能，用戶可以在不刷新頁面的情況下更新購物車數量。這樣，用戶可以流暢地瀏覽網頁，大大提升了用戶體驗。

接下來，我們將學習如何使用AJAX調用后端的action。首先，我們需要創建一個XMLHttpRequest對象，可以使用瀏覽器提供的內置構造函數來實現：

var xhr = new XMLHttpRequest();

創建好XMLHttpRequest對象后，我們需要使用open()方法來指定HTTP請求的方法和URL，還可以設置是否使用異步方式發送請求。例如，發送GET請求到指定的action：

xhr.open('GET', '/api/action', true);

在open()方法之后，我們還可以通過setRequestHeader()方法來設置HTTP請求的頭部信息。

調用了open()方法之后，我們可以使用send()方法來發送HTTP請求了。通過傳遞參數來向后端的action發送請求，例如：

xhr.send('param1=value1¶m2=value2');

當后端的action返回響應時，我們可以通過onreadystatechange屬性和readyState屬性來獲取響應的狀態，以及響應的內容。例如，當readyState等于4時，表示請求已完成，而status等于200時，表示請求成功。在請求成功的情況下，我們可以通過responseText屬性來獲取后臺返回的數據。

在下面的例子中，我們將使用AJAX調用一個名為“get_user_info”的后端action，該action會返回用戶的姓名和年齡信息：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var name = response.name;
var age = response.age;
// 顯示用戶的姓名和年齡信息
document.getElementById('user_name').innerHTML = name;
document.getElementById('user_age').innerHTML = age;
}
};
xhr.open('GET', '/api/get_user_info', true);
xhr.send();

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，然后指定了onreadystatechange屬性。當請求狀態發生變化時，該屬性指定的函數會被調用。在函數內部，我們首先判斷請求狀態是否為4，并且狀態碼等于200，表示請求成功。然后，我們解析后臺返回的響應內容，并提取出用戶的姓名和年齡。最后，我們將這些信息顯示在網頁中的指定元素中。

通過以上的例子，我們可以看到，使用AJAX調用后端的action非常方便。我們可以在不刷新整個頁面的情況下，實現動態的數據交互，提升用戶體驗。同時，AJAX還可以幫助我們減少網絡流量，減輕服務器的壓力。