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&param2=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还可以帮助我们减少网络流量，减轻服务器的压力。