IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Comprendre l'environnement web

Les mécanismes de chargement de pages web cachent certaines restrictions mais offrent aussi des possibilités qui sont parfois ignorées. Cet article a pour vocation d'en donner un apercu.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 les interactions entre les différents éléments (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 dessus, un petit rappel n'est peut-être pas superflu.

I-B-1. Fonctionnement

Image non disponible

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 :

 
Sélectionnez
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 puis le navigateur récupère le fichier.

À 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 (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. 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.

Principaux systèmes permettant de créer des pages dynamiques
  • ASP.net : Active Server Pages, langage de la plateforme .NET de Microsoft. Uniquement sur serveur IIS (à confirmer)
  • JSP/Servlet : Java Server Pages. Moteur de pages dynamiques de Sun, en Java Sur serveur d'applications (Tomcat) et serveurs J2EE (JBoss, Websphere, Geronimo, Jonas, etc.).
  • PHP : Projet open source dont l'évolution a été prise en charge par la société Zend. Installable sur de nombreux serveurs Web, notamment Apache et IIS

I-C-2. Fonctionnement

Image non disponible

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 J2EE, c'est généralement le serveur Web qui est un module du serveur J2EE.

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.

Image non disponible
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'URI qui va être demandée en y ajoutant des couples paramètre/valeur, par exemple :

Résultat souhaité
Sélectionnez
http://www.developpez.com/mapage.php?nom=eric&age=30
 
Sélectionnez
<a href="mapage.php" onclick="addParams(this)">Lien vers ma page</a>

<script language="javaScript" type="text/javascript">
function addParams(obj){
	alert(obj.href)
	href = obj.href
	href += "?nom=eric&age=30"
	obj.href = href
}
</script>

Ce sont 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), soit il faudra créer le champ dans le DOM.

Si le champ existe déjà
Sélectionnez
<form onsubmit="addParamsForm(this)">
<input type="hidden" name="nom"/>
<input type="hidden" name="age"/>
</form>
<script language="javaScript" type="text/javascript">
function addParamsForm(obj){
	obj.elements["nom"].value = "eric"
	obj.elements["age"].value = 30
}
</script>
Si le champ n'existe pas encore
Sélectionnez
<form onsubmit="addParamsForm(this)">
<input type="submit"/>
</form>
<script language="javaScript" type="text/javascript">
function addParamsForm(obj){
	nom = document.createElement("INPUT")
	nom.setAttribute("type", "hidden")
	nom.setAttribute("name", "nom")
	nom.setAttribute("value", "eric")
	obj.insertBefore(nom, null)
	
	age = document.createElement("INPUT")
	age.setAttribute("type", "hidden")
	age.setAttribute("name", "age")
	age.setAttribute("value", "30")
	obj.insertBefore(age, null)
	return false
}
</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-3-b. 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> :

Résultat souhaité
Sélectionnez
var nom = ‘eric' ;
var age = 30 ;
 
Sélectionnez
<script language="javaScript" type="text/javascript">
<?php
echo "var nom = " . $nom . "\n";
echo "var age = " . $age . "\n";
?>
</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 sont affichés les éléments principaux du menu ainsi que le sous-menu de la partie du site dans laquelle on se trouve. 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 entièrement la page active.

I-E-1. Fonctionnement

Image non disponible

Le processus est déclenché depuis une fonction JavaScript qui va appeler une page dynamique en lui passant des paramtères (GET ou POST). Le serveur construit la réponse, en fonction des paramètres passés et la retourne au client. En général, la réponse est envoyée au format XML, bien qu'il n'y aie aucune contrainte sur le format (on peut retourner du texte, du HTML, une image, une séquence vidéo, etc.). Depuis JavaScript, on détecte lorsque le résultat a été reçu et on peut alors l'utiliser pour appliquer les modifications sur la page courante, 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 une petite latence qui n'empêche cependant pas de travailler sur d'autres parties de la page. 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.

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

PHP aucune recommandation

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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.