Вызов Ajax на другой сервер Node.js? - PullRequest
Новая
       7

Вызов Ajax на другой сервер Node.js?

0 голосов
/ 01 мая 2018

У меня нет конкретного вопроса, но мне нужно кое-что объяснить. Я делаю задание, которое требует, чтобы я использовал AJAX (БЕЗ JQuery) для отображения списка после загрузки страницы. Тем не менее, я запутался в части инструкций.

"... представлен. После загрузки страницы вызов Ajax должен вызвать сервер Node.js для получения списка 10 самых популярных . Затем список должен быть представлен пользователю как пронумерованный. список. Предметы ... "

Означает ли это, что мне нужно создать еще один сервер Node.js в дополнение к тому, который я уже создал, или все это можно сделать на одном сервере? Я очень смущен этой частью.

Это мой сервер Node.js. 

'use strict';

const express = require('express'),
    request = require('request'),
    app = express();

app.set('view engine', 'pug');
app.set('views', './views');

app.use(express.json());
app.use(express.urlencoded({
    extended: true
}));
app.use(express.static('public'));
app.get('/', function (req, res) {
    res.render('index');
});

app.listen(3000, function () {
    console.log('Listening on http://localhost:3000');
});

Это мой шаблон PUG. 

doctype
html
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1")
        block title
            title This is the title!
        link(rel='stylesheet', href='/css/style.css', type='text/css')
    body
        h1 This is a header!

        div#banner

        p#demo This is a description!

        script(src='/js/mrvl_ajax.js')

Это моя функция вызова AJAX. 

'use strict';

window.addEventListener("load", function(event) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        document.getElementById("demo").innerHTML = this.responseText;
    };
    xhttp.open("GET", "**Server Location?**", true);
    xhttp.send();
});

1 Ответ

0 голосов
/ 01 мая 2018

Вы можете создать другую конечную точку на своем сервере Node.js. 

app.get('/data', function (req, res) {
    res.json({"list": ["item1", "item2"]});
});

затем вызовите эту конечную точку из клиента с помощью ajax 

xhttp.open("GET", "/data", true);

возвращенные данные будут данными JSON {"list":["item1", "item2"]}, которые затем вы можете использовать javascript, чтобы упорядочить их так, как вам нужно.

также, внутри вашей функции onreadystatechange вы хотите, чтобы этот оператор if гарантировал, что вызов успешно завершен, прежде чем вы получите responseText из ответа 

xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
}
...