Dès qu’un événement JavaScript se produit sur la page (ex : quand on clique sur un bouton),
L’ajax va faire appel à un code php. Ce code php va faire un traitement (ex : rechercher une liste de client). Il va renvoyer le résultat au javascript. Et Celui-ci va ensuite l’afficher.

Le jQuery c’est quoi ?

Le jQuery est un framework Javascript libre qui porte sur l’interaction entre JavaScript (comprenant l’AJAX) et HTML, et a pour but de simplifier des commandes communes de Javascript.

En route !

Quoi déjà ? Eh oui, dans cette documentation, nous allons voir directement l’utilisation de l’Ajax à travers un exemple concret en évitant les explications longues et fastidieuses.

Mise en situation :

Pour une école nous devons développer une page où l’instituteur pourra afficher les notes de chaque élève pour chaque matière.

Oh lala, ça va nous donner beaucoup de boulot tout ça ! Pas de panique les amis j’ai déjà tout préparé, il suffit juste de télécharger le pack :ecole
Vous le mettez dans votre dossier www.

Dans un premier temps, il faut créer une base de données ecole. Une fois ceci fait, il suffit de lancer le script ecole.sql dans phpmyadmin. Maintenant, on peut ouvrir notre page dans notre navigateur.

Voila notre belle page :

ajax

L’utilisation d’ajax dans cet exemple :

A chaque fois que l’utilisateur sélectionnera un élève ou une matière, les notes et la moyenne s’afficheront automatiquement sans rafraîchissement de page.

Dans le code le déclencheur sera donc :

<select id ='eleve' onchange='javascript: chargeNote();'>

Et c’est la fonction chargeNote qui va faire appel à php pour afficher les informations.

Mon premier appel Ajax

Déjà on va faire appel à notre librairie jQuery.

<script src="http://localhost/ecole/js/jquery-1.3.2.js" type="text/javascript"  type="text/javascript">1</script

Astuce :

Si vous voulez voir les scripts javascripts chargés sur une page, vous pouvez utiliser le plugin JSview sur Firefox. Pour notre page, on voit bien que nos 2 scripts sont chargés. voila ce que le JSview affiche :

jsview

Comme notre ajax va faire appel à un code php, nous allons créer cette page php tout de suite.
Pour une meilleur lisibilité nous allons créer un dossier ajax où tous nos codes sources php (appelé par l’ajax) seront stockés. Notre premier fichier php qui sera chargé par l’ajax sera appelé chargeNote.php.

Avant de charger les notes d’un élève on va juste lui demander d’afficher un message « le fichier chargeNote.php est bien appele, l’ajax fonctionne ! ».

echo "le fichier chargeNote.php est bien appele, l'ajax fonctionne !";

Maintenant on va retourner dans fonction javascript chargeNote();

On va utiliser la méthode jQuery.post :

Dans le code :

jQuery.post("http://localhost/ecole/ajax/chargeNote.php",
			{},function (sData) {}
	);

jQuery.post a trois paramètres :

• le premier : c’est l’adresse du script php qui va être chargée
• le deuxième : c’est les paramètres qui sont envoyés, attention il faut tout mettre entre accolade{}
• le troisième : c’est le traitement du retour de la fonction php, pour ceci on fait appel à function (sData) {}(attention le traitement se fera entre accolade{})

Ne vous inquiétez pas si vous ne comprenez pas les détails de ces 3 paramètres, on y reviendra un peu plus tard avec des exemples plus parlant.

Maintenant nous allons voir si notre script fonctionne avec firebug, sur note page ecole.php. il faut sélectionner un élève ou une matière pour déclencher l’ajax.

Si tout marche vous devriez voir ça, dans votre console firebug :

Sans plus de détail, on voit que notre message s’affiche correctement.

Si vous ne vous en sortez vraiment pas voici le dossier complet.

Envoyer des paramètres Ajax

Maintenant que nous avons fait appel à notre premier appel ajax, nous allons voir comment envoyer des paramètres.
En javascript, cela ce passe bien naturellement dans notre fonction jQuery.post

iEleve = document.getElementById('eleve').value;
iMatiere = document.getElementById('matiere').value;

jQuery.post("http://localhost/ecole/ajax/chargeNote.php",
			{iPostEleve : iEleve,iPostMatiere : iMatiere},function (sData) {}
	);

iPostEleve et iPostMatiere sont les noms des variables qui vont être envoyées par l’ajax. iEleve et iMatiere ce sont les valeurs que l’on va envoyer( soit les données sélectionnées pas les listes deux listes déroulantes).

Du cotés de chageNote.php comment ça se passe ?

