AJAX（Asynchronous JavaScript And XML）是一种在Web应用程序中使用的技术，它允许在不刷新整个页面的情况下向服务器发送和接收数据。DOM（Document Object Model）是一种表示HTML文档结构的方式，它允许通过JavaScript来操作和改变HTML元素。尽管两者都是用于处理Web页面的技术，但它们有着不同的作用和用途。

首先，AJAX主要用于向服务器发送请求并接收响应，而DOM用于操作和改变HTML元素。举一个例子来说明，假设我们有一个Web应用程序用于显示实时股票行情。使用AJAX，我们可以通过定时向服务器发送请求来获取最新的股票价格数据，然后将数据用DOM操作更新到Web页面上的相应元素中。这样，用户无需刷新整个页面，就能实时获取最新的股票价格。

// AJAX 请求示例
function getStockPrice() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.stock.com/price', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var price = xhr.responseText;
updateStockPrice(price); // 调用 DOM 操作方法更新价格
}
};
xhr.send();
}
// DOM 操作示例
function updateStockPrice(price) {
var priceElement = document.getElementById('stock-price');
priceElement.innerHTML = price;
}

其次，AJAX是一种异步技术，可以在后台发送和接收数据，而DOM是一种同步技术，需要等待JavaScript执行完后再进行操作。再举一个例子，假设我们有一个Web表单，当用户填写完表单后，我们需要通过AJAX将数据发送到服务器进行处理，并根据服务器的响应更新页面上的某个元素。使用AJAX，我们可以在后台发送表单数据，不会中断用户的操作。而在DOM操作中，我们需要等待JavaScript执行完后再对页面元素进行修改，这会导致用户在等待期间无法进行其他操作。

// AJAX 表单提交示例
var form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止页面刷新
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
updateStatus(response); // 调用 DOM 操作方法更新状态
}
};
xhr.send(data);
});
// DOM 操作示例
function updateStatus(response) {
var statusElement = document.getElementById('status');
statusElement.textContent = response;
}

综上所述，AJAX和DOM是两种在Web开发中常用的技术，虽然它们有着不同的作用和用途，但在实际开发中经常需要结合使用。AJAX用于发送和接收数据，而DOM用于操作和改变HTML元素。通过合理运用这两种技术，我们可以创建出动态、实时和用户友好的Web应用程序。