AJAX (Asynchronous JavaScript and XML) 是一種用于在不刷新整個網頁的情況下與服務器進行數據交互的技術。在Web開發中，使用AJAX可以實現實時的數據更新和用戶友好的交互體驗。

在使用AJAX進行數據傳遞時，HTML與服務器之間的通信是通過HTTP請求和響應進行的。通過在AJAX請求中附加參數，我們可以向服務器傳遞所需的數據，并獲取相應的結果。

通過在AJAX請求中傳遞參數，我們可以方便地完成各種任務，例如：實時搜索、表單驗證、動態加載內容等。

傳遞參數的基本原理

在AJAX中，我們可以使用GET或POST方法將參數傳遞給服務器。GET方法將參數附加到URL的末尾，而POST方法將參數放在請求的消息主體中。

例如，我們有一個包含用戶ID和用戶名的表單，想要將這些信息傳遞給服務器進行處理：

$.ajax({
url: "example.com/update",
type: "POST",
data: {
userId: 123,
userName: "John"
},
success: function(response) {
// 處理服務器返回的響應
}
});

在上述示例中，我們使用了jQuery庫的ajax函數來發送一個POST請求。在data參數中，我們將userId和userName作為對象傳遞給服務器。

動態加載內容

通過AJAX傳遞參數，我們可以實現動態加載內容。例如，在一個在線商城網站上，當用戶選擇某個分類時，我們可以使用AJAX來加載該分類下的商品列表，而無需刷新整個頁面：

$.ajax({
url: "example.com/products",
type: "GET",
data: {
category: "electronics"
},
success: function(response) {
// 將商品列表顯示在頁面上
}
});

在上述示例中，我們向服務器發送一個GET請求，其中包含了category參數的值為"electronics"。服務器將返回與該分類相關的商品列表，并由AJAX成功回調函數處理響應，將商品列表顯示在頁面上。

實時搜索

另一個常見的應用是通過AJAX實現實時搜索功能。當用戶在搜索框中輸入關鍵詞時，我們可以通過AJAX向服務器發送請求，并將搜索結果實時顯示在頁面上：

$("input[name='search']").on("keyup", function() {
var keyword = $(this).val();
$.ajax({
url: "example.com/search",
type: "GET",
data: {
keyword: keyword
},
success: function(response) {
// 顯示搜索結果
}
});
});

上述示例中，我們使用jQuery庫的on方法監聽搜索框的鍵盤輸入事件。每次用戶輸入時，我們將關鍵詞作為參數傳遞給服務器。服務器根據關鍵詞返回相應的搜索結果，AJAX成功回調函數將搜索結果顯示在頁面上。

總結

通過使用AJAX在HTML和服務器之間傳遞參數，我們可以實現各種有趣的功能，例如動態加載內容和實時搜索。這使得Web應用程序更加靈活和用戶友好。

需要注意的是，參數的傳遞方式取決于服務器端的處理方式。開發者需要根據具體的需求和服務器端的接口規范來選擇合適的參數傳遞方式。