Julien Royer a écrit :
Je me suis mal exprimé : Ne peut-on pas passer des paramètres en GET avec la fonction "importNode" ?
Ce n'est pas vraiment un GET. On fait appel au noeud d'un autre fichier (après savoir si ça passe par l'url ou non, je ne saurais pas te répondre) mais comparé à XHR, c'est plutôt limité. On ne peut recevoir qu'un noeud de même que quand on sert de document.implementation.createDocument, on ne peut qu'insérer un fichier. Ce que je voulais dire, c'est qu'en envoyant un paramètre via XHR, le serveur peut traiter la réponse différemment suivant la valeur.
matmat a écrit :
Alors là je suis perdu, comment fais tu dans ce cas pour afficher les donnée reçu via XHR dans le html? Il faut quand même au minimum une fonction pour lire les balises du fichier xml et une autre pour mettre le contenu ainsi récupéré dans les balises correspondantes?
Bon, je t'ai fait un exemple... Ca va être un peu long à présenter ici mais comme tu voulais de l'Ajax, il faut bien ça.
Tu peux tester Javascript actif ou non, ça passe dans les deux cas.
c'est parti !
index.php
<!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" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
@media screen, projection {
form, p {
width: 20em;
padding: 1em;
border: 2px solid #555;
color: #58F;
background-color: #222;
}
fieldset {
border: 1px solid #58F;
}
#submit {
margin-top: 1em;
}
}
/*]]>*/</style>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form method="get" action="ajax.php5">
<fieldset><legend>Choix d'une année entre 2002, 2004 et 2006</legend>
<div>
<label>Année : </label>
<input type="text" name="annee" id="annee" />
</div>
<div>
<input type="submit" id="submit" value="Transmettre" />
</div>
</fieldset>
</form>
</body>
</html>
ajax.xml
<?xml version="1.0" encoding="utf-8" ?>
<livres>
<livre>
<auteur>Steven Holner</auteur>
<titre>XSLT par la pratique</titre>
<annee>2002</annee>
<editeur>Eyrolles</editeur>
<genre>Programmation</genre>
<ISBN>2-212-11040-5</ISBN>
</livre>
<livre>
<auteur>Kate Mosse</auteur>
<titre>Labyrinthe</titre>
<annee>2006</annee>
<editeur>JC Lattès</editeur>
<genre>Roman</genre>
<ISBN>2-7096-2583-0</ISBN>
</livre>
<livre>
<auteur>Jack Vance</auteur>
<titre>Emphyrio & autres aventures</titre>
<annee>2004</annee>
<editeur>DENOEL</editeur>
<genre>Science Fiction</genre>
<ISBN>2.207.25429.1</ISBN>
</livre>
</livres>
ajax.js
(function() {
var k64 =
{
bXHRSupport: (typeof XMLHttpRequest != "undefined"),
bActiveXSupport: (window.ActiveXObject),
aMSXML: ["Microsoft.XMLHTTP",
"MSXML2.XMLHTTP", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.7.0"],
oCreateXHR: function()
{
if(k64.bXHRSupport)
return new XMLHttpRequest;
else if(k64.bActiveXSupport)
{
var iI = k64.aMSXML.length - 1;
for(; iI >= 0; iI--)
{
try
{
return new ActiveXObject(k64.aMSXML[iI]);
}
catch(oError) { }
}
throw new Error("L'objet XHR n'a pas été créé.");
}
},
fnGetXHR: function(sUrl)
{
var oXHR = k64.oCreateXHR();
oXHR.open('get', sUrl, false);
oXHR.send(null);
if(oXHR.status && /200|304/.test(oXHR.status))
return k64.oSetData(oXHR.responseText);
return false;
},
oSetData: function(sData)
{
return document.body.innerHTML = sData;
},
fnConnect: function(oElem, sEvType, fn, bCapture)
{
return document.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
false;
},
oId: function(sId)
{
if(document.getElementById(sId))
return document.getElementById(sId);
return false;
},
aTag: function(oEl, sTag)
{
if(oEl && sTag && oEl.getElementsByTagName(sTag))
return oEl.getElementsByTagName(sTag);
return false;
},
bCancelClick: function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
}
else if(e && window.event)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
}
return false;
},
sSubmit: function(e)
{
k64.bCancelClick(e);
var sName = k64.oId('annee').name,
sValue = k64.oId('annee').value;
if(sValue != '2002' && sValue != '2004' && sValue != '2006')
{
alert('Tu t\'es planté d\'année ! :s\nRecommence ! ^^');
return;
}
var sUrl = 'ajax.php5?';
sUrl += encodeURIComponent(sName);
sUrl += '=';
sUrl += encodeURIComponent(sValue);
sUrl += '&Ajax=true';
return k64.fnGetXHR(sUrl);
},
oInit: function()
{
var oBody = document.body,
oForm = k64.aTag(oBody, 'form')[0];
return k64.fnConnect(oForm, 'submit', k64.sSubmit, false);
}
};
k64.fnConnect(window, 'load', k64.oInit, false);
})();
ajax.php5
<?php
final class Ajax {
final public function noCache()
{
header('Pragma: no-cache');
header('Expires: 0');
header('Last-Modified: ' . gmdate("D, d M Y H:i:s") . ' GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: text/plain');
}
final public function init()
{
header('Content-type: text/html; charset=utf-8');
ob_start('ob_gzhandler');
}
final public function gauffre()
{
echo "\t\t<p>Tu t'es planté et c'est bien dommage ! [langue]</p>\n";
}
final public function getBook($param)
{
$oDom = new DOMDocument;
$oDom->load('ajax.xml');
$livres = $oDom->getElementsByTagName('livre');
foreach($livres as $livre)
{
if($livre->getElementsByTagName('annee')->item(0)->firstChild->nodeValue === $param)
{
$titre = $livre->getElementsByTagName('titre')->item(0)->firstChild->nodeValue;
$auteur = $livre->getElementsByTagName('auteur')->item(0)->firstChild->nodeValue;
echo "\t\t", '<p>Le livre ', $titre, ', écrit par ', $auteur, ', est sorti en ', $param, '.</p>', "\n";
}
}
}
}
$oAjax = new Ajax;
if(!isset($_GET['annee']))
$oAjax->init();
if(!empty($_GET['Ajax']) && $_GET['Ajax'] === 'true' && !empty($_GET['annee']))
{
$annee = htmlspecialchars($_GET['annee']);
$oAjax->noCache();
$oAjax->getBook($annee);
}
else
{
?>
<!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" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
</head>
<body>
<?php
if(!isset($_GET['Ajax']) && !empty($_GET['annee']) &&
$_GET['annee'] != '2002' && $_GET['annee'] != '2004' && $_GET['annee'] != '2006')
{
$oAjax->gauffre();
}
else if(!isset($_GET['Ajax']) && !empty($_GET['annee']))
{
$annee = htmlspecialchars($_GET['annee']);
$oAjax->getBook($annee);
}
else
$oAjax->getBook('2002');
}
if(!isset($_GET['annee']))
{
?>
</body>
</html>
<?php
}
?>
Et voilà ! En visuel, ça nous donne
ceci.
Concernant le JS, je fais une requête synchrone et non asynchrone parce qu'en dessous d'1ko de données, ça ne vaut pas le coup de passer en asynchrone.
Je te laisse décortiquer le code.
mais c'est aussi bien plus efficace comme ça.
, je vais me renseigner je pense que je suis au bon endroit 
(?)