AJAXAjax CallBack
Chargement dynamique de script
Exemple AJAX de chargement dynamique d'un script externe à partir d'une fonction qui crée une balise script.
La page de cet exemple contient un seul bouton qui, une fois cliqué, charge la phrase ("Hello world!") depuis un fichier javascript externe. La phrase est récupérée dans une fonction (nommée callback()), qui l'affiche dans un alert:
Chargement dynamique de script (index.html)
<!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" xml:lang="fr">
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<head>
<title>Exemple d'Ajax callback</title>
<script type="text/javascript">
//<![CDATA[
function fairebalise() {
// crée une balise script
var mabalisescript = document.createElement("script");
// rajoute de type
mabalisescript.type = "text/javascript";
// rajoute la source
mabalisescript.src = "exemple.js";
// met là à la fin du corps du document
document.body.appendChild(mabalisescript);
}
function callback(montexte) {
alert("Chargé depuis le fichier: " + montexte);
}
//]]>
</script></head>
<body>
<input type="button" value="Click Moi" onclick="fairebalise()" />
</body></html>
<!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" xml:lang="fr">
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<head>
<title>Exemple d'Ajax callback</title>
<script type="text/javascript">
//<![CDATA[
function fairebalise() {
// crée une balise script
var mabalisescript = document.createElement("script");
// rajoute de type
mabalisescript.type = "text/javascript";
// rajoute la source
mabalisescript.src = "exemple.js";
// met là à la fin du corps du document
document.body.appendChild(mabalisescript);
}
function callback(montexte) {
alert("Chargé depuis le fichier: " + montexte);
}
//]]>
</script></head>
<body>
<input type="button" value="Click Moi" onclick="fairebalise()" />
</body></html>
Contenu de exemple.js
callback("Hello world!");
callback("Hello world!");
Note : Est utilisé ci-dessus le caractère CDATA (pour "Character Data", données de caractère). Il permet d'éviter que le contenu de la section ne soit analysé par le navigateur lors de la lecture du fichier (un peu comme les balises <pre></pre> qui affichent le texte en respectant les espaces).
Nombre de fichiers XML dynamiques mettent leur contenu textuel dans une section CDATA, afin d'éviter qu'un caractère inattendu ne casse la validité du XML, et donc ne le rende illisible.
Note: appendChild() ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Voir le DOM
