PDF de programación - Web

Web

Santiago Pavón
Juan Quemada

© Santiago Pavón - UPM-DIT

Versión: 2016-04-08

Servidores Web y HTTP

© Santiago Pavón - UPM-DIT

La Web

Inventada por Tim Berners Lee (1989)
n Servicio de publicación de documentos hipertexto en Internet

Es el almacén de contenidos que necesitaba la red

n Transforma Internet en una “Red de distribución de

contenidos”
w Crece continuamente, por ser: descentralizada y escalable

Cliente accede a
documentos en

servidores con URLs

Cliente solicita doc con HTTP (URL)

Servidor devuelve hiperdocumento

Servidor busca
y devuelve el

documento

3

© Juan Quemada, DIT, UPM Funcionamiento Básico

© Santiago Pavón - UPM-DIT

La primera Web

GET

URL

n Dirección única en Internet de un fichero (documento o recurso)

w Ejemplo: http://www.upm.es/centros/etsit/personal.html

GET

HTTP

n Protocolo de acceso a ficheros (solo GET) en un servidor remoto

w Protocolo simple y ¡muy escalable!

n ¡¡El URL identifica el recurso unívocamente en Internet!!

HTML (páginas Web)

n lenguaje de marcado para creación de documentos hipertexto distribuidos

w ¡¡Clicks permiten una navegación Web muy sencilla y potente!!

GET

GET

GET

GET

GET

GET

Cliente Web (navegador)

n Programa que visualiza páginas Web en HTML traídas por HTTP de un servidor remoto

Servidor Web de páginas estáticas

n Programa que sirve ficheros (páginas Web) con HTTP a clientes conectados

5

© Juan Quemada, DIT, UPM Las aplicaciones Web

GET

URL

n Dirección única en Internet de un fichero (documento o recurso)

w Ejemplo: http://www.upm.es/centros/etsit/personal.html

GET

HTTP

n Protocolo de acceso a ficheros (solo GET) en un servidor remoto

w Protocolo simple y ¡muy escalable!

n ¡¡El URL identifica el recurso unívocamente en Internet!!

GET

GET

GET

GET

GET

GET

HTML (páginas Web) -> HTML, CSS, JavaScript (Apps Web)

n Las aplicaciones de cliente interaccionan con el usuario y guardan datos locales

w !!Pero no pueden compartir datos entre diferentes clientes!!

Cliente Web (navegador)

n Programa que visualiza páginas Web en HTML traídas por HTTP de un servidor remoto

Servidor Web de páginas estáticas

n Programa que sirve ficheros (páginas Web) con HTTP a clientes conectados

6

© Juan Quemada, DIT, UPM GET

POST

La Web actual

URL

n Dirección única en Internet de un fichero (documento o recurso)

w Ejemplo: http://www.upm.es/centros/etsit/personal.html

HTTP

n Protocolo de acceso a ficheros en un servidor remoto

w Protocolo simple y ¡muy escalable!

n ¡¡El URL identifica el recurso unívocamente en Internet!!

DELETE

GET

PUT

GET

GET

POST

HTML (páginas Web) -> HTML, CSS, JavaScript (Apps Web)

n Las aplicaciones de cliente interaccionan con el usuario y guardar datos locales

w !!Ahora pueden compartir datos entre diferentes clientes a través del servidor!!

Cliente Web (navegador)

n Programa que visualiza páginas Web en HTML traídas por HTTP de un servidor remoto

Servidor Web de páginas dinámicas

n Aplicación de servidor programable, por ejemplo node.js en JS, PHP, Python, Ruby, …

w Puede servir ficheros o acceder a bases de datos remotamente con HTTP

7

© Juan Quemada, DIT, UPM Arquitectura en Tres Capas

Frontend
• Las vistas
Middleware
• La lógica de la aplicación
Backend
• Persistencia de la
información

© Santiago Pavón - UPM-DIT
© Santiago Pavón - UPM-DIT

URLs

© Santiago Pavón - UPM-DIT

HTTP

© Santiago Pavón - UPM-DIT

Métodos HTTP

GET /rec1 HTTP/1.1
< parámetros>
……. Cuerpo …….

PUT /rec1 HTTP/1.1
< parámetros>
……. Cuerpo …….

POST /rec1 HTTP/1.1
< parámetros>
……. Cuerpo …….

Interfaz Uniforme o CRUD (BBDD):
POST: Crear un recurso en el servidor (Create)
GET: Traer un recurso al servidor (Read)
PUT: Modificar un recurso del servidor (Update)
DELETE: Borrar un recurso del servidor (Delete)

DELETE /rec1 HTTP/1.1
< parámetros>
……. Cuerpo …….

La interfaz uniforme o CRUD es la base
de las arquitecturas orientadas a
recursos (ROA) y de las interfaces REST.

El primer Web necesitaba solo transacciones HTTP GET
para traer ficheros del servidor al navegador. HTTP
GET es suficiente para navegar. El primer HTTP (V0.9)
solo soportaba HTTP GET.

Más métodos
HEAD: similar a GET, pero solo pide cabecera al servidor
OPTIONS: Determinar qué métodos acepta un servidor
TRACE: Trazar proxies, caches, … hasta el servidor
CONNECT: Conectar a un servidor a través de un proxy
...........

Las Web Apps solo se necesitan
transacciones HTTP GET para traer
ficheros (HTML, CSS, JS, ..) del servidor
al navegador. Un servidor estático solo
atiende transacciones HTTP GET para
servir cualquier recurso Web, un fichero
con tipo MIME que indica su contenido.

