Lab 03

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, () => {
});
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();

Programación Web 2
3
app.use(express.static('pub'));
app.listen(3000, () => {
});

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, () => {
});

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'

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, () => {
})

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) {

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.

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.

Lab 03

Cargado por

Copyright:

Formatos disponibles

Lab 03

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lab 03

Cargado por

Copyright:

Formatos disponibles

Programación Web 2

II. Temas a tratar

III. Marco teorico

Profesor Alfredo Paz Valderrama

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

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

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

Profesor Alfredo Paz Valderrama

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

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

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

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

// En el lado del cliente

Profesor Alfredo Paz Valderrama

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

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

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

// En el lado del cliente

Profesor Alfredo Paz Valderrama

VI. Ejercicios Propuestos

Profesor Alfredo Paz Valderrama

Profesor Alfredo Paz Valderrama

También podría gustarte