PROBLEMA
Se desea realizar una llamada Ajax a un método de un servidor NodeJS. El resultado debe mostrarse en un elemento del documento html
que hace la llamada.
SOLUCIÓN
Existen muchas formas de hacerlo, lo que necesitas es implementar alguna de tantas. Por ejemplo, podrías usar la API Fetch
.
Pero el primer detalle que voy a intentar corregir en tu método es que el mismo está escrito usando el verbo POST
:
app.post('/get-version', (req, res) => {
res.json(get-version());
});
Si bien, esto podría funcionar, es anti natural ya que el propósito de la misma url
implicada en este método no es recibir datos para crear un nuevo recurso (ver CRUD), sino al contrario, solicitar un recurso.
Entonces, lo más adecuado sería usar un método del tipo GET
.
También, podemos hacer un cambio en la url
, ya que la misma debería representar la entidad a la que estamos haciendo referencia y no la acción sobre la misma. La acción la expresamos mediante uno de los verbos: GET
, POST
, PUT
, DELETE
, etc.
Mi propuesta es que uses el siguiente método en tu aplicación:
app.get('/version', (req, res) => {
res.json(get-version());
});
Así, seremos consistentes con el método y el recurso solicitado.
Por último, sin saber exactamente dónde se ejecuta tu aplicación y si la misma está configurada en un puerto específico (distinto del puerto 80 para http
o 443 para https
), debemos tener a mano la URI
correcta para consumir el recurso representado por /version
.
Supongamos que tienes tu aplicación Express
(NodeJS) en el puerto típico: 3000. Por lo tanto el acceso a la raíz de la misma sería: http://localhost:3000
. Así, si deseamos la versión de la aplicación, que se resuelve mediante la ruta /version
, tenemos que la URI
a consumir sería: http://localhost:3000/version
.
Una forma en que puedes mostrar la información devuelta por dicha ruta sería mediante la siguiente llamada AJAX usando la API Fecth:
let URI = 'http://localhost:3000/version'
fetch(URI)
.then(response => response.json())
.then(json => {
document.getElementById('version').innerText(json.version);
})
.catch(error => {
console.log(`Error al intentar la solicitud: ${error.message}`);
document.getElementById('version').innerText(undefined);
});
Para que esto funcione puedes hacer dos cosas: usar un botón para que la acción se ejecute a petición del usuario o hacer la solicitud apenas se cargue el contenido de la página web. Para ello, el script
debes colocarlo al final de tu documento html
justo antes del cierre de la etiqueta </body>
. También es importante recalcar que debemos identificar el elemento que deseamos reciba el valor de nuestra respuesta. En este caso hemos establecido un atributo id
sobre el elemento: <small id="version"></small>
Por ejemplo:
<body>
<h1>Programa <small id="version"></small></h1>
<script>
let URI = 'http://localhost:3000/version'
fetch(URI)
.then(response => response.json())
.then(json => {
document.getElementById('version').innerText = json.version;
})
.catch(error => {
console.log(`Error al intentar la solicitud: ${error.message}`);
document.getElementById('version').innerText = undefined;
});
</script>
</body>
Un ejemplo de esto, usando la API de randomuser.me
, sería el siguiente:
<body>
<h1>Programa <small id="version"></small></h1>
<script>
let URI = 'https://randomuser.me/api/?inc=gender,name,nat&nat=ES';
fetch(URI)
.then(response => response.json())
.then(json => {
let version = json.info.version; document.getElementById('version').innerText = `V ${version}`;
})
.catch(error => {
console.error(error);
console.log(`Error al intentar la solicitud: ${error.message}`);
document.getElementById('version').innerText = '<Valor por defecto>';
});
</script>
</body>
Un ejemplo de la respuesta de la llamada la API de randomuser.me
es la siguiente:
{
"results": [
{
"gender": "male",
"name": {
"title": "Mr",
"first": "Marc",
"last": "Ferrer"
},
"nat":"ES"
}
],
"info": {
"seed": "e92f4d9ca8229707",
"results": 1,
"page": 1,
"version": "1.3"
}
}
De allí que saquemos el valor de la versión del programa usando:
json.info.version
Espero que esto te ayude a resolver el problema y deje un poco más claros ciertos conceptos.