Nodejs和浏览器端javascript的交互操作

Nodejs和浏览器端javascript的交互操作

问题是这样的

我想做一个简单的爬虫程序，抓取端用javascript，因为js是弱类型的语言，这样我就可以把抓取的内容打包成一个对象发送给服务器端进行持久化，同时nodejs具有较强的并发能力和异步I/O，还有事件驱动，这些也是我想要的。现在的问题是nodejs和javascript的交互中介是什么呢？

期待你的精彩回答。。。

10 回复

当然可以！以下是如何通过Node.js与浏览器端JavaScript进行交互操作来实现一个简单的爬虫程序。

Node.js 和 浏览器端 JavaScript 的交互

1. 使用HTTP请求库从Node.js发送数据到浏览器

首先，你需要创建一个简单的Node.js服务器，该服务器可以接收来自浏览器的请求，并将抓取的数据返回给浏览器。

Node.js 服务器代码（server.js）

const http = require('http');
const url = require('url');
const querystring = require('querystring');

// 模拟爬虫功能
function fetchContent() {
    return {
        title: 'Hello World',
        content: 'This is a simple example of how to interact between Node.js and browser-side JavaScript.'
    };
}

const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url);
    const path = parsedUrl.pathname;
    const method = req.method;

    if (path === '/fetch' && method === 'GET') {
        const data = fetchContent();
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(data));
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

2. 在浏览器中使用JavaScript获取数据

接下来，你可以在浏览器中使用JavaScript来发送请求并处理返回的数据。

HTML 文件（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js &amp; Browser JS Interaction</title>
</head>
<body>
    <h1>Data from Node.js:</h1>
    <div id="data"></div>

    <script>
        // 发送GET请求获取数据
        async function fetchData() {
            try {
                const response = await fetch('http://localhost:3000/fetch');
                const data = await response.json();
                document.getElementById('data').innerText = JSON.stringify(data, null, 2);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        fetchData();
    </script>
</body>
</html>

解释

  1. Node.js 服务器：我们创建了一个简单的HTTP服务器，它监听/fetch路径上的GET请求。当收到请求时，它会调用fetchContent()函数来模拟爬虫行为，并将结果以JSON格式返回给客户端。

  2. 浏览器端 JavaScript：我们使用fetch API向服务器发送GET请求。一旦接收到响应，我们将解析JSON数据并在页面上显示出来。

运行方式

  1. 确保安装了Node.js。
  2. 在终端中运行 node server.js 来启动Node.js服务器。
  3. 打开 index.html 文件，你应该能看到从Node.js服务器获取的数据。

这种方式实现了Node.js和浏览器端JavaScript之间的简单交互，你可以在此基础上扩展更复杂的功能。


不是很明白你说的 。。。 你需要啥 JSON ？ 还是直接数据库 ？

从浏览器端去抓网页那不是有跨域问题么? 应该都从服务端做才对

restful API吧。

楼主的意思，恐怕是通过浏览器来控制server端的nodejs来抓取哪些东西吧？

ajax或者form表单提交去请求nodejs就行啊。。其实倒是建议你用下phantomjs…

谢谢提醒，后来我也意识到js的跨域问题，现在使用phantomjs抓取和解析页面，可是phantomjs不支持操作数据库，我现在的想法是用phantomjs抓取，然后调用jquery.ajax把抓取的数据发送给node，让node进行数据库操作。可是我觉得这一步（ajax到nodejs）可能会造成性能上的损失。请问您有好的方法吗？

您说的很对。请多多指教。。。

restful api? 大人，小的没有接触过，请多说一些好么？

Node.js 和浏览器端 JavaScript 的交互可以通过 HTTP 请求来实现，常见的方法包括使用 AJAX、Fetch API 或 WebSocket。这里以 AJAX 和 Fetch API 为例，展示如何从浏览器端向 Node.js 服务器发送数据，并接收响应。

示例代码

客户端（浏览器端）JavaScript

假设你使用 Fetch API 来发送抓取的数据到服务器：

// 模拟抓取的内容
const data = {
    title: "Example Title",
    content: "This is an example content.",
    date: new Date().toISOString()
};

fetch('http://localhost:3000/saveData', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    console.log('Success:', result);
})
.catch(error => console.error('Error:', error));

服务器端（Node.js）

使用 Express.js 来创建一个简单的 HTTP 服务器：

首先，确保安装了 express 和 body-parser：

npm install express body-parser

然后，创建一个服务器文件，例如 server.js:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/saveData', (req, res) => {
    const data = req.body;
    console.log('Received data:', data);

    // 这里可以添加持久化逻辑，比如保存到数据库
    res.json({ success: true });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 客户端使用 Fetch API 发送一个 POST 请求到服务器。
  2. 服务器端使用 Express.js 创建一个监听在 3000 端口的 HTTP 服务器。
  3. 客户端发送的数据会被 body-parser 中间件解析，并通过 req.body 访问。
  4. 服务器处理请求后返回一个 JSON 响应。

通过这种方式，Node.js 和浏览器端 JavaScript 可以方便地进行数据交互。

回到顶部