Requête Ajax simple en utilisant JQuery

Ajax () permet de rendre un site plus interactif en réagissant aux requêtes de l’internaute sur une page sans avoir à recharger la page.

Cette techique permet le dialogue asynchrone entre le navigateur et le serveur WEB .
Il est possible d’interroger la base de données sur le serveur suite à une requête du client sur le navigateur et d’en afficher le résultat en modifiiant dynamiquement le DOM et ce sans que la page soit rechargée.
Pendant que le serveur execute la demande, le navigateur peut continuer d’executer son programme sans avoir à attendre la réponse du serveur (traitement asynchrone).

Le support d’Ajax est le javascript, Jquery nous permet grâce aux commandes jQuery.post() et jQuery.ajax(), d’effectuer simplement des appels ajax.

Exemple d’utilisation d’un Appel Ajax / Javascript

Exemple bidon ci dessous qui permet, en cliquant sur le nom d’un élève, d’afficher dans le titre h1, son nom qu’on est allé chercher dans la base de données.

Pour ce faire créez trois fichier :

• 1 fichier javascript : monfichier.js
• 1 fichier qui renverra les résultats des appels ajax : monfichier-ajax.php
• 1 fichier d’affichage php : monfichier.php

Exemple :

monfichier.php contient le code HTML ici un titre vide et deux paragraphes

<h1 id="prenom_eleve"> </h1>
<p class="eleve"> Elève DUPONT  </p>
<p class="eleve"> Elève BARBIER </p>

Envoi des données au serveur via $.ajax, chargement du fichier externe 

monfichier.js qui contient l’événement click surle nom de l’élève ainsi que l’appel $.ajax

$( ".eleve" ).click(function(){
    $.ajax({
          // chargement du fichier externe monfichier-ajax.php 
          url      : "monfichier-ajax.php",
          // Passage des données au fichier externe (ici le nom cliqué)  
          data     : {NomEleve: $(this).html()},
          cache    : false,
          dataType : "json",
          error    : function(request, error) { // Info Debuggage si erreur         
                       alert("Erreur : responseText: "+request.responseText);
                     },
          success  : function(data) {  
                       // Informe l'utilisateur que l'opération est terminé et renvoie le résultat
                       alert(data.PrenomEleve);  
                       // J'écris le résultat prénom de l'élève dans le h1
                       $(#prenom_eleve).html(data.PrenomEleve);
                     }       
     });     
});

Fichier externe chargé par la requête Ajax

monfichier-ajax.php est chargé par la requête ajax. Ce fichier récupère les données passés dans « data » grâce à la méthode $_GET et peut faire recherche en Base de données dont le résultat va être écrit dans le fichier sous forme d’un objet JSON .

Avertissement :
Attention ce fichier ne doit contenir que l’objet JSON contenant les données de retour. Aucun texte,  retour charriot … ne doivent être insérés sous peine de déclencher un message d’erreur.

<?php
 // Accès à la base de données 
  $serveur     = "monserveur.com";
  $utilisateur = "dbxxxxxx";
  $motDePasse  = "mon_mot_de_passe_BDD";
  $base        = "dbxxxxxxxx";
  mysql_connect($serveur, $utilisateur, $motDePasse);
  mysql_select_db($base) or die("Base de données inactive. ");

  // Récupération du paramètre NomEleve passé dans la requête ajax dans mon fichier.js
  $NomEleve=$_GET['NomEleve'];

  // Préparation de la requête de recherche en BDD
  $sql = "SELECT prenom FROM eleves WHERE nom=".$NomEleve; 
  $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

  //exemple bidon on cherche le prénom de l'élève de nom donné
  $PrenomEleve= mysql_fetch_object($req)->prenom; 

  // Ecriture de l'objet JSON contenant les infos qui vont être renvoyées
  header('Content-type: application/json');   
   ?>
   {
      "PrenomEleve": "<?php echo $PrenomEleve;?>" //Attention à ne pas mettre de virgule
   }
  <?php                                                     
   exit(0);
   mysql_close();
?>

Avertissement :
Veillez à ne jamais rajouter de virgule à la fin de la dernière propriété d’un objet JSON (erreur typique !!)
Ca passe  sous Mozilla mais pas sous Chrome ou IE !