logo oujood
🔍

AJAX exemple de base de données

OUJOOD.COM

AJAX exemple utilisation avec base de données

JavaScript cours tutorial

AJAX peut être utilisé pour la communication interactive avec une base de données.

Exemple de base de données de AJAX

L'exemple suivant démontrera comment une page web peut extraire des informations d'une base de données avec AJAX :

Exemple expliqué - la base de données MySQL

La table de base de données que nous utilisons dans l'exemple qui suit, ressemble à ceci :

ID Prenom Nom age Ville natale Emploi
1 Peter Griffin 41 Paris Brasserie
2 Lois Griffin 40 Nice Professeur de piano
3 Joseph Swanson 39 Paris Officier de police
4 Glenn Bourbier 42 Paris Pilote

Pour pouvoir suivre l’exemple avec nous, vous devez créer la base de données que vous nommez : `ajax_exemple`

Puis voici la requête pour créer la table ‘user’ que nous allons utiliser pour l’exemple :

Code SQL

Exemple :     📋 Copier le code 

  --
   -- Voici la requête pour créer la table `user`
  --structure de la table
  
  CREATE TABLE IF NOT EXISTS `user` (
    `ID` int(10) NOT NULL AUTO_INCREMENT,
    `Prenom` text NOT NULL,
    `Nom` text NOT NULL,
    `Age` int(8) NOT NULL,
    `VilleNatale` text NOT NULL,
    `Emploi` text NOT NULL,
    PRIMARY KEY (`ID`)
  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5;
   
  --
  -- Ci après la requête pour remplir la table `user`
  -- vous pouvez ajouter vos propre enregistrements si vous voulez
  --  
  INSERT INTO `user` (`ID`, `Prenom`, `Nom`, `Age`, `VilleNatale`, `Emploi`) VALUES
  (1, 'Peter', 'Griffin', 41, 'Paris', 'Brasserie'),
  (2, 'Lois', 'Griffin', 40, 'Nice', 'Professeur de piano'),
  (3, 'Joseph', 'Swanson', 39, 'Paris', 'Officier de police'),
  (4, 'Glenn', 'Bourbier', 42, 'PAris', 'Pilote');

Explication de l’exemple

La Page HTML

Lorsqu'un utilisateur sélectionne un utilisateur dans la liste déroulante, une fonction appelée « showUser() » est exécutée. La fonction est déclenchée par l'événement « onchange » :

Exemple :     📋 Copier le code 

  <html>
  <head>
  <script type="text/javascript">
  function showUser(str)
  {
  if (str=="")
    {
    document.getElementById("txtHint").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");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
  }
  </script>
  </head>
  <body>
   
  <form>
  <select name="users" onchange="showUser(this.value)">
  <option value="">Sélectionner une personne:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Glenn Quagmire</option>
  <option value="4">Joseph Swanson</option>
  </select>
  </form>
  <br />
  <div><b>Tableau résultats trouvés :</b><br /><br />
  <span id="txtHint"></span>
  </div>
   
  </body>
  </html>

La fonction showUser() effectue les opérations suivantes :

  • Vérifie si une personne est sélectionnée
  • Crée un objet XMLHttpRequest
  • Crée la fonction doit être exécuté lorsque la réponse du serveur est prête
  • Envoie la demande d'un fichier sur le serveur
  • Remarquez qu'un paramètre (q) est ajouté à l'URL (avec le contenu de la liste déroulante)

Le fichier PHP

La page sur le serveur appelé par le JavaScript ci-dessus est un fichier PHP appelé « getuser.php ».

Le code source de « getuser.php » exécute une requête sur une base de données MySQL et renvoie le résultat dans un tableau HTML:

Exemple :     📋 Copier le code 

  <?php
  $q=$_GET["q"];
   
  $con = mysql_connect('localhost', 'root', '');
  if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
   
  mysql_select_db("ajax_exemple", $con);
   
  $sql="SELECT * FROM user WHERE id = '".$q."'";
   
  $result = mysql_query($sql);
   
  echo "<table border='1'>
  <tr>
  <th>Prénom</th>
  <th>Nom</th>
  <th>Age</th>
  <th> Ville natale </th>
  <th>Emploi</th>
  </tr>";
   
  while($row = mysql_fetch_array($result))
    {
    echo "<tr>";
    echo "<td>" . $row['Prenom'] . "</td>";
    echo "<td>" . $row['Nom'] . "</td>";
    echo "<td>" . $row['Age'] . "</td>";
    echo "<td>" . $row['VilleNatale'] . "</td>";
    echo "<td>" . $row['Emploi'] . "</td>";
    echo "</tr>";
    }
  echo "</table>";
   
  mysql_close($con);
  ?>

Explication : Lorsque la requête est envoyée par le JavaScript ajax dans le fichier PHP, ce qui suit arrive :

  1. PHP ouvre une connexion à un serveur MySQL
  2. Trouve la personne.
  3. Crée un tableau HTML , le tableau est rempli de données trouvées et renvoyé à l'espace réservé au « txtHint »

Télécharger les fichiers de l'exemple

Cours precedent:
  Exemple AJAX PHP 		    Sommaire de :
Le langage JavaScript 		 Cours suivant:
Fichier XML de AJAX    
Par carabde 22 aout 2014