Question

我的任务是在客户端上显示此代码。我设法在页面上加载数据/内容但不是elegant。

router.get('/', function(req, res) {
    res.render('index', {pageID: 'mainData', breaches: breaches, iconList: iconList, sidebar: ['/images/vertbar.jpg'] });
    console.log(breaches);
    console.log(iconList);
});

这是任务的关键。

您的朋友创建了一个Web服务来跟踪这些泄漏并询问   您可以创建一个可视化的网站。

他创建了两个不同的Web服务：



GET / ws / breaches？index = [正整数]        - 此Web服务返回一个包含“result”属性的对象         最多20个违规站点的阵列，从该站点开始         提供索引（例如调用/ ws / breaches？index = 0将返回20         最后违反网站，/ ws / breaches？index = 20 20 next，等等）        - 违规站点对象包含以下信息：            - site：违规站点的域名            - 日期：违规的时间，以毫秒为单位            - 号码：泄露的帐户数量


GET / ws / icon？site = [网站域名]

此网络服务返回所提供网站的图标的网址

图标大小为58x36像素

我正在使用Express和EJS框架来执行此操作。但是我很难以下面的事情。

如何将变量，对象从Express.js（服务器）传递到客户端。

这将获得 templates 的变量，对象等：

js

我的public文件夹中有一个contentLoader.js文件（见图片），名为var xmlhttp = new XMLHttpRequest(); var url = "index"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var users = JSON.parse(xmlhttp.responseText).breaches; // do something with the users variable that was passed by the routes console.log(users); } }; xmlhttp.open("GET", url, true); xmlhttp.setRequestHeader('Accept', 'application/json'); xmlhttp.send();，我想我应该发送一个AJAX请求或其他内容。但那是我应该做的吗？我应该在这里获得上述问题的参数吗？

{{1}}

我的设置或思考是否正确？我知道他们有很多办法可以做点什么。但直觉告诉我，我应该使用服务器中的所有服务器代码，而不是试图将其传递给客户端上的脚本。

Answer 1

获取 / ws / breaches？index = [正整数] - 此网络服务返回带有＆＃的对象34;结果＆＃34;属性，包含最多20个数组从提供的索引开始（例如调用） / ws / breaches？index = 0将返回20个最后被破坏的网站， / ws / breaches？index = 20 20 next，等等） - 一个违反的网站对象包含以下信息： - site：被破坏的域 site - date：违规时间，以毫秒为单位 - 数字：泄露的帐户数量

如果你看一下描述，就会有一些关键部分（我为你加粗）。它为您提供请求方法（GET），路径（/ ws / breaches）+查询字符串（？index = [正整数]）和返回值（对象）。

在Express中set up a route时，您必须指定请求方法（您拥有），路径（不正确）和响应（不正确）。响应可以采用不同的格式，如纯文本，HTML，XML和JSON。后者是您通常用来发回一个对象的东西。 Express有方便的方法，例如res.render()，res.send()，res.json()和其他方法以适当的格式发回响应。在您的情况下，您将使用后者res.json()作为要发送回来的对象。

在描述中，它指定了对象必须包含的内容：它必须具有 result 属性，该属性是一个站点（对象）数组，每个属性都包含自己的一组属性。

在描述中，它还讨论了来自查询字符串的index。要访问该值，您可以使用req.query.index。因此，当您构建对象时，您需要使用该值执行某些操作。

router.get('/ws/breaches', function(req, res) {
    // this is just an example of how the object would look;
    // you are most likely going to be building this object dynamically involving req.query.index
    let obj = {
        result: [
            {
                site: 'http://www.somedomain.com',
                date: 243,
                number: 2
            },
            { 
                site: 'http://www.anotherdomain.com',
                date: 312,
                number: 10
            },
            // etc
        ]
    };
    // send the response
    res.json(obj);
});

说到客户端代码，

var url = "/ws/breaches?index=0"; // example
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var result = JSON.parse(xmlhttp.responseText).result;   
        // this should be an array of the sites
        console.log(result);
    }
};

我觉得你开始很好。正如你所说，由于许多人以不同的方式设置他们的环境，所以没有正确答案。但是，您可能应该创建一个用于进行AJAX调用的通用函数，这样您就不会在任何地方重复代码。

AJAX请求Express.JS中的服务器上的数据显示在客户端？

1 个答案: