js调用后台、后台调用前台等方法总结

当我们开发 Web 应用时，我们通常需要前端调用后台，在后台进行相应的处理之后再将结果返回给前端进行展示。在某些情况下，我们也需要后台主动调用前端的方法，进行相关的操作。在接下来的攻略中，我们将具体讲解这两种情况的实现方法。

前端调用后台

方法一：使用 Ajax

Ajax 是一种在前端实现异步交互的技术，可以通过 Ajax 发送请求到后台进行相应的操作，然后将操作结果返回到前端进行展示。以下是一个使用 jQuery 的 Ajax 的示例代码：

$.ajax({
    url: '/api/get_data',
    type: 'GET',
    data: {
        id: '123'
    },
    success: function (data) {
        console.log(data);
    }
});

在上面的代码中，我们使用了 jQuery 的 $.ajax 方法，向后台发送了一个 GET 请求，请求地址为 /api/get_data，传递了一个参数 id，值为 123。当请求成功时，会自动调用 success 回调函数，将返回的数据作为参数传递给这个函数中。在该函数里，我们将返回的数据通过 console.log 输出到控制台中。

方法二：使用 Fetch

Fetch 是一种基于 Promise 的 HTTP 请求 API，使用 Fetch 发送请求的方法与 Ajax 类似。以下是一个使用 Fetch 发送 POST 请求的示例代码：

fetch('/api/save_data', {
    method: 'POST',
    body: JSON.stringify({
        id: '123',
        name: 'John'
    }),
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
})
.then(function(data) {
    console.log(data);
});

在上面的代码中，我们使用了 Fetch 发送了一个 POST 请求，请求地址为 /api/save_data，传递了一个 JSON 格式的数据，包括 id 和 name 两个属性。当请求成功时，会自动调用 Promise 的 then 方法，将返回的 Response 对象作为参数传递给这个方法中。在该方法里，我们使用 response.json() 方法将返回的 Response 对象解析为 JSON 格式的对象，然后再通过 console.log 输出到控制台中。

后台调用前端

方法一：使用 WebSocket

WebSocket 是一种在 Web 应用中实现全双工通信的技术，它使得后台可以主动向前端发送消息。以下是一个使用 WebSocket 向前端发送消息的示例代码：

// 前端代码
var socket = new WebSocket('ws://localhost:8080/ws');

socket.onopen = function(event) {
    console.log('WebSocket opened');
};

socket.onmessage = function(event) {
    console.log('Received message: ' + event.data);
};

// 后台代码
var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {});

server.listen(8080, function() {
    console.log('Server is listening on port 8080');
});

var wsServer = new WebSocketServer({
    httpServer: server
});

wsServer.on('request', function(request) {
    var connection = request.accept(null, request.origin);

    connection.on('message', function(message) {
        console.log('Received message: ' + message.utf8Data);
    });

    connection.send('Hello, world!');
});

在上面的代码中，我们使用了 WebSocket 实现了一个简单的聊天程序，后台可以向前端发送消息。在前端代码中，我们使用了 new WebSocket() 创建了一个 WebSocket 对象，然后设置了 onopen 和 onmessage 两个回调函数。在后台代码中，我们使用了 websocket 库创建了一个 WebSocket 服务器，然后监听客户端的连接请求，并在连接建立后向客户端发送了一条消息。

方法二：使用 Server-Sent Events

Server-Sent Events 是一种在 Web 应用中实现服务器向客户端推送数据的技术，与 WebSocket 相比，它更加轻量级。以下是一个使用 Server-Sent Events 向前端推送数据的示例代码：

// 前端代码
var source = new EventSource('/events');

source.onopen = function() {
    console.log('Server Sent Events opened');
};

source.onmessage = function(event) {
    console.log('Received message: ' + event.data);
};

// 后台代码
var http = require('http');
var fs = require('fs');

var server = http.createServer(function(request, response) {
    if (request.url === '/events') {
        response.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive'
        });

        setInterval(function() {
            response.write('data: ' + new Date() + '\n\n');
        }, 1000);
    } else {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.end(fs.readFileSync('index.html'));
    }
});

server.listen(8080, function() {
    console.log('Server is listening on port 8080');
});

在上面的代码中，我们使用了 Server-Sent Events 实现了一个简单的时钟程序，后台会每隔一秒钟向前端推送当前的时间。在前端代码中，我们使用了 new EventSource() 创建了一个 EventSource 对象，然后设置了 onopen 和 onmessage 两个回调函数。在后台代码中，我们使用了 http 库创建了一个 HTTP 服务器，并在客户端访问 /events 路径时，向客户端发送了一条消息，并让这个连接保持活跃状态。