Aller au menu - Aller au contenu

Icône Dynamic Script Loading

Par Avatar Sébastien de la Marck (Thunderseb) et Avatar Johann Pardanaud (Nesquik69)
Mise à jour : 07/12/2010
Difficulté : Intermédiaire Intermédiaire
6 849 visites depuis 7 jours, dont 273 sur ce chapitre classé 33/786
Chapitre rédigé par Thunderseb

Compatibilité de la méthode
Image utilisateur
Méthode		Image utilisateur
Internet Explorer		Image utilisateur
Firefox		Image utilisateur
Opera		Image utilisateur
Google Chrome		Image utilisateur
Safari
Dynamic Script Loading
Oui
Oui
En partie
Obligation de charger un fichier .js
Oui
Oui
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Introduction

Javascript possède une propriété intéressante qui est celle de pouvoir charger un fichier .js à partir d'un autre et ce à n'importe quel moment. Ainsi il est possible de charger une autre page de script à partir d'une première en insérant un élément <script />, comme le montre cet exemple :

Code : HTML
1
2
3
4
5
<script type="text/javascript">
<!--
    document.write("<script type=\"text\/javascript\" src=\"external.js\"><\/script>");
//-->	
</script>


Javascript permet donc nativement, et depuis toujours, d'utiliser le principe de l'AJAX en appelant un fichier .js après que la page HTML a été chargée. Il est aussi possible d'appeler une page PHP, identifiée comme étant un fichier JS, ce qui permettra une bonne interaction avec le serveur. C'est ce que nous allons voir plus en détail ici.
Retour en haut

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 basique, mais il faut que vous compreniez la base avant d'aller plus loin.

Le script donné ci-dessus marche bien, mais utilise la vieille méthode write(), ce qui est plutôt déconseillée et qui de plus ne nous est pas d'un grand intérêt. Pour ajouter un élément <script />, nous allons utiliser le DOM :

Code : JavaScript
1
2
3
4
var DSLScript  = document.createElement("script");
DSLScript.src  = "DynamicScriptLoading_1.js";
DSLScript.type = "text/javascript";
document.body.appendChild(DSLScript);


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 "brut". Le script contenu dans 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 sera 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("Hello world !");


En clair, on obtient quelque chose comme ça :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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 DSLScript  = document.createElement("script");
		DSLScript.src  = "DynamicScriptLoading_1.js";
		DSLScript.type = "text/javascript";
		document.body.appendChild(DSLScript);
		document.body.removeChild(DSLScript);
	}
	
	function callback(sMessage) {
		alert(sMessage);
	}
//-->
</script>
</head>
<body>
<input type="button" value="Envoyer la requ&ecirc;te" onclick="send()" />
</body>
</html>


Dès qu'on clique 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.

Pourquoi y a-t'il un document.body.removeChild() ?


En réalité ce type de chargement n'est pas asynchrone. Lorsque l'élément <script /> est inséré via appendChild(), le fichier JS est chargé. Quand il est chargé, removeChild() est exécutée pour supprimer l'élément <script /> qui ne nous est plus d'aucune utilité.


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

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
DSLScript.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
1
2
3
4
5
6
<?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.
Retour en haut

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function send(sUrl, oParams) {
        for (sName  in oParams) {
                if (sUrl.indexOf("?")  != -1) {
                        sUrl  += "&";
                }  else {
                        sUrl  += "?";
                }
                sUrl  += encodeURIComponent(sName) + "=" +  encodeURIComponent(oParams[sName]);
        }
 
        var DSLScript  = document.createElement("script");
        DSLScript.src  = sUrl;
        DSLScript.type = "text/javascript";
        document.body.appendChild(DSLScript);
        document.body.removeChild(DSLScript);
}


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
1
2
3
4
5
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
1
2
3
4
5
<?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.

Cela dit, Dynamic Script Loading est certainement le moyen le plus intéressant pour récupérer des données au format JSON. Voyons ça plus en détail !
Retour en haut

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 non de type string. Il n'y a donc pas besoin d'utiliser eval ou l'objet natif JSON pour parser la chaîne de caractères, ce qui est plutôt bénéfique. Eval is evil.
Retour en haut

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var oSoftwares = {
        "Adobe": [
                "Acrobat",
                "InDesign",
                "Photoshop"
        ],
        "Macromedia": [
                "Dreamweaver",
                "Flash",
                "FreeHand"
        ],
        "Microsoft": [
                "Office",
                "Visual C++",
                "Windows Media Player"
        ]       
};
 
