Les
principes du "remote scripting"
Au lieu de recharger la page web à chaque intéraction avec le serveur, il est possible d'effectuer des appels de scripts "distants" au sein, par exemple, d'un élément IFRAME. Introduction à la technique du "remote scripting".
L'un des principaux défauts du protocole HTTP est la nécessité,
en cas d'intéractions complexes (le paiement en ligne, par
exemple, ou un processus d'identification) entre le client (le navigateur)
et le serveur, de créer une série de pages web séparées,
chaque page étant dédiée au traitement d'une
requête envoyée au serveur. Pour l'utilisateur, l'approche
est également imparfaite, car le chargement (ou l'actualisation)
des pages est source de ralentissement, d'une part, et surtout d'interruption
de la continuité de l'application mise en place.
Il est pourtant possible de s'affranchir du chargement (ou de l'actualisation)
d'une page lorsque le client communique avec le serveur. C'est le
principe du "remote scripting", que l'on peut traduite
par "appel de scripts distants", sans que cette dénomination
ne décrive très bien la réalité de la
technique: il faut la comprendre comme l'analogue web des (ou tout
du moins une forme d') appels de procédures à distance
(RPC), où une "procédure distante" (dans
notre cas, sur le serveur web) s'éxécute de manière
transparente (dans notre cas, sans recharger ou actualiser la page)
pour l'utilisateur.
La méthode
Pour mettre en oeuvre du "remote scripting", il faut bien
sûr, côté client, un peu plus que le "simple"
langage HTML: on utilisera ainsi, par exemple, le JavaScript. La
méthode comporte donc l'inconvénient de reposer sur
l'activation (ou plutôt la non désactivation) de ce
langage par l'utilisateur dans les paramètres de son navigateur.
Notons qu'il est aussi possible de reposer sur d'autres techniques,
notamment les applets Java, les contrôles ActiveX, ou encore
les animations Flash et bien sûr XML-RPC et le protocole SOAP.
Dans la suite de cet article, nous allons tirer profit de l'élément
IFRAME, partie intégrante des spécifications HTML
depuis la version 4 du langage, et correctement implémenté
par la plupart des navigateurs récents. Notre IFRAME fonctionnera
en conjonction avec un script côté serveur, et du code
JavaScript côté client.
La technique est la suivante: nous allons définir un élément
IFRAME "invisible", faisant appel à un fichier
HTML "fantôme", de la manière suivante:
<IFRAME name="RemoteScripting"
width="0" height="0" border="0"
src="blank.html">
</IFRAME>
Le fichier "blank.html" n'a en général
pas besoin d'exister réellement. Pour être parfaitement
rigoureux, vous pouvez néanmoins le créer en y insérant
seulement le code <HTML></HTML> (par exemple).
On réalisera ensuite l'appel de procédure à
distance en envoyant des données de formulaire à un
script dont le code HTML produit en sortie est dirigé vers
notre IFRAME:
<FORM action="process.php" target="RemoteScripting"
method="POST">
Dans notre fichier process.php, nous traiterons les données
transmises par la requête HTTP associée à la
soumission du formulaire.
Où intervient le Javascript? Il va nous permettre d'afficher
le résultat du script "process.php" hors
de l'élément IFRAME.
Exemple
Pour être plus clair, prenons l'exemple suivant: nous transmettons,
via un formulaire dirigé vers un élément
IFRAME, deux valeurs à un script php qui en fait la somme.
Ce script contient en outre du code JavaScript qui va faire appel
à une fonction définie dans notre page web initiale
(celle qui contient l'élément IFRAME).
Cette fonction sera définie comme suit (entre les balises
<HEAD>...<SCRIPT language="JavaScript"> et
</SCRIPT>...</HEAD>):
function TraiteReponse(valeur){
document.getElementById("AfficheReponse").innerText=valeur;
}
(Cette fonction modifie dynamiquement le contenu "texte"
à l'intérieur des balises dont l'identifiant est "AfficheReponse")
tandis que, au sein de "process.php", on écrira
(la page web contenant l'élément IFRAME vers laquelle
est dirigé le code HTML en sortie du script étant
la "fenêtre parente" de la "fenêtre IFRAME"):
<script language="JavaScript">
window.parent.TraiteReponse('<? echo $valeur?>');
</script>
où $valeur est une variable PHP qui contient le résulat
de la somme des deux valeurs transmises par le formulaire suivant,
défini dans notre page web initiale:
<FORM action="/exemples/process.php"
method="POST" target="RemoteScripting">
Entrer un premier nombre: <INPUT type="text" name="nb1"
size="5"><BR>
Entrer un deuxième nombre:<INPUT type="text"
name="nb2" size="5"><BR>
<INPUT type="submit" value="ok" name="submit">
</FORM>
Ainsi, "process.php" contiendra les lignes:
<?
$valeur=$nb1+$nb2;
?>
(et le code JavaScript mentionné plus haut)
Enfin, on repèrera, dans notre page web initiale,
l'élément HTML dont on modifie le contenu "texte"
en fonction de la réponse du serveur. Par exemple, on écrira:
Somme: <div id="AfficheReponse"></div>
Le résultat est alors le suivant:
Si l'on récapitule, l'ensemble du code donné plus
haut figure dans la page web qui contient l'élément
IFRAME. Ce code se compose de:
- la fonction JavaScript "TraiteReponse()"
- le formulaire
- l'élément IFRAME
- la balise dont l'identifiant est "somme"
Dans "process.php" (le fichier côté
serveur), on a le code:
<?
$valeur=$nb1+$nb2;
?>
<script language="JavaScript">
window.parent.TraiteReponse('<? echo $valeur?>');
</script>
L'exemple donné est très simple, et peut être
programmé sans passer par un script PHP, mais directement
en JavaScript. Si les traitements sont beaucoup plus complexes (appel
à une base de données, etc.), l'approche par "remote
scripting" et éléments IFRAME devient pertinente,
et la méthode sera la même que celle décrite
plus haut. Seul le code PHP (et non le code JavaScript) du fichier
"process.php" changera (ainsi que, bien sûr,
les éléments de formulaire à transmettre).
Notons pour finir que notre méthode peut causer certains
problèmes lorsque l'utilisateur appuie sur les boutons "Précédent"
et "Actualiser" de son navigateur. La solution réside
dans la création de l'élément IFRAME non plus
dans le code HTML mais via le code JavaScript (de la page
initiale). Un exemple illustrant la puissance du "remote scripting"
ET la création d'un élément IFRAME via
Javascript peut être consulté à l'URL suivante:
http://www.oreillynet.com/javascript/2002/02/08/examples/load_static.html
[Jérôme
Morlon, 19 mars 2001
, JDNet]
|