C'est quoi le Web ?§
En quelques mots§
- Son vrai nom : World Wide Web
- Assemblage de technologies diverses (standards)
- Une des applications d'Internet (citez en 4 autres)
- Ensemble hyperdocumentaire (réseau de documents) public
- Basé sur HTTP (HyperText Transport Protocol)
- Accès aux documents par leurs adresses (URL)
- Représentation des données pour l'humain (HTML) ou les machines (XML/JSON)
Architecture Client Serveur§
- Ressource : document, image, vidéo... publiés sur le Web
- Serveur : ordinateur connecté à internet sur lequel se trouvent des ressources
- Client : appareil (ordinateur, tablette,...) utilisé pour accéder à ces ressources
Note
Différents rôles : le client initie l'exécution d'une opération fournie par le serveur (!= pair à pair)
Les Technologies§
URLs§
- Uniform Resource Locator (STD 66)
- Structure:
NB: les URLs sont parfois appelés URIs -> Plus générique, URL = URI particulière
HTML§
- HyperText Markup Language (HTML)
- Standard de description des documents sur le Web
- Langage statique décrivant la structure des pages
- Peut être combiné avec CSS pour la gestion des styles
HTTP§
- HyperText Transfer Protocol (RFC 2616)
- Protocole d'échange de données entre machines
- Utilisé par les clients pour communiquer avec les serveurs
Les Requêtes HTTP§
Une requete HTTP contient :
- Le type d'échange => VERBE HTTP (GET, POST, ...)
- Spécifie l'adresse => URL
- Transmet des informations à propos du client => HEADER
- Transmet éventuellement des données => BODY
Construction d'une requête§
Une requête est construite comme suit:
[VERBE] [URL] [PROTOCOLE]
/* En-tetes */
[TYPE1]:[VALEUR1]
[TYPE2]:[VALEUR2]
...
/*Ligne vide*/
/* Corps de la requête */
[BODY]
Les Verbes HTTP§
- Sémantique définissant le type d'échange
- GET : Récupère une représentation de la ressource
- HEAD : Récupère seulement l'en-tête de la ressource
- POST : Création d'une sous-ressource de l'URL spécifiée
- PUT : Modification de la ressource à l'URL (warning: création si elle n'existe pas)
- DELETE : Suppression de la ressource
NB : Une application qui respecte cette sémantique est appellée RESTful
Exemple d'une requête§
GET / HTTP/1.1
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64)
Gecko/20100101 Firefox/40.0
Accept: text/html
Accept-Language: en-US
Connection: keep-alive
NB:Ces en-têtes contiennent de précieuses informations pour le serveur
Réponse du serveur§
La réponse du serveur à une requête est similaire:
- Statut de réponse
- En-têtes de réponses
- Corps de la réponse
Statut de réponse HTTP§
Le statut de réponse HTTP informe du statut de la requête (Liste des codes):
- 1xx : En attente
- 2xx : Succès
- 3xx : Redirection
- 4xx : Accès refusé
- 5xx : Erreur serveur
Quelques codes usuels :
200 OK, 301 Moved Permanently, 404 Not found, 418 I’m a teapot, 501 Internal error
Construction de réponse§
[PROTOCOLE] [CODE] [SIGNIFICATION]
/* En-tetes */
[ENTETE1]: [VALEUR1]
[ENTETE2]: [VALEUR2]
...
/*Ligne vide*/
/* Contenu de la requête */
[CONTENU]
Exemple de réponse§
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1245
Last-Modified: Tue, 04 Aug 2015 10:25:13 GMT
<html><body> Corps du document ... </body><html>
Navigateur : outils de développement§
Il est possible de voir le détail des requêtes dans le navigateur
- Ouvrez une page web
- Ouvrez l'interface développeur "Network" de votre navigateur
- Firefox : Ctrl + Maj + Q
- Chrome : Ctrl + Maj + I
- IE: Outils > Outils de développement
- Safari : Ctrl + Alt + I
- Actualisez la page (F5) et observez les différentes requêtes effectuées par le navigateur
Navigateur : outils de développement§
- Ouvrez un terminal
- Tapez
curl -v http://teaching.leo-letaro.fr- Comment ajouter des en-têtes à la requête ?