AJAX（Asynchronous JavaScript and XML）和Angular是現代Web開發中常用的兩種技術。AJAX是一種用于在后臺向服務器發送請求和接收響應的技術，而Angular則是一種前端框架，用于構建動態的Web應用程序。兩者的結合可以提高Web應用的性能和用戶體驗。

舉例來說，假設我們正在開發一個在線購物網站。當用戶點擊“加入購物車”按鈕時，我們可以使用AJAX發送一個請求到服務器，將選定商品的信息傳遞給后端。后端可以更新購物車中的商品數量，并返回新的購物車總價。而在前端，我們可以使用Angular來動態地更新購物車的顯示，將新的商品數量和總價顯示給用戶。

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var response = JSON.parse(request.responseText);
// 使用Angular更新購物車顯示
$scope.cartItemCount = response.itemCount;
$scope.cartTotalPrice = response.totalPrice;
}
};
request.open("POST", "/addToCart", true);
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify({ productId: 12345, quantity: 1 }));

上述代碼片段展示了如何使用AJAX和Angular來實現購物車功能。通過AJAX，我們向服務器發送了一個POST請求，將選定商品的信息以JSON格式傳遞給后端API。后端處理請求并返回新的購物車信息。在前端，我們使用Angular的$scope對象來保存購物車的商品數量和總價，并在AJAX成功響應后更新這些值。

除了購物車功能，AJAX和Angular還可以一起使用來實現許多其他的動態Web應用。比如，當用戶在搜索框中輸入關鍵字時，我們可以使用AJAX向服務器發送請求，獲取與關鍵字匹配的搜索結果。然后，我們可以使用Angular來動態地更新搜索結果的顯示，以便用戶實時地看到匹配的結果。

$scope.searchResults = [];
$scope.search = function(keyword) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var response = JSON.parse(request.responseText);
// 使用Angular更新搜索結果顯示
$scope.searchResults = response.results;
}
};
request.open("GET", "/search?keyword=" + keyword, true);
request.send();
};

上述代碼片段展示了如何使用AJAX和Angular來實現實時搜索功能。通過調用$scope對象中的search方法，我們可以觸發AJAX請求，將用戶輸入的關鍵字傳遞給后端搜索API。后端處理請求并返回與關鍵字匹配的結果。在前端，我們使用Angular的$scope對象來保存搜索結果，并在AJAX成功響應后更新這些值。

綜上所述，AJAX和Angular是兩種強大的Web開發技術。它們的結合可以實現許多動態Web應用的功能，提升用戶體驗和性能。無論是購物車功能還是實時搜索功能，AJAX和Angular都能夠輕松勝任。無論您是一個Web開發者還是一個前端工程師，掌握AJAX和Angular都將為您的項目帶來無窮的可能性。