AJAX（Asynchronous JavaScript and XML）是一種用于在無需刷新整個頁面的情況下，實現異步加載數據的技術。通過AJAX，我們可以在不中斷用戶當前操作的情況下，向服務器發送請求并獲取數據，然后將數據動態地展示在頁面上。

AJAX提供了多種方法將數據發送到服務器。其中一種常用的方式是使用HTTP的POST或GET方法發送數據。下面我們將通過一些具體的例子來演示如何使用AJAX傳送數據。

1. 使用POST方法傳送數據

// 創建一個AJAX請求
var xhr = new XMLHttpRequest();
// 配置請求方法和URL
xhr.open('POST', 'example.com/api', true);
// 設置請求頭
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 請求完成且成功
console.log(xhr.responseText);
}
}
// 構建發送的數據
var data = {
name: 'John',
age: 25
}
// 將數據轉換為URL編碼格式
var encodedData = Object.keys(data).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
}).join('&');
// 發送請求
xhr.send(encodedData);

2. 使用GET方法傳送數據

// 創建一個AJAX請求
var xhr = new XMLHttpRequest();
// 構建發送的數據
var data = {
name: 'John',
age: 25
}
// 將數據轉換為URL編碼格式
var encodedData = Object.keys(data).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
}).join('&');
// 配置請求方法和URL
xhr.open('GET', 'example.com/api?' + encodedData, true);
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 請求完成且成功
console.log(xhr.responseText);
}
}
// 發送請求
xhr.send();

3. 使用FormData傳送FormData對象

// 創建一個AJAX請求
var xhr = new XMLHttpRequest();
// 創建FormData對象并添加數據
var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);
// 配置請求方法和URL
xhr.open('POST', 'example.com/api', true);
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 請求完成且成功
console.log(xhr.responseText);
}
}
// 發送請求
xhr.send(formData);

通過上述例子，我們可以看到如何使用AJAX傳送數據。無論是使用POST還是GET方法，都可以將數據發送到服務器。使用FormData對象可以方便地傳輸表單數據。使用AJAX傳遞數據可以大大提高用戶體驗，因為頁面無需刷新，同時還能夠在后臺與服務器進行數據交互。