Vous pouvez voir la démo ici
Voici mes trois fichiers:
Le fichier de base form1.php, contient le formulaire initial:
Code : Tout sélectionner
<script type="text/javascript" src="annee_xhr.js" charset="iso_8859-1"></script>
<?//début script page
echo'<h2><b>Débugage AJAX - Choisis un joueur</b></h2>';
// on remplit le tableau avec les joueurs
$visu_ok[]='joueur1';
$visu_ok[]='joueur2';
//on construit la boite
echo '<select onchange="getannee(this.value);" name="visu_ok" size="1">
<option value="vide">choix du joueur</option>';
foreach($visu_ok as $value) {echo '<option >'.$value.'</option>';}
echo '</select><span id="blocannee"></span><br />
';
?>Le fichier intermédiaire php appelé par le js
Code : Tout sélectionner
<?php
include('../param_actuel.inc');
/**
* Code qui sera aeeplé par un objet XHR et qui
* retournera la liste déroulante des saisons disponibles
* correspondant au joueur sélectionné.
*/
/* On récupère l'identifiant du joueur choisi. */
if (isset($_GET['idj']))
{$idj = $_GET['idj'];
echo('Tu as clique '.$idj);
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. Le joueur sélectionné comporte une entrée invalide.</p>\n");
}
?> Code : Tout sélectionner
/**
* Lister les année d'un joueur avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
requete = null;
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserannee()
{
var listeannee = requete.responseText;
var blocListe = document.getElementById('blocannee');
blocListe.innerHTML = listeannee;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getannee(idj)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idj == 'vide')
{
document.getElementById('blocannee').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocannee = document.getElementById('blocannee');
blocannee.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'cherche_annee.php?idj='+ idj;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserannee();
}
}
};
requete.send(null);
}
} PS: Le problème avait été posé dans un autre message mais le titre ne correpsondant plus au problème, je me permets de recréer un nouveau post
