在現代的Web開發中，我們經常會遇到需要通過AJAX請求獲取JSON數據并對其進行篩選和處理的需求。AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過后臺與服務器進行數據交互的技術。而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，廣泛用于表示結構化的數據。

使用AJAX獲取JSON數據并進行篩選，可以實現動態更新網頁內容、提高用戶體驗和減少不必要的網絡流量。例如，假設我們正在開發一個電子商務網站，用戶可以根據不同的篩選條件（如分類、價格區間、品牌等）來搜索商品。當用戶點擊篩選按鈕時，網頁通過AJAX請求向后臺獲取符合條件的商品信息，并通過JSON格式返回。然后，我們可以在前端使用JavaScript來解析JSON數據，篩選出符合條件的商品并在網頁上展示給用戶。

要獲取JSON數據，首先需要創建一個XMLHttpRequest對象，然后指定請求的URL和請求的方法。代碼示例如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", "api/products", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 對返回的JSON數據進行篩選和處理
}
};
xhr.send();

以上代碼中，通過XMLHttpRequest對象的open()方法指定了請求的URL和請求的方法（GET），并傳入了true表示異步請求。然后通過setRequestHeader()方法設置請求頭的Content-Type為application/json。xhr.onreadystatechange屬性指定一個回調函數，當xhr對象的狀態發生變化時（readyState為4表示完成，status為200表示請求成功），執行回調函數進行進一步的處理。

對返回的JSON數據進行篩選和處理是實現篩選功能的核心部分。根據具體需求，我們可以使用JavaScript的數組方法（如filter()、map()、reduce()等）來對JSON數據進行處理。例如，如果我們需要篩選出價格在50到100之間的商品，可以使用filter()方法來篩選：

var filteredProducts = response.products.filter(function(product) {
return product.price >= 50 && product.price <= 100;
});

以上代碼中，response是從服務器返回的JSON數據，products是JSON數據中的一個數組。使用filter()方法對products數組進行篩選，返回一個新的數組filteredProducts，其中只包含價格在50到100之間的商品。

篩選出符合條件的商品后，我們可以將它們展示給用戶。可以使用JavaScript動態生成HTML元素（如div、img等）來展示商品信息。例如，可以創建一個商品列表的容器，并在其中動態生成包含商品信息的HTML元素：

var productList = document.getElementById("product-list");
filteredProducts.forEach(function(product) {
var productItem = document.createElement("div");
productItem.className = "product-item";
var productName = document.createElement("h3");
productName.textContent = product.name;
var productImage = document.createElement("img");
productImage.src = product.image;
var productPrice = document.createElement("p");
productPrice.textContent = "價格：" + product.price;
productItem.appendChild(productName);
productItem.appendChild(productImage);
productItem.appendChild(productPrice);
productList.appendChild(productItem);
});

以上代碼中，使用forEach()方法遍歷filteredProducts數組，為每個商品動態創建一個div元素（類名為"product-item"）。然后創建h3元素用于展示商品名稱，創建img元素用于展示商品圖片，創建p元素用于展示商品價格。最后，將這些元素添加到商品列表的容器中（id為"product-list"）。

通過以上的步驟，我們成功地使用AJAX獲取JSON數據并對其進行篩選和展示。這種技術可以用于各種場景，如搜索引擎的自動補全功能、電影、音樂和游戲的篩選功能等。