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)
L'object XMLHttpRequest est pratique pour récupérer un peu n'importe quoi comme type de données (text, XML, HTML?), mais est généralement un peu lourd à utiliser. Si vous désirez juste récupérer une source de données au format XML, vous pouvez le faire via
DOMImplementation.
L'interface DOMImplementation fait partie du
DOM Level 2 Core et est supportée par la plupart des navigateurs. Internet Explorer supporte le DOMImplementation, mais par le biais d'un contrôle ActiveX (comme les versions 5 et 6 d'IE avec XMLHttpRequest).
Mozilla et le W3C parlent de l'interface DOMImplementation et Microsoft parle de l'objet implementation. J'ai une préférence pour l'appellation objet, ça semble moins barbare et c'est plus conventionnel.
En réalité IE gère le
DOMImplementation, mais pas complètement. Il ne gère que la méthode
hasFeature (du DOM Level 1) et pas
createDocument dont nous allons nous servir. Donc pour savoir comment réagir en fonction du navigateur, il n'est pas bien malin de faire un test de gestion de l'objet implementation :
Code : JavaScript1 | if(document.implementation) { }
|
Il vaut mieux tester également la prise en charge de la méthode
createDocument :
Code : JavaScript1 | if(document.implementation && document.implementation.createDocument) { }
|
D'après la
documentation d'Apple, Safari gère DOMImplementation. Mais ce n'est que de la théorie, en pratique, il est impossible de faire fonctionner cet objet.
Nous allons créer une fonction générique qui ira récupérer une source XML à l'adresse
sUrl, et qui renverra le contenu dans une fonction de callback
fCallback. Ainsi nous disposerons d'une fonction qui ne s'occupera que de la gestion de DOMImplementation :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | function DOMImplementation(sUrl, fCallback) {
var dom;
if(window.ActiveXObject) {
dom = new ActiveXObject("Microsoft.XMLDOM");
dom.onreadystatechange = function() {
if(dom.readyState == 4) {
fCallback(dom);
}
};
}
else if(document.implementation && document.implementation.createDocument) {
dom = document.implementation.createDocument("", "", null);
dom.onload = function() {
fCallback(dom);
}
}
else {
alert("Votre navigateur ne gère pas l'importation de fichiers XML");
return;
}
dom.load(sUrl);
}
|
L'ActiveX
XMLDOM permettant à IE de gérer l'importation DOM fonctionne exactement comme un ActiveX
XMLHTTP. Ainsi, si vous le voulez, vous pouvez contrôler le bon fonctionnement des opérations avec
onreadyonchange.
L'objet implementation requiert donc la méthode
createDocument qui permet de créer un document XML. Les deux premiers arguments sont le
namespace et le nom qualifié du document XML. Le troisième argument est le doctype. Laissez les deux premiers vides, et le troisième nul.
Voici donc un récapitulatif, qui charge un fichier XML et en lit une entrée. Pour plus de lisibilité et de facilité, j'ai mis la fonction
DOMImplementation créée ci-dessus dans le fichier
oDOMImplementation.js :
Code : JavaScript 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 | <!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" />
<link href="mep.css" rel="stylesheet" type="text/css" media="all" />
<title>Techniques AJAX - DOMImplementation - XML Statique</title>
<script type="text/javascript" src="oDOMImplementation.js"></script>
<script type="text/javascript">
<!--
function getData(oData) {
var author = oData.getElementsByTagName('author')[0].firstChild.data;
var country = oData.getElementsByTagName('country')[0].firstChild.data;
var lang = oData.getElementsByTagName('lang')[0].firstChild.data;
alert(author + ' - ' + country + ' - ' + lang);
}
//-->
</script>
</head>
<body>
<h1><span class="float">by Thunderseb</span>Techniques AJAX - DOMImplementation - XML Statique </h1>
<p>
<input type="button" value="Récupérer les données" onclick="DOMImplementation('DOMImplementation_1.xml', getData);" />
</p>
</body>
</html>
|
Vous pouvez utiliser une page PHP pour générer un fichier XML. Dans ce cas, des variables GET peuvent être transmises à la page PHP via l'url. Voici un exemple qui charge du XML créé dynamiquement au moyen d'une page PHP.
La page HTML est rigoureusement la même que dans l'exemple ci-dessus, à l'exception de l'appel de la fonction :
Code : JavaScript1 | <input type="button" value="Récupérer les données" onclick="DOMImplementation('DOMImplementation_2.php?Pseudo=Thunderseb', getData);" />
|
La page PHP (
DOMImplementation_2.php) contient ce 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
24
25 | <?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";
echo "<topic>";
if(isset($_GET['Pseudo'])) {
$pseudo = $_GET['Pseudo'];
if($pseudo == 'Thunderseb') {
echo '<author>Thunderseb</author>';
echo '<country>Belgium</country>';
echo '<lang>French</lang>';
}
else if($pseudo == 'Laurence') {
echo '<author>Laurence</author>';
echo '<country>Belgium</country>';
echo '<lang>French</lang>';
}
}
echo "</topic>";
?>
|
Il ne faut surtout pas oublier de bien définir le type de contenu comme étant du
text/xml. De plus, votre XML généré doit être valide, sinon vous aurez des problèmes lors du chargement du fichier par l'objet DOMImplementation.
DOMImplementation est pour moi la solution la plus pratique si vous voulez charger du contenu XML. Il est fait pour ça, et il serait dommage de ne pas l'utiliser.
Points forts
- Plus facile à mettre en place que XMLHttpRequest
- Adapté pour le XML
Points faibles
- Non supporté par Safari
- Seulement des requêtes GET
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
86 Zéros connectés |
8 requêtes |
0.0857s (0.0748s)
