使用 AJAX 將 JSON 串返回是一種在前端開發中常見的技術手段，通過 AJAX（Asynchronous JavaScript and XML）技術，可以實現頁面與服務器之間的異步通信，從而實現數據的動態更新。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于前后端數據的傳輸和解析。本文將介紹 AJAX 返回 JSON 串的基本原理和實踐，以及一些常見的應用場景。
假設我們正在開發一個在線商城的商品評價系統。當用戶點擊某個商品的評價按鈕時，我們希望頁面能夠動態加載該商品的評價信息，并以 JSON 格式返回給前端進行展示。這就需要使用 AJAX 技術來異步請求服務器端的數據，并將返回的 JSON 字符串解析后展示在頁面上。
在前端代碼中，我們可以使用如下的 AJAX 請求函數來獲取服務器端返回的 JSON 數據。

<script>
function loadComments(productId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/comments?productId=' + productId);
xhr.onload = function() {
if (xhr.status === 200) {
var comments = JSON.parse(xhr.responseText);
// 在這里對返回的 JSON 數據進行操作和展示
}
};
xhr.send();
}
</script>

在上述代碼中，我們創建了一個 XMLHttpRequest 對象，使用 GET 方法發送請求到指定的服務器端接口（例如/comments），并將查詢參數productId作為請求的一部分。請求發送成功后，我們可以在onload回調函數中對返回的 JSON 數據進行解析，并將解析后的數據進行展示。
為了更好地說明 AJAX 返回 JSON 串的使用場景，假設我們的商城中有多個商品，每個商品都有多條評價信息，而客戶希望能夠在商品列表頁面上即時地展示每個商品的評價總分。這時我們可以使用 AJAX 技術異步請求并計算每個商品的評價總分，并將結果以 JSON 串的形式返回。
服務器端的代碼可能如下所示：

app.get('/productList', function(req, res) {
var products = [];
// 從數據庫中獲取商品列表信息
for (var i = 0; i < products.length; i++) {
var productId = products[i].id;
// 從數據庫中獲取某個商品的評價信息
var totalScore = 0;
var commentsCount = 0;
// 計算評價總分
// 將評價總分作為 JSON 對象返回給前端
products[i].totalScore = totalScore;
}
res.json(products);
});

在上述的服務器端代碼中，我們首先從數據庫中獲取商品列表信息。然后，為每個商品計算評價總分，并將評價總分作為 JSON 對象添加到商品信息中。最后，使用res.json(products)的方式返回 JSON 串給前端。
在前端頁面中，我們可以通過 AJAX 異步請求獲取商品列表信息，并展示每個商品的評價總分。

<script>
function loadProducts() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/productList');
xhr.onload = function() {
if (xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 在這里操作 products 數組，展示每個商品的評價總分
}
};
xhr.send();
}
</script>

通過以上的例子，我們可以看到 AJAX 返回 JSON 串在前端開發中的重要性和應用場景。無論是動態加載商品評價信息，還是計算商品評價總分，在商城系統中都可以使用 AJAX 技術來與服務器端進行異步通信，并實現動態數據的更新和展示。
總結而言， AJAX 返回 JSON 串是一種常見且實用的前端開發技術，通過它我們可以輕松地實現頁面與服務器端的異步通信，從而在前端頁面上展示動態的數據內容。無論是商城系統還是其他類型的網站應用，都可以通過 AJAX 返回 JSON 串來實現各種功能和交互效果。