使用Ajax獲取動態參數是前端開發中非常常見的一個需求，它可以使我們的網頁在不刷新的情況下獲取最新的數據，使用戶的體驗大大提升。在這篇文章中，我們將詳細介紹如何通過Ajax實現獲取動態參數的功能，并用具體的例子進行說明。
假設我們正在開發一個電商網站，我們需要根據用戶選擇的不同分類來獲取對應的商品信息。傳統的做法是在用戶選擇分類后，通過刷新頁面或者跳轉到另一個頁面來獲取對應分類的商品信息，這顯然不是理想的用戶體驗。而通過使用Ajax，我們可以在用戶選擇分類時，動態獲取對應的商品信息，向后端發送請求并獲取數據，然后將數據展示在網頁上。這樣，用戶就可以在頁面上直接看到最新的商品信息，無需刷新頁面或跳轉到其他頁面。
在實現過程中，我們需要使用到JavaScript中的XMLHttpRequest對象，它是瀏覽器提供的用于發起HTTP請求的對象。我們可以通過創建一個XMLHttpRequest對象，設置請求的方法、URL和參數，發送請求并處理后端返回的數據。
下面我們通過一個具體的例子來說明如何實現使用Ajax獲取動態參數的功能。假設我們有一個網頁上顯示了一個分類列表，用戶可以點擊不同的分類來獲取對應的商品信息。當用戶點擊某個分類時，我們需要獲取該分類的ID作為參數，然后通過Ajax發送請求獲取對應的商品數據，并在頁面上展示。
```html
分類列表：
商品列表：
```
以上是一個簡化的HTML代碼，當用戶點擊分類列表中的某一項時，會調用名為`getProductByCategory`的JavaScript函數，并將相應的分類ID作為參數傳入。
接下來我們來編寫`getProductByCategory`函數，該函數需要完成以下幾個步驟：
1. 創建一個XMLHttpRequest對象
2. 設置請求的方法、URL和參數
3. 發送請求
4. 處理后端返回的數據
5. 將商品數據展示在頁面上
下面是相應的JavaScript代碼：
```javascript
function getProductByCategory(categoryId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/products?category=' + categoryId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
var productList = document.getElementById('product-list');
productList.innerHTML = '';
for (var i = 0; i< products.length; i++) {
var li = document.createElement('li');
li.innerText = products[i].name;
productList.appendChild(li);
}
}
};
xhr.send();
}
```
在以上代碼中，我們使用了XMLHttpRequest對象的`open`方法設置請求的方法、URL和參數。由于是GET請求，所以參數是通過URL的查詢字符串進行傳遞的，我們將分類ID作為參數拼接在URL上。后端接收到這個請求后，會根據分類ID返回對應的商品數據。
在`onreadystatechange`事件中，我們首先判斷請求的狀態是否為4（已完成）并且響應的狀態碼是否為200（成功）。如果是的話，就說明請求已經完成，并且后端返回了正確的數據。我們使用`JSON.parse`方法將響應的文本數據轉換為JavaScript對象，然后遍歷這個對象，動態創建`li`元素并將商品名稱填充，最后將`li`元素添加到商品列表中。
通過以上的例子，我們可以看到通過Ajax獲取動態參數的原理和方法，以及如何使用JavaScript中的XMLHttpRequest對象來實現這個功能。通過這種方式，我們可以在不刷新頁面或跳轉的情況下獲取最新的數據，并將數據展示在頁面上，使用戶的體驗得到了很大的提升。在實際開發中，我們可以根據具體的需求進行適當的優化和擴展，以滿足不同的業務場景。
