Newsletter Developpez.com

Inscrivez-vous gratuitement au Club pour recevoir
la newsletter hebdomadaire des développeurs et IT pro

Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :


Comprendre l'environnement web

Date de publication : 28/06/2006 , Date de mise à jour : 28/06/2006

Par Eric Berger (domaine à créer)
 

aaa


I. Comprendre l'environnement web
I-A. Introduction
I-B. Chargement d'une page statique
I-B-1. Fonctionnement
I-C. Chargement d'une page dynamique
I-C-1. Définition
I-C-2. Fonctionnement
I-C-3. Chronologie
I-C-3-a. Le client informe le serveur
I-C-4. Le serveur informe le client
I-D. Optimiser les rechargements de pages
I-E. Ajax
I-E-1. Fonctionnement
I-E-2. Côté serveur
II. Conclusion


I. Comprendre l'environnement web


I-A. Introduction

Pour pouvoir développer correctement un site internet dynamique ou une application web, il est indispensable de bien comprendre comment fonctionnent les différents éléments entre eux (client/serveur) ce que chacun peut et ne peut pas faire, à quel moment l'un ou l'autre intervient, et les limitations qui en résultent.


I-B. Chargement d'une page statique

Voilà qui peut sembler trivial, mais étant donné que les systèmes plus complexes s'appuient sur celui-ci, un petit rappel n'est peut-être pas superflu.


I-B-1. Fonctionnement

Le chargement d'une page web est déclenché par une requête http envoyée par le navigateur, depuis le client (le client étant l'ordinateur depuis lequel on souhaite afficher la page web). Cette requête peut avoir été déclenchée par un clic sur un lien, l'ouverture du navigateur (chargement de la page par défaut) ou encore par le navigateur lui-même, si la page active demande à être rechargée ou redirigée après un certain délai.

Durant le chargement d'une page, le navigateur sera amené à envoyer d'autres requêtes http, notamment pour le chargement de feuilles de styles, scripts (JavaScript/JScript), images, ou objets tels que Flash ou applets Java.

Le serveur, s'il a pu être contacté, reçoit la requête http qui ressemble à ceci :
GET http://www.developpez.com HTTP/1.0 
Accept : text/html
If-Modified-Since : Friday, 16-June-2006 12:43:32 GMT 
User-Agent : Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv:1.8) Gecko/20051107 Firefox/1.5
S'il trouve le fichier html demandé, le serveur le renvoie vers le client, le navigateur récupère le fichier.

A ce stade, le navigateur a récupéré le fichier html, il lui reste à l'interpréter. Concrètement, le fichier est lu de haut en bas, ça peut paraître évident mais cela signifie par exemple que dans un script JavaScript, des instructions hors fonctions qui seront donc exécutées immédiatement, ne pourront accéder à des éléments de la page se trouvant plus bas car ils n'auraient à cet instant pas encore été chargés.

En chargeant la page, le navigateur va transformer l'arborescence HTML en une arborescence d'objets portant le nom de DOM pour Document Object Modell.

A partir du moment où la page est chargée, il n'est plus possible d'agir sur la page en manipulant le code html, par exemple avec document.write(). Il faudra aller directement modifier les propriétés du DOM, c'est ce que l'on appelle DHTML.


I-C. Chargement d'une page dynamique


I-C-1. Définition

Une page web dynamique est une page qui est construite en fonction du contexte à l'aide d'un langage exécuté côté serveur. Le contexte peut être défini par toutes sortes d'informations issus d'une session, d'un cookie, de l'état du serveur, de l'heure, du type de navigateur et j'en passe, tout peut être sujet à agir sur une page dynamique.

