AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術，它允許在不加載整個頁面的情況下從服務器異步獲取數據并更新部分頁面內容。而REST API（Representational State Transfer Application Programming Interface）是一種用于構建Web服務的軟件架構風格，它使用HTTP協議進行通信，并使用URL來唯一標識資源。AJAX與REST API是兩種不同的技術，但它們常常一起使用，以實現動態、實時和交互式的Web應用程序。

舉例來說，假設我們正在開發一個在線購物網站。當用戶在產品列表頁面點擊“查看詳情”按鈕時，傳統的方式是使用鏈接將用戶重定向到單獨的產品詳情頁面。然而，這樣操作不僅會導致頁面刷新，還會使用戶體驗變得低效。而使用AJAX和REST API，我們可以在不離開產品列表頁面的情況下，向服務器發送請求并獲取產品的相關數據。

// 使用AJAX和REST API獲取產品詳情數據
function loadProductDetails(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var productDetails = JSON.parse(xhr.responseText);
// 更新頁面上的產品詳情內容
document.getElementById("product-details").innerHTML = productDetails.description;
}
};
xhr.open("GET", "/api/products/" + productId, true);
xhr.send();
}

在上面的代碼中，我們使用了AJAX的核心對象XMLHttpRequest來發送GET請求，請求的URL由REST API提供的服務端點（/api/products/）以及產品ID組成。一旦服務器返回響應，我們使用JSON.parse方法將響應的文本解析為JavaScript對象，并將產品的詳細描述更新到頁面的元素中。通過這種方式，我們可以實現在不離開產品列表頁面的情況下，實時加載和展示產品的詳細信息。

除了獲取數據，AJAX和REST API也可以用于向服務器發送數據并對資源進行更改。繼續以上面的在線購物網站為例，假設用戶點擊“加入購物車”按鈕，我們可以使用AJAX和REST API將產品ID發送到服務器，并將該產品添加到用戶的購物車中。

// 使用AJAX和REST API將產品加入購物車
function addToCart(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("成功將產品添加到購物車！");
}
};
xhr.open("POST", "/api/cart", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = JSON.stringify({ productId: productId });
xhr.send(data);
}

在上述代碼中，我們使用AJAX的POST方法向服務器發送請求，將產品ID作為參數傳遞給REST API的服務端點（/api/cart）。我們還使用setRequestHeader方法設置請求頭，確保服務器能夠正確解析請求的內容類型（application/json）。最后，我們使用JSON.stringify方法將產品ID轉換為JSON字符串，并將其作為請求主體發送給服務器。一旦服務器成功處理了請求，我們可以通知用戶已成功將產品添加到購物車中。

綜上所述，AJAX和REST API是兩種不同的技術，但它們通常一起使用，以實現動態、實時和交互式的Web應用程序。通過異步獲取和更新數據，我們可以改善用戶體驗并提高Web應用程序的性能。通過發送數據并對資源進行更改，我們可以實現各種功能，例如添加到購物車、提交表單等。AJAX與REST API的結合為開發者提供了更多靈活性和選擇，以創建出色的Web應用程序。