COMMENT DEMANDER DES INFORMATIONS AU SERVEUR SANS RECHARGER LA PAGE. | Journal de Cyberscorp | Articles, tutorial, forum dédié à la programmation, script php, Linux

Vous êtes ici : COMMENT DEMANDER DES INFORMATIONS AU SERVEUR SANS RECHARGER LA PAGE.

AFFICHER UNE LISTE DÉROULANTE EN FONCTION D'UNE AUTRE LISTE SANS RECHARGER LA PAGE OU PASSER L'INFORMATION PAR L'URL EN UTILISANT LA TECHNOLOGIE AJAX.

Vous pouvez commenter cet article et voir les commentaires sur cet article

Le code suivant permet d'afficher une liste dont le contenu dépend du choix fait dans une autre. (afficher la liste des sous-catégories d'une catégorie sélectionné dans une autre liste)

L'avantage de code c'est que le résultat de la deuxième liste n'a pas besoin de recharger une deuxième fois la page (affichage dynamique).

AJAX, c'est quoi ?

AJAX, ou Asynchronous JavaScript And XML (« XML et Javascript asynchrones ») est un acronyme désignant une méthode informatique de développement d'applications Web.

Pour plus de détails, consultez la page suivante : http://fr.wikipedia.org/wiki/AJAX

L'exemple :

On va commencer par créer deux tables mysql :

Une table pour les catégories et une autre pour les sous-catégories liées par un champ nommé "id_cat"

- Voici le script Sql que vous pouvez Importer directement dans PhpMyAdmin

-- -- Structure de la table `script_categorie` -- CREATE TABLE `script_categorie` ( `id_cat` int(5) NOT NULL auto_increment, `designation` varchar(50) NOT NULL default '', `comment` varchar(255) NOT NULL default '', PRIMARY KEY (`id_cat`), UNIQUE KEY `designation` (`designation`) ) TYPE=MyISAM AUTO_INCREMENT=10 ; -- -- Contenu de la table `script_categorie` -- INSERT INTO `script_categorie` VALUES (1, 'Ressources Webmaster', 'Site dédié aux webmasters. Tutorials, Exemples, Codes Sources, ressources, images, Cliparts, Gifs, Forums ...'); INSERT INTO `script_categorie` VALUES (2, 'Downloads', 'Téléchargement freeware, shareware...'); INSERT INTO `script_categorie` VALUES (3, 'Programmation', 'Developpement programmation'); INSERT INTO `script_categorie` VALUES (9, 'Logiciels de gestion', 'Logiciel de gestion, finance, comptabilité, paie, erp, stock, planning ..'); -- -------------------------------------------------------- -- -- Structure de la table `script_sous_categorie` -- CREATE TABLE `script_sous_categorie` ( `id_scat` int(5) NOT NULL auto_increment, `idcat` int(5) NOT NULL default '0', `designation` varchar(50) NOT NULL default '', `comment` varchar(255) NOT NULL default '', PRIMARY KEY (`id_scat`), UNIQUE KEY `designation` (`designation`) ) TYPE=MyISAM AUTO_INCREMENT=9 ; -- -- Contenu de la table `script_sous_categorie` -- INSERT INTO `script_sous_categorie` VALUES (5, 1, 'Php & Mysql', 'Forums, Tutorials, Codes Sources ..'); INSERT INTO `script_sous_categorie` VALUES (4, 3, 'Visual Basic', 'VB, VB.NET, Crystal Report, Access, SQL SERVER ..'); INSERT INTO `script_sous_categorie` VALUES (6, 1, 'Javascript', 'Tutorials pour javascript, Forums ...'); INSERT INTO `script_sous_categorie` VALUES (2, 1, 'Gifs animés, Icônes', 'Téléchargement gifs animés , clipart, Icones'); INSERT INTO `script_sous_categorie` VALUES (1, 1, 'Templates', 'Sites de téléchargement de modèles de site web'); INSERT INTO `script_sous_categorie` VALUES (3, 2, 'Pilotes', 'Drivers, pilotes, carte graphiques'); INSERT INTO `script_sous_categorie` VALUES (7, 2, 'Freeware, sharware', 'Freeware, sharware'); INSERT INTO `script_sous_categorie` VALUES (8, 3, 'SQL SERVER', 'Tutorials forum SQL SERVER');

- Ensuite créer une page avec un formulaire qui contient deux listes déroulantes . Une pour les catégories et une autre pour les sous-catégories.

Voici la page index.php

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> /** * Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest */ function sendData(param, page) { if(document.all) { //Internet Explorer var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; }//fin if else { //Mozilla var XhrObj = new XMLHttpRequest(); }//fin else //définition de l'endroit d'affichage: var content = document.getElementById("contenu"); XhrObj.open("POST", page); //Ok pour la page cible XhrObj.onreadystatechange = function() { if (XhrObj.readyState == 4 && XhrObj.status == 200) content.innerHTML = XhrObj.responseText ; } XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); XhrObj.send(param); }//fin fonction SendData </script> </head> <body> <?php // Paramètres de la Connexion à la base MYSQL $user="root"; $host="localhost"; $password=""; $database="base"; $i=0; // variable de test $j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage $connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible"); mysql_select_db($database,$connexion); // Séléction de tous les enregistrements de la table Catégorie $rq="Select * from script_categorie order by designation;"; $result= mysql_query ($rq) or die ("Select impossible"); echo "<form method='POST' action='valid.php'>";?> <select size="1" name="cat" OnChange="sendData('id='+this.value,'liresc.php')" onKeyUp="sendData('id='+this.value,'liresc.php')"> <?php while ($dt=mysql_fetch_row($result)) { // Remplir la liste déroulante des catégorie echo "<option value=".($dt[0]).">".($dt[1])."</option>"; if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement } ?> </select><br><br> <div id="contenu"> <?php // affichage des sous-catégorie appartenant à la première catégorie. echo "<select size='1' name='souscat'>"; $rq="Select * from script_sous_categorie where idcat=".$j." order by designation;"; $result= mysql_query ($rq) or die ("Select impossible"); // $i = initialise le variable i $i=0; while ($dt=mysql_fetch_row($result)) { echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[2])."</option><br>"; } echo "</select>"; ?> </div> </form> </body> </html>

Dans ce code, on remarque que dans l'événement OnChange de la première liste, une procédure en javascript est appelé.

Cette procédure (SendData) a pour mission d'interroger le serveur par le biais d'une page php qui est dans notre cas (liresc.php)

Voici le code du fichier liresc.php :

<?php header('Content-type: text') ; // on déclare ce qui va être afficher // test des POST emis if(isset($_POST['id']) && !empty($_POST['id']) ){ $user="root"; $host="localhost"; $password=""; $database="base"; $connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible"); mysql_select_db($database,$connexion); $rq="Select * from script_sous_categorie where idcat=".$_POST['id']." order by designation;"; $result= mysql_query ($rq) or die ("Select impossible"); // $i = initialise le variable i $i=0; if (mysql_num_rows($result)>0) { echo "<select size='1' name='souscat'>"; } else { echo utf8_encode("Pas de sous catégories disponible"); } while ($dt=mysql_fetch_row($result)) { echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[2])."</option><br>"; } echo "</select>"; } ?>

Voici le résultat :

Remerciement :

Je tiens à remercier GRenard qui m'a fais découvrir cette nouvelle technologie et malalam pour son code source qui a été ma première ressource sur le web.

Liens utiles :

AJAX:

Ajax : Wikipédia

Comprendre AJAX pour les débutants

Codes Sources -exemples:

EXEMPLE DE TAGBOARD AVEC XMLHTTP REQUEST

PHP / mySQL > AJAX - Interrogez votre serveur avec JavaScript

Rédiger par Hanini Yassine, Le 29 Septembre 2005

Visiteurs connectés :	2
Record visit. connectés (Le 01/05/2008) :	7
Visiteurs uniques :	634
Nb Visiteurs :	2082
Le Google™ - PageRank™ :
Nb hits de cette Page :
Total des pages vues :	0
Stats Powered by BeStats v1.1

StatistiquesDepuis le 31 Mai 2007

Statistiques
Depuis le 31 Mai 2007