Les principaux systèmes permettant de créer des pages dynamiques sont les suivants :

  • JSP/Servlet : Java Server PagesMoteur de pages dynamiques de Sun, en JavaSur serveur Tomcat, (d'autres ?), ainsi que tous les serveurs d'application Java tels que Jboss, websphere, ou sun application server.
  • ASP.net : Active Server PagesLangage de la plateforme .net de MicrosoftUniquement sur serveur IIS (à confirmer)
  • PHP : Pre HyperTexte ProcessorProjet open source dont l'évolution a été prise en charge par la société ZendInstallable sur de nombreux serveurs web, notamment Apache et IIS
JSP/Servlet : Java Server PagesMoteur de pages dynamiques de Sun, en JavaSur serveur Tomcat, (d'autres ?), ainsi que tous les serveurs d'application Java tels que Jboss, websphere, ou sun application server.


I-C-2. Fonctionnement

Lorsque le serveur web reçoit une requête concernant une page dynamique, il la sous-traite au processeur de pages dynamiques concerné. Il peut s'agir d'un module interne du serveur web ou d'un serveur indépendant. Dans le cas des serveurs d'application Java, c'est généralement le serveur web qui est un module du serveur d'applications.

Le serveur web attend en retour le flux du résultat qu'il retransmet aussitôt au client.


I-C-3. Chronologie

En aplatissant le précédent schéma, on a une meilleure vision de la chronologie des événements. En y ajoutant les langages qui peuvent être utilisés à chaque étape, on voit apparaître certaines limitations sur les moyens qu'ont ces langages pour se passer des informations.


I-C-3-a. Le client informe le serveur

Analysons de quelle façon JavaScript peut envoyer de l'information à un langage serveur (PHP/ASP/JSP) et inversement.

A l'instant où l'on clique sur un lien ou lorsqu'on valide un formulaire, on peut intercepter l'action en invoquant une fonction JavaScript. Pour transmettre une information au script du côté serveur, le script JavaScript peut, dans le cas d'un lien, modifier l'url qui va être demandée en y ajoutant des couples paramètre/valeur, par exemple :
http://www.developpez.com/mapage.php?nom=eric&age=30
A faire :Exemple de script
C'est entre-autre ces informations qui vont être à même de modifier le contexte abordé plus haut dans ce document. Le script côté serveur sera à même de récupérer une variable nom dont la valeur est eric et une variable age dont la valeur est 30.

Si la page est demandée en postant un formulaire, il est également possible, à l'aide de JavaScript, d'ajouter des informations qui pourront être récupérées par un langage côté serveur. Il faudra ajouter des champs input de type hidden au formulaire. Dans ce cas, soit on a prévu le champ à l'avance et il figure déjà dans le code html de la page, il suffira donc de modifier la valeur du champ. Sinon, il faudra créer le champ dans le DOM.
A faire :Exemple de script
Les informations se récupèrent de façon similaire dans les deux cas. La méthode d'envoi des informations (GET ou POST) amène toutefois quelques petites différences.


I-C-4. Le serveur informe le client

Le principal travail du processeur de pages dynamiques est de construire une page HTML qui correspond au contexte actuel. Cette page peut contenir (ou inclure) des scripts JavaScript, mais ces scripts ne peuvent être exécutés durant la construction de la page, JavaScript étant un langage client.

Comme un script serveur et un script JavaScript ne peuvent interagir directement, le script serveur devra laisser des informations pour le script JavaScript. Pour ce faire, on va ajouter du code source JavaScript depuis le langage serveur, comme on le fait pour le code HTML, par exemple, à l'intérieur d'une balise <script> :
var nom = ‘eric' ;
var age = 30 ;
A faire :Exemple de script

I-D. Optimiser les rechargements de pages

Il est important de limiter les rechargements de la page aux cas de figure nécessaires.

Pour ce faire, un script serveur peut ajouter des informations qui ne seront pas utiles immédiatement à l'utilisateur, mais qui le seront certainement plus tard.

Un exemple classique est le contenu de sous-menus de navigation. Par défaut, seuls les éléments principaux du menu, ainsi que le sous-menu de la partie du site dans laquelle on se trouve sont affichés. En envoyant le contenu de tous les sous-menus systématiquement (à condition que la quantité d'informations soit raisonnable), et en cachant les sous-menus qui doivent être fermés, on aura la possibilité de les afficher sans recharger la page.

Dans l'autre sens, on peut récolter plusieurs informations de la part du client, par exemple renseigner une liste nom/âge en y ajoutant plusieurs entrées. Ces informations peuvent être conservées du côté client soit dans un tableau JavaScript, soit dans le dom, ce qui permet d'afficher pour l'utilisateur les données en attente d'envoi vers le serveur.

Il faut toutefois être conscient que les données qui n'auraient pas été transmises au serveur seraient perdues si l'on fermait le navigateur avant de les envoyer. Il faut donc choisir une limite raisonnable de données qui peuvent être introduites sans les transmettre directement au serveur. Pour pousser le raisonnement plus loin, on peut même se demander si le gain de charge serveur et le gain de temps pour l'utilisateur justifient le développement d'un tel mécanisme. Enfin bon, c'est bien de savoir que c'est possible, on choisira ensuite la solution la mieux adaptée à un contexte donné.


I-E. Ajax

Ce document n'aurait pas été complet sans un mot sur le petit dernier, Ajax, abréviation de la dénomination barbare « Asynchronous JavaScript & XML ». En deux mots, Ajax permet d'éviter les petites pirouettes du paragraphe précédent, il permet au client de discuter avec le serveur sans recharger la page active.


I-E-1. Fonctionnement

Le processus est déclenché depuis une fonction JavaScript qui va établir une connexion avec le serveur et lui envoyer un flux, généralement au format XML, bien que rien n'interdise d'envoyer des information dans d'autres formats. Le serveur, une fois qu'il a traité la demande, signale au client qu'il est prêt. Dès lors, depuis JavaScript, on peut demander le résultat au serveur et l'utiliser pour modifier la page, qui n'a pas été rechargée durant ce processus.

Si on reprend nos deux exemples de tout à l'heure, le contenu des sous-menus fermés pourrait être demandé lorsque le menu en question est cliqué, moyennant un petit temps d'attente. Quand aux éléments de notre liste, ils pourraient être envoyés en arrière plan une fois leur saisie terminée, avec une information à l'écran une fois la ligne sauvegardée.


I-E-2. Côté serveur

Les trois processeurs de pages dynamiques évoqués dans cet article permettent de travailler avec la technologie Ajax. Les liens ci-dessous pointent vers les recommandations faites pour chacun des trois langages (pour PHP, je n'ai trouvé aucunes recommandations sur le site officiel)

Java ( http://java.sun.com/developer/technicalArticles/J2EE/AJAX/

PHP ( http://www.litfuel.net/mybic/

ASP ( http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/ASPNetSpicedAjax.asp


II. Conclusion

En ayant une bonne vision du déroulement d'un chargement de page web, il est plus aisé de comprendre ce que l'on peut faire, ce que l'on ne peut pas faire, et pourquoi. Lorsqu'on est confronté à une limitation, il est aussi plus facile de trouver si on peut la contourner et comment.

Un développement réussi c'est comprendre le besoin, connaître les possibilités, savoir choisir la plus adaptée, et bien-entendu la mettre en œuvre.



Valid XHTML 1.1!Valid CSS!

Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -