[AJAX] Exécution unique fonction JS

Bonjour à tous,

Je fais mes débuts en AJAX et j'ai un petit souci avec ma fonction JS qui sert à rafraichir un div de ma page :

Lorsque je charge, pour la 1ère fois, la page en question et que je cliques sur le bouton activant la fonction de rafraichissement, tout se déroule correctement.
Par contre lorsque que je souhaites de nouveau cliquer sur un autre bouton déclenchant la même fonction mais avec des valeurs différentes, rien ne se passe.

J'ai l'impression que ma fonction ne se lance qu'une fois.

J'ai vérifié avec l'extension Firebug et, effectivement, si je cliques pour la 1ère fois sur un des boutons, je vois bien une requête POST partir avec la bonne valeur etc. mais ensuite plus rien ne s'envoie.

Voici mon code :

Fichier HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Liste des fiches</title>
</head>
 
<body>
 
<a href="#" onclick="javascript:liste('A');"><img src="./A.png"></a>
<a href="#" onclick="javascript:liste('B');"><img src="./B.png"></a>
 
<div id="tableau"></div>
 
</body>
</html>

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
function liste(req) {
	if (req == "") {
		document.getElementById("tableau").innerHTML = "";
		return;
	}
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	/* Préparation d'une requête asynchrone de type POST : */
	xmlhttp.open("POST", "liste.php", true);
	/* Effectue la requête en envoyant les données : */
	xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xmlhttp.send("val="+req);
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
			document.getElementById("tableau").innerHTML = xmlhttp.responseText;
		}
	}
}
</script>

PHP :

Code:

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
<?php
include("connect.php");
 
$req = $_POST['val'];
 
if ($req == "A") {
        $titre = "Liste de toute les fiches commencant par A";
        $req = "FROM inventaire WHERE nom LIKE 'A%'";
} else () {
        $titre = "Liste de toute les fiches commencant par B";
        $req = "FROM inventaire WHERE nom LIKE 'B%'";
}
 
 
//On compte le nombres de fiches :
$nbres_fiches= $bdd->query("SELECT COUNT(*) ".$req)->fetchColumn(); 
 
if ($nbres_fiches == 0) {
        echo "<center><h2>Vous n'avez pas encore ajout&eacute; de fiches</h2></center>";
} else {
        echo "<h2>Nombre de fiches d'inventaire : ".$nbres_fiches."</h2>";
        $inventaire = $bdd->query("SELECT * ".$req)or die(print_r($bdd->errorInfo())); ?>
 
<table cellspacing="0">
<tr style="font-weight: bold;"><td>Nom</td><td>Pr&eacute;nom</td>
<?php
$color = 0;
while ($donnees = $inventaire->fetch()) {?>
	<tr>
	<td><?php echo $donnees['NOM'];?></td>	
	<td><?php echo $donnees['PRENOM'];?></td>
	</tr>
	<?php
        } ?>
</table>
 
<?php 
$inventaire->closeCursor(); // Termine le traitement de la requete
} ?>

Quelqu'un saurait-il ce qu'il manque ou ce qu'il y a de trop ?

Merci à vous !