AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的前端技術。它通過異步請求與后端服務器進行通信，實現頁面的無刷新更新。前端和后端在使用AJAX時，需要按照不同的方式來編寫代碼。前端主要負責發送請求、處理響應和更新頁面，而后端負責接收請求、處理數據和返回響應。本文將通過舉例說明，詳細介紹前后端在使用AJAX時的編寫方式。

前端編寫

前端使用AJAX時，需要通過JavaScript發送異步請求，處理服務器返回的數據，并將數據更新到頁面上。下面的例子展示了前端如何使用AJAX來獲取后端返回的數據并將其顯示在頁面上：

function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);  // 發送GET請求到后端的/api/data接口
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);  // 解析服務器返回的JSON數據
updatePage(data);  // 更新頁面
}
};
xhr.send();  // 發送請求
}
function updatePage(data) {
var output = '';
for (var i = 0; i< data.length; i++) {
output += '
' + data[i] + '
';  // 拼接數據并創建
元素
}
document.getElementById('output').innerHTML = output;  // 更新頁面
}

在上面的例子中，當調用`getData()`函數時，前端會發送一個GET請求到后端的`/api/data`接口。當服務器響應該請求時，前端會解析返回的JSON數據，并調用`updatePage()`函數將數據更新到頁面上。

后端編寫

后端在使用AJAX時，需要接收前端發送的請求，處理請求的數據并返回響應。下面的例子展示了后端如何使用Node.js和Express框架來處理前端發送的AJAX請求：

// 后端代碼（使用Node.js和Express框架）
const express = require('express');
const app = express();
app.get('/api/data', (req, res) =>{
// 處理請求，獲取數據
var data = [1, 2, 3, 4, 5];
// 返回響應
res.json(data);
});
app.listen(3000, () =>{
console.log('Server started on port 3000');
});

在上面的例子中，后端使用Node.js和Express框架創建了一個服務器。當前端發送GET請求到`/api/data`接口時，后端會處理請求并返回一個包含數據的JSON響應。這個例子中，后端簡單地返回了一個包含數字1到5的數組。

通過上述例子，我們可以看出，前端和后端在使用AJAX時有著不同的編寫方式。前端主要負責發送請求、處理響應和更新頁面，而后端主要負責接收請求、處理數據和返回響應。兩者緊密配合，共同實現了基于AJAX的交互式Web應用程序。