[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > AJAX et l'échange de données en JavaScript > Les techniques AJAX > Dynamic Script Loading > Lecture du tutoriel

Dynamic Script Loading

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Sommaire du chapitre :

Introduction
Première approche
Avec des variables et du PHP
Un code plus propre
DSL et le format JSON
Charger un objet JSON statique
Charger un objet JSON dynamique
Conclusion

Introduction

Une alternative assez intéressante à l'utilisation de l'objet XMLHttpRequest est peut-être le Dynamic Script Loading, ou le chargement dynamique de script en français.

La technique est assez simple : on créer un élément <script /> dont la source pointe vers un fichier dynamique (PHP, ASP...), identifié comme étant un fichier JavaScript, qui va recevoir des variables, les traiter et renvoyer des données sous forme de code JavaScript. Ces données pourront être utilisées par la page d'origine. Il n'est pas possible avec cette méthode de récupérer du code XML (pour cela, voyez l'implementation DOM), mais seulement du code JavaScript. Ce code JavaScript peut contenir des variables, des fonctions ou des objets qui contiennent des données. Cette technique est donc adaptée pour récupérer des données au format JSON par exemple (car on n'aura pas besoin d'utiliser eval).

Avant de travailler avec le code PHP, on va travailler avec un fichier JS normal.

Première approche

On va faire quelque chose de très simple pour commencer : on va créer un élément <script /> qui appellera un fichier JS et celui-ci qui répondra avec un alert. C'est basic, mais il faut que vous compreniez la base avant d'aller plus loin.

Voici tout d'abord le script qui permet de créer un nouvel élément, via le DOM, dans une page HTML :

Code : JavaScript

var oScript =  document.createElement("script");
oScript.src = "DynamicScriptLoading_1.js";
oScript.type = "text/javascript";
document.body.appendChild(oScript);

Ce script crée et insère un élément <script /> avec un attribut src pointant vers la page JS (DynamicScriptLoading_1.js dans mon exemple), dans le body de la page HTML.

Ce petit bout de code, une fois placé appelle le fichier JS exactement comme si l'élément <script /> avait été écrit en HTML. Le script contenu ce fichier JS est alors exécuté.

On va ajouter une fonction, appelée callback qui sera appelée par le fichier JS dès que ce dernier est chargé. C'est en quelque sorte la réponse que le script de départ attend.

Code : JavaScript

1
2
3

function callback(sMessage) {
        alert(sMessage);
}

Le fichier JS (DynamicScriptLoading_1.js) contient juste l'appel de cette fonction :

Code : JavaScript

1	callback("Bonjour, bonjour :) ");

En clair, on obtient quelque chose comme ça :

Code : JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Script Loading</title>
<script type="text/javascript">
<!--
        function send() {
                var oScript = document.createElement("script");
                oScript.src = "DynamicScriptLoading_1.js";
                oScript.type = "text/javascript";
                document.body.appendChild(oScript);
        }
        
        function callback(sMessage) {
                alert(sMessage);
        }
//-->
</script>
</head>
<body>
<input type="button" value="Envoyer la requ&ecirc;te" onclick="send()" />
</body>
</html>

Test du code

Dès qu'on clic sur le bouton, la fonction send() est appelée. Cette dernière ajoute un élément <script /> lequel va charger un fichier JavaScript. Et pour finir, ce fichier JavaScript va appeler la fonction callback.

Je pense que vous avez compris le principe de base. On va pouvoir ajouter des variables et du PHP

Avec des variables et du PHP

Maintenant, au lieu d'appeler un fichier JS, nous allons appeler une page PHP. PHP, comme vous le savez, permet de récupérer des variables transmises via l'URL (méthode GET). C'est ce que nous allons faire !

La transmission des variables se fait comme à l'accoutumée :

Code : JavaScript

1	DynamicScriptLoading_2.php?variable1=valeur1&variable2=valeur2

Le script JS ne change presque pas. Ajouter simplement deux variables dans l'URL à placer dans l'élément <script /> :

Code : JavaScript

1	oScript.src = "DynamicScriptLoading_2.php?Pseudo=Thunderseb&Prenom=Sebastien";

Pour ce qui est de la page PHP, c'est un peu plus « spécial », la voici :

Code : PHP

<?php
        header("Content-type: text/javascript");
?>
 
var sMessage = "Bonjour <?php echo $_GET['Prenom']  ?>,  alias <?php echo  $_GET['Pseudo'] ?> !";
                
callback(sMessage);

L'instruction header permet d'identifier le fichier comme contenant du code JavaScript.

Gardez à l'esprit que c'est « comme » un fichier JavaScript, donc, tout ce qui n'est pas dans des balises <?php ?> est du code JavaScript !
Le code PHP peut être placé n'importe où, exactement comme si vous le placiez dans une page HTML, ce qui permet d'incorporer dans le code JavaScript.

Un code plus propre

Le code que je vous ai donné n'est pas super pratique à utiliser. Le mieux serait d'en faire des fonctions facilement déployables, acceptant un certain nombre de variables, une fonction de callback différente (qu'on ne soit pas obligé de l'appeler « callback »)?

Voici une fonction send générique :

Code : JavaScript

function send(sUrl, oParams) {
        for(sName  in oParams) {
                if(sUrl.indexOf("?")  != -1) {
                        sUrl  += "&";
                }  else {
                        sUrl  += "?";
                }
                sUrl  += encodeURIComponent(sName) + "=" +  encodeURIComponent(oParams[sName]);
        }
 
        var oScript  = document.createElement("script");
        oScript.src = sUrl;
        oScript.type = "text/javascript";
        document.body.appendChild(oScript);
}

La fonction send reçoit, en plus de l'URL du fichier à charger, les variables à transmettre (c'est-à-dire à concaténer dans l'URL). L'argument oParams est un objet contenant une liste de clés/valeurs utilisant la notation JSON, comme ceci :

Code : JavaScript

var oParams = {
        "Pseudo":  "Thunderseb",
        "Prenom":  "Sebastien",
        "callback":  "messageFromServer"
};

La valeur de la clé callback est tout simplement le nom de la fonction de callback à déclencher une fois la page PHP chargée. La notation JSON vous paraît peut-être étrange, mais c'est pratique pour transmettre une liste du type clé/valeur en une seule fois.

Et pour parcourir une telle structure, on utilise une boucle for associée au mot clé in, comme pour lister un tableau associatif.
La fonction globale encodeURIComponent permet de coder les caractères spéciaux, pour ne pas avoir de problèmes lors de la transmission.

Le script de la page PHP peut alors être transformé de cette façon, de manière à appeler la fonction de callback (dont le nom est transmis dans la variable $_GET['callback']);

Code : PHP

<?php header("Content-type: text/javascript"); ?>
                
var sMessage = "Bonjour <?php echo  $_GET['Prenom'] ?>s  alias <?php  echo $_GET['Pseudo'] ?> !";
                
<?php echo $_GET['callback'] ?>(sMessage);

Et voilà, on a fait le tour de cette méthode

. Elle est pratique, rapide et facile à déployer, mais comporte cependant un certain nombre de limitations. Par exemple, on ne sait utiliser que des requêtes GET, et non POST. Il n'y a non plus aucun moyen de savoir si la transmission s'est bien déroulée : si la page a renvoyé une erreur 404, on ne le sait pas.

On va maintenant voir une autre méthode basée sur le chargement d'images et l'enregistrement de cookies. Nous réglerons alors le deuxième problème, mais nous en créerons un autre, dû aux limitations de l'utilisation des cookies.

DSL et le format JSON

JSON, ou JavaScript Object Notation est un format de structuration de données, un peu comme le XML. Mais la syntaxe est identique à la syntaxe objet de JavaScript. Ce tutoriel n'était pas un tutoriel de JSON, je ne reviendrai pas sur la structure du format.

Comme l'illustre l'exemple ci-dessus, il est très facile de récupérer une variable, et cette variable peut très bien être un objet JSON. Deux avantages de l'importation d'un objet JSON via Dynamic Script Loading peuvent être les suivants :

Facilité de mise en place
L'objet récupéré est de type object, et de type string. Il n'y a donc pas besoin d'utiliser eval pour parser la chaine de caractères, ce qui est plutôt bénéfique. Eval is evil.

Charger un objet JSON statique

Tout d'abord, voici un exemple de code JSON, que je vais placer dans un fichier .js (ou .json, ça revient au même) :

Code : JavaScript - JSON

var oSoftwares = {
        "Adobe": [
                "Acrobat",
                "InDesign",
                "Photoshop"
        ],
        "Macromedia": [
                "Dreamweaver",
                "Flash",
                "FreeHand"
        ],
        "Microsoft": [
                "Office",
                "Visual C++"
                "Windows Media Player"
        ]       
};
 
callback(oSoftwares);

Test du code

La fonction callback va donc servir à récupérer l'objet JSON oSoftwares. Il suffira ensuite de traiter ces données et de les afficher. Voici donc ma fonction callback :

Code : JavaScript

function callback(oJson) {
        var tree = "";
        
        for(sItem in oJson) { 
                tree += sItem + "\n";
                var nbItems = oJson[sItem].length;
                for(var i=0;i<nbItems;i++) {
                        tree += "\t" + oSoftwares[sItem][i] + "\n";
                }
        }
        
        alert(tree);
}

Bien évidemment, il n'y a pas besoin de faire appel à la fonction send compliquée vue ci-dessus, puisque je ne souhaite pas envoyer de variables au fichier JavaScript.

Voici donc le code complet de l'exemple :

Code : JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />                      
<title>Techniques AJAX - Dynamic Script Loading - JSON Statique</title>
<script type="text/javascript">
<!--
        function send(sUrl) {
                var oScript = document.createElement("script");
                oScript.src = "DynamicScriptLoading_JSON_1.js";
                oScript.type = "text/javascript";
                document.body.appendChild(oScript);
        }
        
        function callback(oJson) {
                var tree = "";
 
                for(sItem in oJson) { 
                        tree += sItem + "\n";
                        var nbItems = oJson[sItem].length;
                        for(var i=0;i<nbItems;i++) {
                                tree += "\t" + oSoftwares[sItem][i] + "\n";
                        }
                }
 
                alert(tree);
        }
        
        function getInfo() {
                send("DynamicScriptLoading_JSON_1.js");
        }
//-->
</script>
</head>
<body>  
<p>
        <input type="button" value="R&eacute;cup&eacute;rer les donn&eacute;es" onclick="getInfo();" />
</p>
</body>
</html>

Test du code

Charger un objet JSON dynamique

Il n'y a rien de bien compliqué non plus. La différence avec le code précédent est que la page appelée est une page PHP qui renvoie du code JavaScript, dont voici le code :

Code : PHP

<?php 
 
header("Content-type: text/javascript"); 
 
echo 'var oSoftwares = {
        "Adobe": [
                "Acrobat",
                "InDesign",
                "Photoshop"
        ],
        "Macromedia": [
                "Dreamweaver",
                "Flash",
                "FreeHand"
        ],
        "Microsoft": [
                "Office",
                "Visual C++",
                "WMedia Player"
        ] 
};';
 
echo $_GET['callback'] ?>(oSoftwares);

Et voici le fichier HTML. Pour différer un tantinet de l'exemple précédent, j'ai incorporé le script de gestion avec les variables, c'est plus distrayant :

Code : JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />                      
<title>Techniques AJAX - Dynamic Script Loading - JSON Dynamique</title>
<script type="text/javascript" src="oDynamicScriptLoading.js"></script>
<script type="text/javascript">
<!--
        function callback(oJson) {
                var tree = "";
 
                for(sItem in oJson) { 
                        tree += sItem + "\n";
                        var nbItems = oJson[sItem].length;
                        for(var i=0;i<nbItems;i++) {
                                tree += "\t" + oSoftwares[sItem][i] + "\n";
                        }
                }
 
                alert(tree);
        }
 
        function getInfo() {
                var oParams = { "callback": "callback" }; 
                sendDSL("DynamicScriptLoading_JSON_2.php", oParams);
        }
//-->
</script>
</head>
<body>  
<p>
        <input type="button" value="R&eacute;cup&eacute;rer les donn&eacute;es" onclick="getInfo();" />
</p>
</body>
</html>

Test du code

Conclusion

Le Dynamic Script Loading est donc un moyen simple et efficace de récupérer des données sous forme de variables (données textuelles) et d'objets JavaScript (données formatées en JSON).

Points forts

Facilité de mise en place
Intégration parfaite avec les données JSON

Points faibles

Un peu tordu à utiliser
Limité à du texte et à du JSON. On peut récupérer aussi des données XML, mais ça implique des méthodes de création avec DOMImplementation (ce qui est assez inutile)
Seulement des requêtes GET

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité