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

Voila nous allons nous attaquer au slide sur Extjs.

On commence, allez c’est parti 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 pour les fainéants le super package déjà tous prêt.

On va créer une div avec l’id « slide » et la rendre invisible par un style css.

La fonction slideIn de Ext va rendre visible cette div, mais avec un effet de déroulement.
Voici le code:

Exemple : SlideIn

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
function getSlide() {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
salut
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

Plutôt simple non? mais
voilà c’est fini,
On a tant ressassé les mêmes théories
On a tellement tiré chacun de nôtre côté
Que voilà c’est fini, euh hum, non je vous donne un dernier exemple pour ouvrir et fermer la div, parce que vous allez pas le croire, il y a la fonction SlideOut NON et
bien SI.

Exemple : SlideOut

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
var clique = false;
function getSlide() {

if( !clique) {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = true;

} else{

if (clique) {

Ext.get("slide").slideOut('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = false;
}

}

}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
La fonction SlideIn de ExtJs, vient de rendre visible notre div,
il y a plein de paramètres, par exemple rendre l'effet de déroulement plus ou moins lent.
<a href="http://extjs.com/deploy/dev/docs/" target="_blank">Voir ici la documentation c'est en anglais en plus, alors c'est super allez-y !</a>
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

bon pour les fainéants, c’est par ici.

Mise en place de script.aculo.us.

Voici les étapes nécessaires pour la mise en place du framework script.aculo.us

1. Téléchargement
2. Création de l’arborescence

Téléchargement script.aculo.us

Nous allons commencer par télécharger la librairie script.aculo.us sur le site officiel.

librairie script.aculo.us

Création de l’arborescence

Pas de prise de tête, on va faire une arborescence très simple.
On va décompresser la librairie script.aculo.us. et copier les dossier lib et src pour les mettre dans la racine
de notre dossier dragNdrop. Et on va créer notre dossier image, où seront stockées les images à manipuler.

Comme je suis sympa, je vous ai préparé l’arborescence.

Fonctionnement du Drag And Drop

Le fonctionnement du Drag And Drop se divise en 4 étapes.

La première partie, c’est de définir nos conteneurs que l’on va manipuler.
Pour ceci on va utiliser la balise <div>.

Après nous allons définir les dimensions de nos conteneurs en utilisant le css.

C’est dans cette 3ème étape que nous allons faire appel à notre framework script.aculo.us. par le biais
de fonctions javascript.

Enfin nous feront appel à ces fonctions JS en utilisant onload, onmousedown et onmouseup.

Création de nos conteneurs

Nous allons créer notre fichier index.html.

Nous allons créer un premier conteneur que l’on va appeler plateau.
Dans celui-ci deux autres conteneurs (boite1 et boite2) seront créés.

<body>
<div id="plateau">
	<div id="boite1">
		<img id="image1" src="./image/1.png" />
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" />
	</div>
</div>
</body>

Le résultat :

exemple script.aculo.us.

Définitions des dimensions de nos boîtes

Bon beh la, ce n’est pas compliqué c’est du css tout basic.

<head>
<style type="text/css">
	#boite1 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#boite2 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#plateau {
		width: 1024px;
		height: 500px;
		border: 0px solid #FF0000;
	}
</style>
</head>

Cela rend déjà mieux :

exemple script.aculo.us.

Les fonctions javascripts

On va faire appel au framework script.aculo.us.

<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./src/effects.js" type="text/javascript"></script>
<script src="./src/dragdrop.js" type="text/javascript"></script>

On va créer nos fonctions javascripts.

Cette fonction change le style de la bordure de notre boîte (en pointillé).

function cache ( id ) {
	id.style.border = '1px dashed #000000';
}

Et celle-ci rend la bordure de la boîte continu.

function cache ( id ) {
	id.style.border = '1px solid #000000';
}

Et la fonction la plus importante ; celle qui définit les boites à déplacer.

new Draggable : définit la boite à manipuler.
Sortable.create : définit le plateau où les boites pourront se déplacer.

var drag1;
var drag2;

function init () {
	drag1 = new Draggable('boite1', {ghosting: true});
	drag2 = new Draggable('boite2', {ghosting: true});
	Sortable.create('plateau',{
					tag:'div',
					overlap:'horizontal',
					ghosting: true,
					constraint: false
					});
}

Appel de nos fonctions JS

Pour préparer le plateau il suffit d’utiliser l’attribut onload qui fera appel à notre fonction init().

Et pour faire l’effet de transparence, il faut utiliser l’attribut onmousedown et onmouseup.

<body onload="init()">
<div id="plateau">
	<div id="boite1">
		<img id="image1"  src="./image/1.png" onmousedown="cache(this);" onmouseup="affiche(this);"/>
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" onmousedown="cache(this);" onmouseup="affiche (this);"/>
	</div>
</div>
</body>

Et voila c’est fini

Voila le code source complet.