举例JavaScript 前后端交互

前端和后端之间的交互是通过 HTTP 协议来实现的。以下是一个简单的 JavaScript 前后端交互的示例：

1. 前端发送请求

// 使用 AJAX 发送 GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.log('请求失败');
    }
};
xhr.send();

2. 后端处理请求

// 使用 Node.js 搭建简单的服务器
const http = require('http');
const server = http.createServer(function(req, res) {
    const url = req.url;
    if (url === '/api/data') {
        const data = {
            name: '张三',
            age: 20,
            gender: '男'
        };
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(data));
    } else {
        res.writeHead(404);
        res.end();
    }
});
server.listen(3000);

在这个例子中，前端使用 AJAX 发送 GET 请求到服务器的 /api/data 接口，后端接收到请求后返回一个 JSON 格式的数据。前端接收到后端返回的数据后，通过 JSON.parse() 方法将 JSON 数据转换成 JavaScript 对象，并在控制台中输出。