Ajax傳遞數據到JavaScript變量

Ajax（Asynchronous JavaScript And XML）是一種用于在后臺與服務器進行交互的技術。它允許我們在不刷新整個頁面的情況下更新部分頁面內容。其中一個常見的應用是將數據從服務器傳遞給JavaScript變量，在前端頁面上進行展示和操作。本文將介紹如何使用Ajax傳遞數據到JavaScript變量，并通過舉例進一步說明。

使用XMLHttpRequest對象

XMLHttpRequest對象是Ajax的核心。它允許我們在不刷新頁面的情況下與服務器進行通信。要將數據從服務器傳遞給JavaScript變量，我們可以使用XMLHttpRequest對象發送一個HTTP請求，并將返回的結果保存在JavaScript變量中。

var request = new XMLHttpRequest();
request.open('GET', 'data.php', true);
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var data = request.responseText;
// 將返回的數據保存在JavaScript變量data中
// 接下來可以在頁面上使用該變量進行顯示或其他操作
}
};
request.send();

上面的代碼使用了GET方法向服務器發送一個HTTP請求，并將返回的結果保存在JavaScript變量"data"中。我們可以在回調函數中對返回的數據進行處理，例如將其顯示在頁面上。

使用jQuery的Ajax方法

除了使用原生的XMLHttpRequest對象外，我們還可以使用流行的JavaScript庫jQuery來方便地處理Ajax請求。jQuery提供了一個方便的Ajax方法，可以大大簡化代碼。

$.ajax({
url: 'data.php',
method: 'GET',
success: function(data) {
// 將返回的數據保存在JavaScript變量data中
// 接下來可以在頁面上使用該變量進行顯示或其他操作
}
});

上面的代碼使用jQuery的Ajax方法向服務器發送一個GET請求，并將返回的結果保存在JavaScript變量"data"中。我們可以在success回調函數中對返回的數據進行處理。

示例：從服務器獲取JSON數據

下面我們通過一個示例來進一步說明如何使用Ajax將數據傳遞到JavaScript變量中。假設我們的服務器返回的數據格式是JSON，包含了一些商品信息。

HTML代碼：

<div id="products"></div>
<script>
$(document).ready(function() {
$.ajax({
url: 'data.php',
method: 'GET',
dataType: 'json',
success: function(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div class="product">';
html += '<img src="' + data[i].image + '">';
html += '<h2>' + data[i].name + '</h2>';
html += '<p>Price: ' + data[i].price + '</p>';
html += '</div>';
}
$('#products').html(html);
}
});
});
</script>

上面的代碼通過Ajax請求從服務器獲取JSON數據，并將返回的商品信息在頁面上展示出來。我們首先在HTML中創建一個空的