Utiliser Prototype.js afin d'insérer une ligne dans une table avec Ajax

Vous Ä‚Ĺžtes un amateur de Ajax ? Et de la librairie Prototype.js ? Et bien je vais vous montrer comment insérer dans vos tables des lignes à l'aide d'Ajax et de Prototype.js. Si vous n'êtes pas familier avec Ajax et Prototype.js, ceci sera un bon moyen de faire connaissance avec ces 2 technologies.
Alors, voici comment insérer une ligne dans une table à l'aide de PHP, Ajax et Prototype.js :

Étape 1: Inclure la librairie Prototype.js

Télécharger la librairie Prototype.js et créer une nouvelle page (index.php). Ajouter la ligne suivante entre les balises <head> de votre page :
<script type="text/javascript" src="http://www.pckult.net/prototype.js"></script>

Étape 2: HTML

Index.php est une page simple contenant le formulaire suivant :
<input type="text" name="user_name" id="user_name" />
<input type="submit" name="button" id="button" value="Insert" onclick="javascript:insertName()"/>
Le bouton appelle la fonction Javascript nommé insertName() sur l'événement « Onclick » du bouton.

Étape 3: insert.php

Créer une nouvelle page (insert.php). Cette page contient une requête qui insère la ligne dans la table (USER):
<?php
   if(isset($_POST['user_name'])){
      /* Connexion à la base de données */
      include('config.php');

      /* Suppression du HTML afin d'éviter l'injection */
      $name = strip_tags($_POST['user_name']);
      $sql = 'INSERT INTO USER (name) VALUES("'.$name.'")';
      mysql_query($sql);
      echo $name;
   } else { echo '0'; }
?>

Étape 4: Fonction Javascript afin d'activer les requêtes Ajax

Ce code permet d'activer les requêtes Ajax avec Prototype.js. Ajouter donc ce code tout juste sous le code que vous aurez inscrit lors de l'étape 2:
<script type="text/javascript">
   function insertName(){
      new Ajax.Request('insert.php', {
      parameters: $('user_name').serialize(true),
      });
   }
</script>
Ce script passe en paramètre l'usager à insérer à la page contenant la requête d'insertion (insert.php). La ligne suivante contient la valeur passée en paramètre :
$('user_name').serialize(true)
... Si vous êtes familier avec Javascript, la ligne précédente équivaut à la ligne suivante :
document.getElementById('user_name');
... Où dans les 2 cas, "user_name" est l'id du champ de saisie du nom d'usager à insérer dans la base de données. Cette valeur est passée à la page insert.php comme une variable en _POST.