AJAX（Asynchronous JavaScript and XML）是一种在Web开发中用于实现异步通信的技术。通过AJAX，我们可以在不刷新整个页面的情况下与服务器进行数据传输。本文将重点介绍如何使用AJAX传送数据到服务器，并通过举例进行说明。

在Web开发中，经常会遇到需要向服务器发送数据并获取响应的需求。传统的做法是使用表单提交来实现，但是这种方式会导致页面刷新，用户体验较差。而使用AJAX可以在页面保持不刷新的情况下，与服务器进行数据传输。

假设我们有一个电商网站，需要实现一个添加商品到购物车的功能。当用户点击“添加到购物车”按钮时，我们希望能够将该商品的信息发送到服务器，并获取服务器返回的响应。通过AJAX，我们可以通过以下方式实现：

// 定义一个函数，用于向服务器发送数据
function addToCart(product) {
// 创建一个叫做xhr的AJAX对象
var xhr = new XMLHttpRequest();
// 定义发送的数据
var data = "product=" + product;
// 定义服务器URL
var url = "http://example.com/add-to-cart";
// 设置请求方式为POST，并指定服务器URL
xhr.open("POST", url, true);
// 设置请求头信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 定义响应的回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 服务器返回的响应
var response = xhr.responseText;
console.log(response);
}
}
// 发送请求
xhr.send(data);
}
// 当用户点击“添加到购物车”按钮时，调用addToCart函数
document.querySelector("#addToCartBtn").addEventListener("click", function() {
var product = document.querySelector("#productId").value;
addToCart(product);
});

在上述代码中，我们首先定义了一个名为addToCart的函数，用于向服务器发送数据。在函数内部，我们创建了一个XMLHttpRequest对象，该对象用于发送异步请求到服务器。我们通过设置open方法的参数，指定了请求的方式为POST，并指定了服务器的URL。

然后，我们通过setRequestHeader方法，设置了请求头信息，告诉服务器我们发送的是表单数据。

接着，我们定义了一个回调函数xhr.onreadystatechange，用于处理服务器返回的响应。我们通过判断xhr.readyState和xhr.status的值，确定服务器响应成功后的操作。在本例中，我们只是简单地在控制台输出服务器返回的响应。

最后，我们通过send方法发送请求，其中参数为需要发送的数据。在本例中，我们只是将商品信息传递到服务器。

当用户点击“添加到购物车”按钮时，我们获取商品信息，并调用addToCart函数。

以上就是使用AJAX传送数据到服务器的整个过程。通过AJAX，我们实现了在不刷新整个页面的情况下，向服务器发送数据并获取响应的功能。

总结起来，AJAX是一种强大的技术，可以在Web开发中实现异步通信。通过AJAX传送数据到服务器，可以提升用户体验，减少页面刷新。我们可以根据具体需求，合理地运用AJAX来实现各种功能。