L’AJAX est de plus en plus présent de nos jours dans les applications web dites « 2.0″. Il y a quelque temps, j’avais expliquer comment utiliser AJAX avec Prototype JS et aujourd’hui je vais vous apprendre comment utiliser les requêtes AJAX avec jQuery.

jQuery tente de s’imposer dans le monde du web2.0 et à entièrement réussi son paris (plutôt osé), son code est très simple, intuitif et vraiment efficace.
Le principe de jQuery est d’écrire moins mais pour faire plus (comme le dis le slogan) et je vais vous démontrer que cela est possible avec l’AJAX.

Les fondamentaux

jQuery propose 5 facons d’utiliser l’AJAX différentes mais toute aussi efficace les une par rapport au autres :

  • load : utilisé pour charger simplement le contenu d’une page PHP ou HTML.
  • get : utilisé pour charger le contenu d’une page PHP avec la méthode GET.
  • getJSON : utilisé pour charger le contenu d’une page PHP avec la méthode GET et récupéré le json de retour.
  • post : utilisé pour charger le contenu d’une page PHP avec la méthode POST.
  • getScript : utilisé pour charger un fichier javascript en local.

Voila les 5 méthodes principales d’utilisation d’ajax que je développerais par la suite.

De plus, jQuery propose 6 événements récupérable durant l’éxécution d’une requête AJAX ; les événements prennent en paramètre une function. Voici la liste des événements

  • complete : Exécute une fonction quand la requête AJAX est terminée.
  • error : Exécute une fonction quand la requête AJAX contient une erreur.
  • send : Exécute une fonction quand la requête AJAX va commencer.
  • start : Exécute une fonction quand la requête AJAX commence.
  • stop : Exécute une fonction quand la requête AJAX s’arrête.
  • success : Exécute une fonction quand la requête AJAX est terminé avec succès.

Cela va nous suffire pour commencer à travailler !

Les exemples

get

// Page test.php
echo $_GET['name'] .' '.$_GET['email'];
$(document).ready(function () { // on verifie que la page est chargée
	// on lance l'ajax sur la page php avec certains paramètres
        $.get("test.php",{name: "John", email: "john@ndd.com"},
        function success(data){ // au succès on renvoie le résultat de la requête
		alert(data); // on l'affiche
	});
});

post

// Page test.php
echo $_POST['name'] .' '. $_POST['email'];
$(document).ready(function () {
	$.post("test.php", { name: "John", email: "john@ndd.com" },
	function success(data){
		alert(data);
	});
});

Le code de des méthodes sont quasiment identiques mais l’une passe les données en GET (test.php?name=John&email=john@ndd.com) et l’autre en POST (invisible).

post json

echo json_encode($_POST);
$(document).ready(function () {
	$.post("test.php", { name: "John", email: "john@ndd.com" },
	function success(data){
		alert(data.name +' '+data.email);
	},"json"); // on passe en paramètre optionnel le type de retour ici JSON
});

Ici c’est aussi très simple! Le format JSON permet de retourner un ensemble de valeur ou lieu d’une seule; ce qui peut être très pratique dans certains cas.

Conclusion

Pour conclure, nous pouvons dire que la manipulation de l’AJAX est vraiment aisé avec jQuery et vaut vraiment le détour !