如何通过Ajax从客户端调用Node.js服务端的JS函数

你现在的做法是直接请求服务端的index.js文件，拿到的只是函数的源代码文本，没法直接调用服务端的myFunction——因为服务端代码运行在Node.js环境，客户端代码在浏览器环境，两者完全隔离，必须通过HTTP接口来实现通信。

下面是具体的解决方案：

第一步：改造服务端，搭建HTTP服务并暴露接口 #

Node.js本身不会自动处理HTTP请求，你需要用内置模块或框架创建Web服务，把myFunction封装成可被客户端请求的接口。

方案1：用Node.js原生http模块 #

修改你的index.js：

const http = require('http');

function myFunction() {
    console.log("It works!");
    return "Function executed successfully!"; // 定义要返回给客户端的内容
}

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    // 设置响应头，允许跨域（开发阶段如果客户端和服务端端口不同时需要）
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Content-Type', 'application/json');

    // 处理调用myFunction的请求，指定接口路径为/api/call-function
    if (req.method === 'GET' && req.url === '/api/call-function') {
        const result = myFunction();
        // 返回JSON格式的响应
        res.end(JSON.stringify({ message: result }));
    } else {
        res.writeHead(404);
        res.end(JSON.stringify({ error: 'Not found' }));
    }
});

// 监听3000端口
const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

方案2：用Express框架（更简洁） #

先安装依赖：

npm install express cors

然后修改index.js：

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;

function myFunction() {
    console.log("It works!");
    return "Function executed successfully!";
}

// 允许跨域（开发阶段用）
app.use(cors());

// 创建GET接口
app.get('/api/call-function', (req, res) => {
    const result = myFunction();
    res.json({ message: result });
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

第二步：修改客户端代码，请求正确的接口 #

把Ajax请求的URL改成服务端暴露的接口路径，处理返回的JSON数据：

<body>        
    <button id="mybtn" onclick="callMyFunction()">Call function</button>

    <script>
        function callMyFunction() {
            // 如果客户端和服务端同域，可简化为'/api/call-function'
            var url = 'http://localhost:3000/api/call-function'; 
            var xhttp = new XMLHttpRequest();

            xhttp.open("GET", url, true);
            xhttp.setRequestHeader('Content-Type', 'application/json');

            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    const response = JSON.parse(this.responseText);
                    console.log(response.message); // 打印服务端返回的结果
                    alert(response.message); // 也可以用弹窗展示结果
                }
            };

            xhttp.send();
        }
    </script>
</body>

第三步：测试运行 #

1. 在终端执行node index.js启动服务端
2. 打开客户端HTML文件（或把HTML放到服务端静态目录，通过http://localhost:3000访问）
3. 点击按钮，就能触发服务端的myFunction，客户端会收到返回结果

内容的提问来源于stack exchange，提问作者Userx10xC