Programación Web 2

Laboratorio 3
Ajax y NodeJS

I. Objetivos
● Aprender a trabajar con objetos asíncronos en JavaScript usando JSON para la
comunicación.
● Programar en backend usando JavaScript
● Entender el concepto de promises y los objetos no bloqueantes

II. Temas a tratar

● Objetos asíncronos
● Comunicación con POST y GET
● Programación en el backend

III. Marco teorico

Sobre fetch
https://www.w3schools.com/js/js_api_fetch.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Sobre nodejs
https://nodejs.dev/learn
https://nodejs.org/en/docs/guides/getting-started-guide/

Sobre express
http://expressjs.com/es/

IV. Actividades
● Tenga las diapositivas de teoría a la mano
● Instale NodeJS
● Cree un nuevo proyecto NodeJS siguiendo los pasos de las diapositivas

Profesor Alfredo Paz Valderrama

 Programación Web 2
2

● Revise el texto del código de conducta, coméntelo en clase.

● No olvide usar los comando GIT necesarios para guardar un historial de los
próximos códigos
○ ¿Necesita hacer git init?
○ ¿Debe modificar .gitignore?
● Dentro de su proyecto, cree un archivo index.js con el siguiente contenido
const http = require('http');
const server = http.createServer((request, response) => {
console.log(request.url);
response.end("Hola mundo");
});
server.listen(3000);
console.log("Escuchando en: http://localhost:3000")
Luego lance el servidor con: node index.js
Note que console imprime en la salida estándar y el cliente sólo recibe el texto
“Hola Mundo”
¿qué pasó con la línea: “Content type …..” ?
● El siguiente código modifica algunas líneas para usar un framework llamado
express y devolver un archivo index.html
Para usar este código debe instalar express con npm: $ npm install express
const path = require('path');
const express = require('express');
const app = express();

app.listen(3000, () => {
console.log("Escuchando en: http://localhost:3000")

});

app.get('/', (request, response) => {

response.sendFile(path.resolve(__dirname, 'index.html'));
});

Deberá crear un archivo index.html en el directorio de su proyecto.

Note que el servidor espera recibir una petición de tipo GET y el URL no
contiene el nombre del archivo.

V. Ejercicios Resueltos
1. Cree una aplicación web que ejecute javascript en el
cliente (dentro de la carpeta pub) y nodejs en el
servidor.
const path = require('path');
const express = require('express');
const app = express();

Profesor Alfredo Paz Valderrama

 Programación Web 2
3
app.use(express.static('pub'));

app.listen(3000, () => {
console.log("Escuchando en: http://localhost:3000")

});

app.get('/', (request, response) => {

response.sendFile(path.resolve(__dirname, 'index.html'));
});

2. Cree una aplicación web que realice una petición ajax

en el lado del cliente y responda usando nodejs en el
lado del servidor.
// En el lado del servidor
const fs = require('fs')
const path = require('path')
const express = require('express')
const app = express()
app.use(express.static('pub'))

app.listen(3000, () => {
console.log("Escuchando en: http://localhost:3000")
});

app.get('/', (request, response) => {

response.sendFile(path.resolve(__dirname, 'index.html'))
})

app.get('/recitar', (request, response) => {

fs.readFile(path.resolve(__dirname, 'priv/poema.txt'), 'utf8',
(err, data) => {
if (err) {
console.error(err)
response.status(500).json({
error: 'message'
})
return
}
response.json({
text: data.replace(/\n/g, '<br>')
})
})
//
})
¿En qué lugar debería estar el archivo poema.txt?
¿Entiende la expresión regular en el código y se da cuenta de para qué es útil?

// En el lado del cliente

function recitar() {
const url = 'http://localhost:3000/recitar'

Profesor Alfredo Paz Valderrama

 Programación Web 2
4
fetch(url).then(
response => response.json()
).then(
data => {
document.querySelector("#poema").innerHTML = data.text
}
)
}
Note que la respuesta del servidor está en formato JSON, ¿Habrá alguna forma
de verla directamente?

3. Cree una aplicación que haga peticiones AJAX usando

POST a un servidor NodeJS
// En el lado del servidor
const fs = require('fs')
const path = require('path')
const express = require('express')
const bp = require('body-parser')
const MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
const app = express()

app.use(express.static('pub'))
app.use(bp.json())
app.use(bp.urlencoded({
extended: true
}))

app.listen(3000, () => {
console.log("Escuchando en: http://localhost:3000")
})

app.get('/', (request, response) => {

response.sendFile(path.resolve(__dirname, 'index.html'))
})

app.post('/', (request, response) => {

console.log(request.body)
let markDownText = request.body.text
console.log(markDownText)
let htmlText = md.render(markDownText)
response.setHeader('Content-Type', 'application/json')
response.end(JSON.stringify({
text: htmlText
}))
})
Note que tanto el tanto GET como POST comparten el mismo URL

// En el lado del cliente

function recitar(markupText) {

Profesor Alfredo Paz Valderrama

 Programación Web 2
5
const url = 'http://localhost:3000/'
const data = {
text: markupText
}
console.log(data)
const request = {
method: 'POST', // Podría ser GET
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}
http = fetch(url, request)
http.then(
response => response.json()
).then(
data => {
document.querySelector("#htmlCode").innerHTML =
data.text
}
)
}
document.addEventListener('DOMContentLoaded', function () {
const text = document.querySelector('#markupText')
document.querySelector('#markupForm').onsubmit = () => {
recitar(text.value)
return false;
}
})

VI. Ejercicios Propuestos

En grupos de 3 a 5 personas (los grupos se definirán en clase) implemente una
aplicación web que navegue sobre archivos Markdown y permita:
1. Listas los archivos Markdown disponibles
2. Ver el contenido de un archivo Markdown traducido a HTML
3. Crear nuevos archivos MarkDown y almacenarlos en el servidor
La comunicación entre el cliente y el servidor tiene que ser usando JSON sólamente.
El cliente debe usar AJAX para sus peticiones
El servidor debe usar NodeJS
Su aplicación debe ser de página única, es decir que sólo habrá un archivo index.html y
nada más.
Si los enlaces proporcionado en esta guía no le son suficientes, puede revisar códigos
en Internet que le ayuden con cosas como ejemplos: listar un directorio en NodeJS;
pero deberá incluir los enlaces correspondientes en sus archivos como comentarios y
sólo podrá usar código de stackoverflow, incluir código de cualquier otra fuente está
prohibido y se considerará actitud deshonesta.

Profesor Alfredo Paz Valderrama

 Programación Web 2
6

VII. Bibliografía
● JavaScript code using the latest ECMAScript. Packt Publishing Ltd, 2018.
● Greg Lim. Beginning Node.js, Express & MongoDB Development. Amazon,
2019.

Profesor Alfredo Paz Valderrama