utilisateurs.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>utilisateurs-1</title>
		<link type="text/css" rel="stylesheet" href="utilisateurs.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="utilisateurs.js"></script>
	</head>
	<body>
<!--------------------->
<ul id="utilisateurs">
	<li data-uid="karim" >Karim </li>
	<li data-uid="martin">Martin</li>
	<li data-uid="tom"   >Tom </li>
	<li data-uid="leila" >Leïla </li>
	<li data-uid="joe"   >Joe C.</li>
	<li data-uid="nath"  >Nath.</li>
</ul>

<div id="affichage">
	<p>Nom :   <span id="nom"  ></span>     </p> 
	<p>Age :   <span id="age"  ></span> ans	</p> 
	<p>Score : <span id="score"></span>		</p> 
</div>

<!--------------------->
	</body>
</html>

utilisateurs.js

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");
	$('#utilisateurs li').mousedown(function(e)
	{
		console.log("Évènement mousedown");
		$.get('http://localhost/~1234567/tp-6/utilisateurs.php',
			  {uid: $(this).attr('data-uid')},
			  function(reponse)
			  {
				  console.log("Réponse reçue du serveur: ",reponse);
				  if(reponse.ok)
				  {
					  $('#nom'  ).text(reponse.nom);
					  $('#age'	).text(reponse.age);
					  $('#score').text(reponse.score);
				  }
				  else
				  {
					  alert(reponse.message);
				  }
			  });
	});
	console.log("La mise en place est finie. En attente d'événements...");
});

utilisateurs.php

<?php

// Une liste d'utilisateurs, juste pour l'exemple. 
// En pratique on chercherait dans une base de données.
$utilisateurs=array(
			   'joe'   =>array('nom'=>'Joe C.','score'=>34,'age'=>22),
			   'martin'=>array('nom'=>'Martin','score'=>3 ,'age'=>7 ),
			   'karim' =>array('nom'=>'Karim' ,'score'=>45,'age'=>19),
			   'leila' =>array('nom'=>'Leïla' ,'score'=>49,'age'=>23),
	                 );
$uid=$_GET['uid'];
if(isset($utilisateurs[$uid]))
{
	$reponse=$utilisateurs[$uid];
	$reponse['ok']=true;
}
else
{
	$reponse=array('ok'=>false,
		  'message'=>"Cet utilisateur n'existe pas");
}

header('Content-type: application/json');
echo json_encode($reponse);