如何从网站中提取数据计数器以在另一个 HTML 项目中用作 JS 变量

Posted 2023-03-07

【中文标题】如何从网站中提取数据计数器以在另一个 HTML 项目中用作 JS 变量

【英文标题】：How to pull data counter from a website to use in another HTML project as a JS variable

【发布时间】：2015-11-29 09:54:01

【问题描述】：

您好，我正在尝试找到一种方法，能够将显示在不是我自己的网站上的变量拉到我自己的网站上，这样我就可以在我的网站上将其用作 javascript 变量。理想情况下，我希望能够显示此变量，并在网站系统内更新时更新它。

我已经搜索了几天，似乎无法找到关于如何完成此任务的明确解释。更具体地说，我的学校会跟踪停车数据和可用空间，我希望能够在我正在处理的 html 项目中使用这些数字。

如果有人可以向我解释如何使用任何必要的方式在我的项目中将这两个数字作为 JavaScript 变量访问，我将不胜感激。

【问题讨论】：

你是因为某种原因绑定到php服务器端还是也可以使用node.js？

不，我没有被束缚，我可以使用任何工具，包括 node.js

一种可能的方法是进行一些网页抓取。每 X 次抓取您感兴趣的页面的副本，然后您可以扫描页面源以获得所需的值，例如使用正则表达式。然后您可以在扫描后返回该值并将其放入变量中。这不是最有效的途径（理想情况下他们会提供 API，但我认为这对他们的用例来说太过分了）但它可以工作。

顺便说一句，Champions Drive Deck 现在也满了...

为什么不使用页面每秒拉出的链接返回所有停车场的 xml 结构。

【参考方案1】：

粘贴以前的评论作为答案以获得更多空间：

一种可能的方法是进行一些网页抓取。

每隔 X 次，您获取您感兴趣的页面的副本，然后您可以扫描页面源以获得所需的值，例如使用正则表达式。然后您可以在扫描后返回该值并将其放入变量中。

这不是最有效的途径（理想情况下，他们会提供 API，但我认为这对于他们的用例来说太过分了）但它可以工作。

例如，在 Google 上快速搜索“web page scraper”会给出：

https://import.io/ http://webscraper.io/ http://scrapy.org/

您可以使用其中之一（或类似的，我真的没有使用过那些特定的），或者您可以构建自己的，但概念是相同的：

获取网页源代码，丢弃不需要的任何内容，或者仅提取您想要的内容，仅此而已。

【参考方案2】：

在您的特定情况下，您可以使用它，但您不需要网络抓取。正如 JasonK 在 cmets 中提到的，您可以使用页面正在使用的相同 API 调用：

https://www.jmu.edu/cgi-bin/parking_get_sign_data.cgi?date=1441292695108

现在，由于同源政策，您不能从您的网站使用该 API，但您可以创建一个小型服务来获取您的数据。在 node.js 中它可能看起来像这样，但您可以轻松地在 php 中实现相同的功能：

var request = require("request");
var http    = require('http');

var server  = http.createServer(onRequest);

server.listen(3000);


//----------------------------------------------------
function onRequest(req, res)

    var parkingUrl = 'https://www.jmu.edu/cgi-bin/parking_get_sign_data.cgi?date=' + (new Date()).getTime();

    request(parkingUrl, function (error, response, body) 

        var data   = error;
        var status = 404;

        if(!error)
            status = 200;
            data = 
                championStatus : getStatus(body, '2'), 
                warsawStatus   : getStatus(body, '10')
            ;
        

        res.writeHead(status,  'Content-Type': 'application/json', "Access-Control-Allow-Origin":"*" );
        res.write(JSON.stringify(data));
        res.end();
    );



//----------------------------------------------------
function getStatus(ss, si)
    var status = ss;

    status = status.split("<SignId>"+si+"</SignId>"); 
    status = status[1];
    status = status.split("<Display>"); 
    status = status[1];
    status = status.split("</Display>"); 
    status = status[0];
    status = status.replace(' ','');
    if(isNaN(status))
        // do nothing 
     else 
        status = parseInt(status);
    

    if( status == 'Errors')status = '';
    else if(status != 'FULL' && isNaN(status))status = 'Unavailable';
    else if(status != '' && status != 'FULL'  && status != 'OPEN')
        if(status == '   1')status = status + ' space available'; 
        elsestatus = status + ' spaces available'; 
     
    return status;

getStatus 函数直接取自https://www.jmu.edu/parking/ 网站，我宁愿使用xml2js 或类似模块来解析响应和数据。

您现在可以从您的网站获得如下状态：

function httpGetAsync(url, callback)

    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function()  
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
          
    
    xmlHttp.open("GET", url, true); // true for asynchronous
    xmlHttp.send(null);


httpGetAsync("http://localhost:3000/", function(res)
    var data = JSON.parse(res);
    console.log(data);
);

不要忘记将localhost:3000 更改为您的服务器地址，调整Access-Control-Allow-Origin 标头以限制谁可以使用您的服务并添加一些错误处理。

【讨论】：

非常感谢您的帮助。当您说将 localhost:3000 更改为您的服务器地址时，您是什么意思？我在哪里可以找到那个号码？

与其说是端口号，不如说是地址。当您迁移到生产环境时，您必须使用您的域或服务器的 IP 地址来使用该服务。

所以你的意思是我可以使用“localhost:3000”进行测试，但在生产方面我必须使用“MY_IP_ADDRESS”？当您说“服务器的”IP 地址时，您是指我自己计算机的 IP 地址还是其他 IP 地址？

【参考方案3】：

除非您有办法与学校服务器通信并获取该数据，否则您可能会被抓取所困。如果你看学校网站的代码，你会看到空闲空间的数量是通过调用cgi脚本并解析生成的。

如果您有权访问此 cgi 脚本，则可以使用该脚本获取您的值，并按照学校网站源代码中的函数 getStatus 中的描述对其进行解析。

如果您无法访问 cgi，您可以尝试对该网站进行 ajax 调用，并检查包含数字的节点是否可供您从 DOM 中选择。

如果您无法访问网站的 DOM 和/或访问速度太慢，请使用 ajax 加载网站，而不是 text/html，而是请求 text/plain，这样您只会得到一个包含的长字符串网站。然后你可以用正则表达式抓取这个字符串来获取你的值。

如果所有这些都失败了，请将网站加载到隐藏的 iframe 中，以确保运行插入停车场号码的脚本。然后照常继续，方法是从此 iframe 中选择正确的节点。

这些都是客户端的选项。 服务器端可能有更多选项（例如与学校 cgi 的更轻松交互），但一般原则仍然存在。要么使用他们自己的 API（cgi 脚本），要么使用网站本身来抓取，或者使用完全加载的网站的文本表示来进行正则表达式。