Comprendre l'environnement web

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

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.

• 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

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.

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▲

http://www.developpez.com/mapage.php?nom=eric&age=30

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

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

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

I-C-3-b. Le serveur informe le client▲

var nom = ‘eric' ;
var age = 30 ;

<script language="javaScript" type="text/javascript">
<?php
echo "var nom = " . $nom . "\n";
echo "var age = " . $age . "\n";
?>
</script>

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.

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