AJAX請求Express.JS中的服務器上的數據顯示在客戶端中？

Question

我受命在客戶端上顯示此代碼。 我設法在頁面上加載了數據/內容，但是它並不那么優雅 。

 var express = require('express'); router = express.Router(), connect = require('connect'), urlParse = require('url').parse, fs = require('fs'); var iconList = fs.readFileSync('app/data/icons.list').toString().split('\\n').filter(function(site) { return site; }); var random = function(max) { return Math.floor(Math.random() * max); }; var icon2Site = function(icon) { var site = icon.replace(/_/g, '.').replace(/\\.png$/, ''); return site; }; var breaches = []; // breaches generation (function() { for (var i = 0; i < 1000; i++) { var index = random(iconList.length); breaches.push({ site: icon2Site(iconList[index]), date: Date.now() - 432000000 + random(432000000), number: random(100000) }); } })(); breaches.sort(function(a, b) { return a.date - b.date; }); var jsonResponse = function(res, code, body) { res.writeHead(code, { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(body) }); res.end(body); }; var foo = connect() .use(connect.logger('dev')) .use(function(req, res, next) { req.parsedUrl = urlParse(req.url, true); next(); }) .use(function(req, res, next) { if (req.parsedUrl.pathname !== '/ws/breaches') { return next(); } var index = parseInt(req.parsedUrl.query.index, 10) || 0; jsonResponse(res, 200, JSON.stringify({ result: breaches.slice(index, index + 20) })); }) .use(function(req, res, next) { if (req.parsedUrl.pathname !== '/ws/icon') { return next(); } var site = req.parsedUrl.query.site || ""; console.log(req.parsedUrl.query.site); site = site.replace(/\\./g, '_') + ".png"; jsonResponse(res, 200, JSON.stringify({ result: "https://s3-eu-west-1.amazonaws.com/static-icons/" + site })); }) .use(connect.static(__dirname + '/public', { maxAge: 1000 * 60 * 5 // Five minutes of cache })); router.get('/', function(req, res) { res.render('index', {pageID: 'mainData', breaches: breaches, iconList: iconList, sidebar: ['/images/vertbar.jpg'] }); console.log(breaches); console.log(iconList); }); module.exports = router; 

這是任務的關鍵。

您的一個朋友創建了一個Web服務來跟蹤這些泄漏，並要求您創建一個網站以對其進行可視化。

他創建了兩個不同的Web服務：

• GET / ws / breaches？index = [正整數]-此Web服務返回具有“結果”屬性的對象，該對象包含從提供的索引開始的最多20個違規站點的數組（例如，調用/ ws / breaches？index = 0將返回最后20個被破壞的站點，/ ws / breaches？index = 20將返回20個下一個，等等。）-一個被破壞的站點對象包含以下信息：-site：被破壞站點的域-日期：違約，以毫秒為單位-數字：泄漏的帳戶數

  • GET / ws / icon？site = [站點域]
    • 該Web服務返回所提供站點的圖標的URL
    • 圖標大小為58x36像素

我正在使用Express和EJS框架。 但是，我在以下方面遇到了困難。

1. 如何將變量，對象從Express.js（服務器）傳遞到客戶端。

這將獲取變量，對象等到模板 ：

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

我有一個js文件中我的public文件夾中（見圖片）稱為contentLoader.js ，我想我應該做一個AJAX請求或東西來獲取。 但是那是我應該做的嗎？ 我應該在這里獲取上面的Ask參數嗎？

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();

那么我的設置或思維是否正確？ 我知道他們有很多方法可以做某事。 但是直覺告訴我，我應該使用服務器中的所有服務器代碼，而不是嘗試將其傳遞給客戶端上的腳本。

Answer 1

GET / ws / breaches？index = [正整數] -此Web服務返回具有“結果”屬性的對象，該對象包含從提供的索引開始的最多20個違規站點的數組（例如，調用/ ws / breaches？index = 0將返回最后20個被破壞的站點，/ ws / breaches？index = 20將返回20個下一個，等等。）-一個被破壞的站點對象包含以下信息：-site：被破壞站點的域-日期：違約，以毫秒為單位-數字：泄漏的帳戶數

如果您查看說明，則有一些關鍵部分（我已為您粗體顯示）。 它為您提供請求方法（GET），路徑（/ ws / breaches）+查詢字符串（？index = [正整數]）和返回值（對象）。

在Express中設置路由時，必須指定請求方法（具有），路徑（不正確）和響應（不正確）。 響應可以采用不同的格式，例如純文本，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調用，以免您到處重復代碼。