On va récupérer les données comme si on recevait ces données d’un formulaire, grâce à la variable $_POST
.

On va changer le code de notre fichier chargeNote.php :

echo "Eleve : ".$_POST['iPostEleve'];
echo " Matiere : ".$_POST['iPostMatiere'];

Voila ce que cela donne :

Maintenant que l’on sait récupérer l’id_eleve et l’id_matiere, ça ne va pas être compliqué pour récupérer la liste de notes. Notre fichier chargeNote.php va se transformer en :

mysql_connect("localhost", "root", ""); // Connexion à MySQL
mysql_select_db("ecole"); // Selection de la base ecole

$iEleve = $_POST['iPostEleve'];
$iMatiere = $_POST['iPostMatiere'];

if ($iEleve > 0 && $iMatiere > 0)
{
	$oNote = mysql_query('SELECT note FROM note where id_eleve = '.$iEleve.' and id_matiere = '.$iMatiere); // Requête SQL
	while ($aNote = mysql_fetch_assoc($oNote))
	{
		echo $aNote['note'].';';
	}
}
mysql_close();

Ce qui va donner :

Vous pouvez télécharger l’avancement de cet exercice juste ici .

Recevoir et traiter les données

Le travail va se faire autour du script ecole.js, et plus précisément dans notre fonction jQuery.post.

Voici ce que l’on va mettre :

jQuery.post("http://localhost/ecole/ajax/chargeNote.php",
			{iPostEleve : iEleve,iPostMatiere : iMatiere},
			function (sData) {
					var aNotes = sData.split(";");
					document.getElementById('note').innerHTML="";
					for (iNote in aNotes) {
						document.getElementById('note').innerHTML = document.getElementById('note').innerHTML+' '+aNotes[iNote];
					}

			}
	);

C’est la fonction function () {} qui va récupérer les données et les mettre dans sData.
Une fois ce ceci fait, il nous suffit de transformer le résultat en tableau à l’aide de la commande sPlit.
il nous reste plus qu’a afficher les données.

Une petite visualisation :

Voila vous savez faire de l’ajax !

Maintenant vous devriez être capable de faire la moyenne tout seul (surtout que c’est plus simple). :p

Voici la correction :

Si vous avez des questions, c’est juste en dessous .

Installation, Téléchargement

Rendez-vous sur le site de extjs.com et télécharger la version « Ext JS x.x SDK »

Sur votre serveur apache (Wamp, EasyPhp), créer un nouveau répertoire comme ceci :

Ou téléchargez le package de ouf sur le premier exemple.

Exemple : Update

La fonction Update nous permet de mettre a jour les données.
Nous créons une div, par la suite avec l’id unique nous pourrons modifier son contenu.
Voyez plutôt l’exemple :

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<script src="ext/adapter/ext/ext-base.js"></script><br />
<script src="ext/ext-core-debug.js"></script><br />
<title>Waanser : Tuto changement Update d'une div</title></p>
<p><script><br />
function getMessage() {</p>
<p>var el = Ext.get('message');<br />
el.update('Tilkc : Voila c'est super genial enfin bref le contenu de la div a changer... .<br />');<br />
}<br />
</script><br />
</head></p>
<p><body></p>
<p><div id="message"><br />
Cet exemple, en temps de grise mondiale, est le minimum pour changer le contenu d'une div avec ExtJS.<br />
Vous constaterez les moyens techniques spectaculaires afin d'arriver a notre but : Changer le texte.<br />
</div><br />
<a href="#" onclick="getMessage();">Update de la div => GO</a></p>
<p></body><br />
</html><br />

Autre Exemple :

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<script src="ext/adapter/ext/ext-base.js"></script><br />
<script src="ext/ext-core-debug.js"></script><br />
<title>Waanser : Tuto changement Update d'une div 2 plus sympa</title></p>
<p><script><br />
var clique = false;<br />
function getMessage() {</p>
<p>var el = Ext.get('message');</p>
<p>if (!clique) {<br />
el.update('Texte 1 : BLA BLA BLA BLA 1');<br />
clique = true;<br />
} else {<br />
el.update('Texte 2 : BLA BLA BLA 2');<br />
clique = false;<br />
}<br />
}<br />
</script><br />
</head></p>
<p><body></p>
<p><div id="message"><br />
Tilkc : Dans ce deuxieme exemple, a chaque clique sur le lien, le texte changera.<br />
</div><br />
<a href="#" onclick="getMessage();">Update de la div => GO</a></p>
<p></body><br />
</html><br />

Ou téléchargez le package du deuxième exemple