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


How to pull data counter from a website to use in another HTML project as a JS variable

嗨,我正试图找到一种方法,能够拉一个变量显示在一个网站上,不是我自己的一个是我自己的,所以我可以使用它在我的JavaScript变量。理想情况下,我希望能够显示这个变量,也有它更新时,它是在网站的系统内更新。

我已经找了几天了,似乎找不到一个明确的解释,我怎么能做到这一点。更具体地说,我的学校跟踪停车数据和有多少空间可用,我希望能够在我正在做的HTML项目中使用这些数字。

如果有人能向我解释如何使用任何必要的手段使这两个数字在我的项目中作为JavaScript变量访问,我会非常感激。

将之前的评论粘贴为答案以获得更多空间:

一个可能的方法是做一些网页抓取。

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

这不是最有效的途径(理想情况下,他们会提供一个API,但我认为这对他们的用例来说是多余的),但它可以工作。

例如,在Google上快速搜索"web page scraper"会得到:

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

你可以使用其中的一个(或类似的,我真的没有使用过那些特殊的),或者你可以建立你自己的,但概念是一样的:

获取网页源代码,丢弃任何你不需要的东西,或者只提取你想要的,就是这样。

在你的特殊情况下,你可以使用它,但你不需要网页抓取。正如JasonK在评论中提到的,您可以使用与页面使用的相同的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'; }
        else{status = 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标头以限制谁可以使用您的服务并添加一些错误处理

除非你有办法与学校服务器通信并获得数据,否则你可能会被抓取所吸引。如果你看一下学校网站的代码,你会发现空闲空间的数量是通过调用cgi脚本并解析它来生成的。

如果您可以访问这个cgi脚本,您可以使用该脚本来获取您的值,并根据学校网站源代码中的getStatus函数对其进行解析。

如果你没有访问cgi,你可以尝试做一个ajax调用这个网站,并检查节点包含的数字是可用的,你可以从DOM中选择

如果你不能访问网站的DOM和/或如果访问它太慢,用ajax加载网站,但不是text/html,要求text/plain,这样你就会得到一个包含网站的长字符串。然后,您可以使用正则表达式抓取该字符串以获得您的值。

如果所有这些都失败了,将站点加载到一个隐藏的iframe中,以确保插入停车场编号的脚本运行。然后像往常一样继续,从iframe中选择正确的节点。

这些都是客户端的选项。服务器端可能有更多的选择(比如更容易与学校cgi交互),但一般原则仍然存在。要么使用自己的API (cgi脚本),要么使用网站本身来抓取,或者使用完全加载的网站的文本表示来正则化。