Las aplicaciones de servidor utilizan
habitualmente la interfaz uniforme con
transacciones HTTP POST, GET, PUT y DELETE
para gestionar recursos en un servidor remoto. Los
recursos pueden ser ficheros o datos en una
BBDD. El programador decide como atiende
cada solicitud.

11

© Juan Quemada, DIT, UPM HTTP

Solicitud
HTTP

Respuesta

HTTP

HTTP es un protocolo transaccional
n Gestiona recursos de un servidor remoto
Transacción HTTP
n se compone de Solicitud y Respuesta

w Solicitud y Respuesta son independientes (como emails)

Por ejemplo, el método (o verbo) GET
n GET trae un recurso de un servidor remoto

GET /me.htm HTTP/1.1
< parámetros>
……. Cuerpo …….

HTTP/1.1 200 OK
< parámetros>
……. Cuerpo …….

w Solicitud: el cliente solicita un fichero (página Web) al servidor
w Respuesta: el servidor envía el fichero (página Web) en el cuerpo de la

respuesta

n otros ….

12

© Juan Quemada, DIT, UPMJuan Quemada, DIT, UPM Formato

✦Mensajes (solicitud o respuesta): constan de Cabecera y Cuerpo.
✦Cabecera: string formado por 1a linea y parámetros. Acaba con una línea en blanco (\n\n).
-Primera línea de la solicitud: incluye el método, la ruta o path que identifica el recurso
en el servidor y la versión de HTTP utilizada por el cliente.
-Primera línea de la respuesta: incluye versión HTTP del servidor, código y un mensaje
de texto explicativo de la respuesta.
-Parámetros de la cabecera: Cada parámetro es un string con el formato: Nombre: valor,
que ocupa una línea (acaba con \n).

✦Cuerpo: incluye el recurso enviado que puede ser de cualquier tipo, p.e. string, imagen, .…

Solicitud

1a linea

Parámetros
de cabecera

Cuerpo

GET /dir/me.htm HTTP/1.1\n
Host: upm.es\n
Accept: text/*, image/*\n
Accept-language: en, sp\n

........

User-Agent: Mozilla/5.0\n
\n

Método GET, recurso, versión-HTTP 1.1

Host: identifica el servidor, se incluye porque el
circuito TCP no es extremo a extremo
Accept: tipos MIME de recursos aceptados
Accept-language: lenguajes del cliente
Acaba con linea en blanco: \n\n

GET: NO incluye cuerpo en la solicitud

Respuesta

1a linea

Parámetros
de cabecera

Cuerpo

HTTP/1.1 200 OK\n
Server: Apache/1.3.6\n
Content-type: text/html\n

..........

Content-length: 608\n
\n
<html> …….. </html>

Versión HTTP 1.1, 200 (todo ok), mensaje

Content-type: tipo MIME de recurso, text/
html es el tipo de una página Web
Content-length: número (decimal) de octetos
Acaba con linea en blanco: \n\n

página HTML (recurso)

13

© Juan Quemada, DIT, UPM Ejemplo:
Interacción HTTP GET

1a linea

parámetros
de cabecera

Solicitud HTTP GET
GET /me.htm HTTP/1.1
Host: upm.es
Accept: text/*, image/*
Accept-language: en, sp

........

User-Agent: Mozilla/5.0

Cuando el servidor recibe la solicitud GET
n Responde con los siguientes parámetros

Cuerpo

w Envía el código “200 OK” cuando devuelve al cliente el fichero solicitado en el cuerpo de la solicitud
w El parámetro “Content-Type: text/html” indica el tipo MIME del recurso enviado
w El parámetro “Content-length: 608” indica el número de octetos del cuerpo

n Sino, responde con mensajes de error

La extensión del fichero genera su tipo MIME
n xx.htm y xx.html -> text/html
n xx.gif -> image/gif
n xx.css -> text/css
n …..

Respuesta HTTP GET

1a linea

parámetros
de cabecera

HTTP/1.1 200 OK
Server: Apache/1.3.6
Content-type: text/html
Content-length: 608

..........

Cuerpo:

<html> …….. </html>

w ver: http://webdesign.about.com/od/multimedia/a/mime-types-by-file-extension.htm

El navegador interpreta el recurso de acuerdo al tipo MIME recibido
n el navegador muestra el código HTML si una página HTML lleva el tipo “text/plain”

w En vez de el tipo mime “text/html”, que es el tipo que debería llevar

14

© Juan Quemada, DIT, UPMJuan Quemada, DIT, UPM © Santiago Pavón - UPM-DIT

Códigos Respuestas HTTP

Respuestas informativas (1xx)
n 100 Continue // Continuar solicitud parcial
Solicitud finalizada (2xx)
n 200 OK // Operación GET realizada satisfactoriamente, recurso servido
n 201 Created // Recurso creado satisfactoriamente con POST, PUT
n 206 Partial Content // para uso con GET parcial
Redirección (3xx)
n 301 Moved Permanently // Recurso se ha movido, cliente debe actualizar el URL
n 303 See Other // Envía la URI de un documento de respuesta
n 304 Not Modified // Cuando el cliente ya tiene los datos
Error de cliente (4xx)
n 400 Bad request // Comando enviado incorrecto
n 404 Not Found // Recurso no encontrado, no hay ningún fichero con ese path
n 405 Method Not Allowed // Método no permitido, p.e. se solicita método POST, PUT, ….
n 409 Conflict // Existe conflicto con el estado del recurso en el servidor
n 410 Gone // Recurso ya no esta
Error de Servidor (5xx)
n 500 Internal Server Error // El servidor tiene errores, p.e. error lectura disco, ….

16

© Juan Quemada, DIT, UPM Tipos MIME

Tipo