AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行數據交換而不干擾現有頁面的技術。在Web應用程序中，我們經常需要從服務器獲取多個屬性值。本文將介紹如何使用AJAX在前端頁面中查找多個屬性值。

假設我們有一個名為"products.json"的JSON文件，其中包含了一些產品的信息，包括名稱、價格和庫存情況。我們想要通過AJAX從這個文件中查找某個產品的價格和庫存。

$.ajax({
url: "products.json",
method: "GET",
dataType: "json",
success: function(data){
var productName = "iPhone X";
var product = data.find(function(item){
return item.name === productName;
});
if(product){
var price = product.price;
var stock = product.stock;
console.log("產品：" + productName);
console.log("價格：" + price);
console.log("庫存：" + stock);
}
else{
console.log("未找到該產品");
}
},
error: function(){
console.log("獲取產品信息失敗");
}
});

在上面的代碼中，我們通過AJAX從"products.json"文件中獲取了數據。然后，我們使用Array的find方法（ES6新增）查找名稱為"iPhone X"的產品。如果找到了這個產品，我們就可以獲取它的價格和庫存。

在實際開發中，我們可能需要根據多個屬性值來查找產品。比如，我們想要查找價格在1000到2000之間且庫存大于0的所有產品。為了實現這個功能，我們可以使用Array的filter方法代替find方法。

$.ajax({
url: "products.json",
method: "GET",
dataType: "json",
success: function(data){
var products = data.filter(function(item){
return item.price >= 1000 && item.price<= 2000 && item.stock >0;
});
if(products.length >0){
products.forEach(function(product){
console.log("產品：" + product.name);
console.log("價格：" + product.price);
console.log("庫存：" + product.stock);
});
}
else{
console.log("未找到符合條件的產品");
}
},
error: function(){
console.log("獲取產品信息失敗");
}
});

在上述代碼中，我們使用Array的filter方法篩選出價格在1000到2000之間且庫存大于0的產品。如果存在符合條件的產品，我們將遍歷它們并輸出相關信息；否則，我們會顯示一條未找到產品的消息。

AJAX的強大之處在于它可以與服務器進行異步通信，無需刷新整個頁面。通過使用AJAX技術，我們可以更高效地查找多個屬性值，使用戶在進行復雜查詢時獲得更好的體驗。