Petit tutorial par l'exemple sur l'ajax

Exemple de suppression en Ajax de lignes de tableau contenant des images qui ont toutes un fond commun et dont les caracs sont stockées dans la base de donnée.

Les commentaires sont dans le code et l'explication est à la fin :)

-------------------------------------------
Fichier de base
-------------------------------------------



/*

 * Lorsque l'on clique sur le bouton rouge en face d'une ligne de tableau,

 * on lance la fonction JS appel_php(id) avec id qui est l'id de la ligne 

 * (ex: ) Il faut que l'on supprime toutes les lignes qui contiennent 

 * le meme fond que la photo "toto"

 */




<script type="text/javascript">

function appel_php(id)

{

               /*

                * les 5 prochaines lignes sont obligatoires et servent

                * à dire au navigatuer: "youhou on aimerait faire des trucs vachement marrant,

                * tu peux le faire?

                */

               var xhr=null;

               if (window.XMLHttpRequest) //FF

                       xhr = new XMLHttpRequest();

               else if (window.ActiveXObject) //IE

                       xhr = new ActiveXObject("Microsoft.XMLHTTP");

               //on peut completer par un "else" pour les navigateurs qui ne supportent pas l ajax



               //on définit l appel de la fonction au retour serveur (quand suppr.php aura finit de faire ce qu'il a à faire)

               xhr.onreadystatechange = function() {

suppr_ligne(xhr,need_confirm); };



               //on appelle le fichier suppr.php

               xhr.open("GET","http://www.pouetpouet.com/suppr.php?id="+id , true);

               xhr.send(null);

       }



}



//fonction qui supprime les lignes apres la requete

function suppr(xhr)

{

       if (xhr.readyState==4)//si la requete a été executée on execute, sinon, la fonction javascript suppr est relancée automatiquement

       {

              //on stock la réponse du document xml

               var docXML= xhr.responseXML;



              //on cherche un endroit marqué "max"

               var tag_max = docXML.getElementsByTagName("max");

              //on enregistre la valeur entre les 1eres balises "max"

               max = tag_max.item(0).firstChild.data;



               if(max==0)//probleme

                               alert('Impossible de supprimer!');

               else

               {

                       var tag_id = docXML.getElementsByTagName("photo_id");

                       for(i=0;i
                       {

                               id = tag_id.item(i).firstChild.data;

                               document.getElementById(id).style.display='none';

                       }

               }

       }

}


</script>

-------------------------------------------
Fichier suppr.php
-------------------------------------------



<?php



//on déclare que c est du xml1.0

header('Content-Type: text/xml');

echo "\n";



//balise globale qui délimite le début et la fin

echo "\n";



//si on a recu aucun argument=>probleme

if(!$_GET['id'])

       echo "0";

else

{

       //on se connecte a la BDD

       $host="localhost";

       $login="login";

       $pass="pass";

       $base="base"; //souvent le nom de la base st le login

       $db = mysql_connect($host, $login, $pass);

       mysql_select_db($base, $db);



       //on lance la requete

       $query = "SELECT background FROM photos WHERE id='".addslashes($_GET['id'])."'";

       $result = mysql_query($query);

       $voir=mysql_fetch_array($result);





//ici on peut faire plein de trrucs en php.. supprimer les lignes SQL qui nous plaisent pas etc;





               $req="SELECT id,nom,couleur FROM  photos WHERE couleur='".$voir['couleur']."'";

               $result=mysql_query($req);

               echo "".mysql_num_rows($result)."";



               //On boucle sur le resultat

               while ($voir = mysql_fetch_array($result))

               {

                       echo "".$voir['nom']."\n";

                       $req="DELETE FROM photos WHERE id='".$voir['id']."'";

                       mysql_query($req);



                       //on peut vraiment faire out ce que l'on veut en php, même lancer des commandes systèmes

                       exec('sudo -u utilisateur echo 'image '.$voir['nom'].' supprimée.\n'>>/var/log/image_del_ajax.log);

               }

       }

}

echo "";

?>

-------------------------------------------
L' EXPLICATION DE TONTON SITK
-------------------------------------------

En gros le fichier suppr.php, quand il sera appelé, renverra un fichier xml de la forme:


<liste_photo>



  <photo_id/>13</photo_id>

  <photo_id\>86</photo_id>

  <photo_id >03</photo_id>

  <photo_id>30</photo_id>



</liste_photo>

ensuite le javascript de la fonction suppr le parsera en prenant le i-ème élément

id = tag_id.item(i).firstChild.data;

-------------------------------------------
La remarque de SitK
-------------------------------------------

Le champ "max" me sert uniquement a connaitre le nombre d'itération de la boucle, pour faire plus "classe" et qu il n y ait pas d erreurs JS ni de vérifications inutiles