callback(oSoftwares);


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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function callback(oJson) {
        var tree = "", nbItems;
        
        for (sItem in oJson) { 
                tree += sItem + "\n";
                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 : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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=utf-8" />                      
<title>Techniques AJAX - Dynamic Script Loading - JSON Statique</title>
<script type="text/javascript">
<!--
        function send(sUrl) {
                var DSLScript = document.createElement("script");
                DSLScript.src = sUrl;
                DSLScript.type = "text/javascript";
                document.body.appendChild(DSLScript);
                document.body.removeChild(DSLScript);
        }
        
        function callback(oJson) {
                var tree = "", nbItems;
 
                for (sItem in oJson) { 
                        tree += sItem + "\n";
                        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 id="main">
        <input type="button" value="Récupérer les données" onclick="getInfo();" />
</p>
</body>
</html>
Retour en haut

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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 : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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=utf-8" />
<title>Techniques AJAX - Dynamic Script Loading - JSON Dynamique</title>
<script type="text/javascript">
<!--
function sendDSL(sUrl, oParams) {
	for (sName in oParams) {
 		if (sUrl.indexOf("?") != -1) {
			sUrl += "&";
		}  else {
			sUrl += "?";
		}
		sUrl += encodeURIComponent(sName) + "=" +  encodeURIComponent(oParams[sName]);
	}

	var DSLScript  = document.createElement("script");
	DSLScript.src  = sUrl;
	DSLScript.type = "text/javascript";
	document.body.appendChild(DSLScript);
	document.body.removeChild(DSLScript);
}

function callback(oJson) {
	var tree = "", nbItems;
	
	for(sItem in oJson) { 
		tree   += sItem + "\n";
		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 id="main">
	<input type="button" value="Récupérer les données" onclick="getInfo();" />
</p>
</body>
</html>
Retour en haut

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
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
14 commentaires pour "Dynamic Script Loading"
Note moyenne : 3.60 / 4 (138 votes)
Pseudo Commentaire
Hors ligne marcel35 # Posté le 10/04/2010 à 18:46:50

removeChild() fait planter le script sous google chrome linux.
Hors ligne bluelambda # Posté le 08/03/2011 à 12:46:51
Avatar

Avis : Très bon

Études : ESIL

 Cet exemple du tutoriel : http://nayi.free.fr/dev/ajax/DynamicSc [...] ng_JSON_2.htm fonctionne mal sous Chrome. Il faut cliquer deux à trois fois sur le bouton avant que ça ne réagisse (même en attendant longtemps, il n'y a dans tous les cas aucune réaction au premier clic).

Avez-vous une idée d'où peut venir le problème?

Reproduit sous Ubuntu Linux avec Chrome 9.0.597.107.
Hors ligne bluelambda # Posté le 09/03/2011 à 20:44:25
Avatar

Avis : Très bon

Études : ESIL

 Comme l'a signalié marcel35, le removeChild() fait bugguer Chrome.
Après le appendChild(), Chrome n'a visiblement pas toujours le temps d'exécuter le script avant que le removeChild() n'intervienne.

Je propose la solution suivante.
On instancie ses DSL, les objets ainsi créés sont spécialisés pour une action bien définie (un DSL pour un formulaire de recherche, un autre pour un système de sondages, etc...).
L'élément que l'on créé pour le script chargé dynamiquement sera supprimé lors du prochain appel send() au DSL, l'ancien élément est invalidé et on en crée un nouveau, c'est adapté à un formulaire de recherche temps-réel par exemple.

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
function DynamicScriptLoader(sUrl) {
	this.sUrl = sUrl;
	this.DSLScript = null;
	
	this.send = function(oParams) {
		if(this.DSLScript)
			document.body.removeChild(this.DSLScript);
		var sUrl = this.sUrl;
		for (sName in oParams) {
			if (sUrl.indexOf("?") != -1)
				sUrl += "&";
			else
				sUrl += "?";
			sUrl += encodeURIComponent(sName) + "=" +  encodeURIComponent(oParams[sName]);
		}
		this.DSLScript  = document.createElement("script");
		this.DSLScript.src  = sUrl;
		this.DSLScript.type = "text/javascript";
		document.body.appendChild(this.DSLScript);
	}
}


Exemple d'utilisation :
Code : JavaScript
1
2
3
var monDSL = new DynamicScriptLoader("scriptPHP.php");
var params = { "callback": 'ma_fonction_callback', "message" : 'bonjour' };
monDSL.send(params);


Et plus aucun problème sous Chrome et Internet Explorer !
Hors ligne rom117 # Posté le 05/08/2011 à 15:05:41

Bonjour,
J'ai le même problème que sparrow_tim, je n'arrive pas à faire marcher la partie php. Est-ce que tu as résolu ton problème sparrow_tim ?
bluelambda, est-ce que ton code traite de cette partie-là ? As-tu un exemple complet ?
(Je travaille avec Chrome sous Ubuntu)
Hors ligne ifiroth # Posté le 05/09/2011 à 12:04:04
web powa
Avatar

 Excellent tuto !

rom117 : as-tu essayé la solution de bluelambda ? Car pour ma part ça corrige le problème. Je navigue sous Mac / Chrome.
Chaque problème à une solution, le tout est de ne pas tomber sur une solution problème.
Liens utiles : Doc PHP / Expreg / Manuel MySQL / Javascript
 

Voir tous les commentaires