A guide to Ajax Interactions with jQuery

Implémentation

Dans quelles situations utiliser Ajax?

Parfois, mais plus particulièrement dans les interfaces interactives et riches, il est nécessaire d'envoyer ou de recevoir des petits bout d'informations additionnels, sans recharger ni changer de page. Par exemple, si l'on veut qu'un utilisateur envoie un commentaire à un autre par l'intermédiaire d'un formulaire, il est possible avec Ajax de le faire sans changer de page.

Dans ces situations, Ajax nous permet d'envoyer des données à destination d'une page non visible par l'utilisateur, et de lui afficher les résultats de manière transparente. Cette flexibilité ouvre de nouveaux horizons comme la possibilité d'établir des échanges avec une base de données sans que l'utilisateur soit embêté par des temps de chargements qui peuvent être de plus évités. Ce comportement désynchronisé en fait une technologie idéale pour la conception d'interfaces interactives.

Les Événements jQuery: comment déclencher une requête Ajax?

Maintenant que nous savons que grâce à Ajax, il est possible d'échanger des informations entre ressources après qu'une page ai été chargée, nous allons voir comment nous pouvons activer ce processus grâce à un peu de code JavaScript. En d'autres termes, comment déclencher une requête Ajax à partir de jQuery?

jQuery étant une librairie JavaScript, vous pouvez utiliser n'importe quel évènement pour déclencher votre requête. Les plus courant sont click, (quand un élément est cliqué), ou mouseover (quand il est survolé par le pointeur de la souris), mais vous pouvez utiliser n'importe lequel, celui qui sera le plus approprié à ce que vous voulez faire.

Du coup, votre code pourrait commencer de la manière suivante:

jQuery(document).ready(function(){
 
  $("a#myclicktrigger").click(function(){  //Click event
    //Do Some Ajax Here when the link #myclicktrigger is clicked
  });
  $("div#myovertrigger").mouseover(function(){ //Mouse Over event
    //Do Some Other Ajax There when the div #myovertrigger is mouseovered
  });
 
});

La manière dont jQuery créée des requêtes

Avant jQuery, cela demandait pas mal d'effort et quelques lignes de code afin de concevoir une interaction Ajax, mais c'est tellement plus simple maintenant, que vous pouvez apprécier la puissance de cette technologie sans maux de têtes. De plus les méthodes Ajax sont présente dans le coeur de la librairie, pas besoin de plugin additionnel, il suffit juste de choisir celle qui est le mieux adapté au problème posé.

Vous pouvez choisir parmis 6 méthodes différentes:

jQuery.Ajax()

//jQuery.ajax( options ) 
//Loads a remote page using an HTTP request.
 
//ex:
$.ajax({
 type: "POST", //type
 url: "test.php", //url
 data: "id=138&price=200", //data
 success: function(resultfrompage){ alert(resultfrompage); } //callback
});
//This will POST the values to the page test.php and alert the result

La méthode jQuery.Ajax() est la forme la plus élémentaire de requête que vous pouvez obtenir avec jQuery. Vous devez spécifier différentes options qui seront prises en compte pour créer une requête http qui chargera une page distante pour vous. Parmis ces options, on trouve le type de requête (GET ou POST), l'url de la page que vous voulez charger (ex: mypage.php), et vous pouvez même spécifier des paramètres (ex: id=138&price=200).

Le problème qui se pose, c'est que cette méthode va charger toute la page distante, y compris ses headers, pas seulement le contenu mais toute la réponse http. Du coup, cette méthode est à privilégier seulement si vous avez besoin de ces éléments en plus, sinon il existe d'autres méthodes plus appropriées comme nous allons le voir.

load()

//load( url, data, callback )	
//Loads HTML from a remote file and inject it into the DOM.
 
//ex:
$("#mycontainer").load("remotecontent.html");
//This will get the content of the file remotecontent.html 
//and inject it into the div#mycontainer

La méthode load() est déjà plus intéressante. Vous spécifiez un conteneur dans votre page, comme un div par exemple, et la méthode load va obtenir par Ajax le contenu d'une page distante et l'insérer directement dans votre conteneur.

Tout comme pour la méthode jQuery.Ajax, vous pouvez spécifier dans les paramètres une url de page (remotecontent.html), quelques données, et une fonction callback.

jQuery.get()

//jQuery.get( url, data, callback, type ) 
//Loads a remote page using an HTTP GET request.
 
//ex:
$.get(
 "mypage.php", //url
 {firstname:"jeremy",lastname:"desvaux"}, //array of data
 function(returneddata){ //callback
   alert(returneddata);
 }
)};
//This will send a get request to the specified page, and alert the result

La méthode jQuery.get() est avec jQuery.post() la méthode que j'utilise le plus.

Le principe est très simple, vous spécifiez une url, et quelques données en paramètre, et la méthode $.get va envoyer la requête GET via Ajax à la page spécifiée et vous retournera le résultat que vous pourrez interpréter à l'aide d'une fonction callback. C'est assez simple à utiliser et vous permet de faire pas mal de choses intéressantes comme par exemple demander et afficher des informations sur un produit sans changer de page. C'est de toute évidence une méthode à privilégier.

jQuery.getJSON

//jQuery.getJSON( url, data, callback ) 
//Loads JSON data using an HTTP GET request.
 
//ex:
$.getJSON(
 "mypage.php", //url
 {firstname:"jeremy",lastname:"desvaux"}, //array of data
 function(returneddata){ //callback
  $.each(data.items, function(i,item){
   alert(item.firstname+" "+item.lastname);
  });
 }
)};

La méthode jQuery.getJSON est dérivée de la méthode jQuery.get() mais s'utilise dans un cas particulier, qui est, comme son nom l'indique, quand on chercher à retourner du code JSON via Ajax.

JSON est un langage efficace quand l'on veut charger rapidement une structure de données dans un script JavaScript. C'est donc un choix particulièrement judicieux pour échanger des informations entre un script PHP et jQuery car les deux langages possèdent nativement des fonctions pour travailler avec. Pour résumer, on envoie une requête getJSON à une page distante. Celle ci travaille avec les données et retourne un tableau JSON. Ce JSON, qui est souvent plus léger que le code hmtl/xml correspondant est ensuite interprété dans le code JavaScript.

jQuery.getScript()

//jQuery.getScript( url, callback ) 
//Loads and executes a JavaScript file using an HTTP GET request.
 
//ex:
$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});
//Loads the script of your choice, specified by its url, then executes it.

La méthode jQuery.getScript est utile si vous avez besoin de charger dynamiquement un script externe non présent lors du chargement de la page. Par exemple, si vous avez besoin de charger le script d'un plugin afin de pouvoir bénéficier des ses fonctionnalités, vous pourrez peut être le charger à partir d'un réseau CDN comme google grâce à cette méthode.

Cette méthode n'est pas vraiment ma préférée, je ne l'utilise pas vraiment.

jQuery.post()

//jQuery.post( url, data, callback, type ) 
//Load a remote page using an HTTP POST request.
 
//ex:
$.post(
  "mypage.php", 
  {firstname:"jeremy",lastname:"desvaux"},
  function(data){
   alert("Data Loaded: " + data);}
});
//This will post the data firstname and lastname to the page mypage.php 
//and alert the results.

La méthode jQuery.post est celle que je trouve la plus intéressante avec jQuery.get(). Elles fonctionnent de manière similaires, la seule différence étant comme vous pouvez le deviner le fait que l'une génère une requête POST et l'autre une requête GET.

Cette méthode très pratique vous permet de poster des paramètres vers une page distante comme si elles étaient postées à partir d'un formulaire. Un nouvel horizon s'ouvre alors, il est par exemple possible d'entrer en relation avec une base de données et y demander ou éditer des données, sans que l'utilisateur ne soit ennuyé, ce qui est bien mieux d'un point de vue de l'expérience qu'il en tirera.

Maintenant que nous avons revu les différentes méthodes disponibles pour créer des requêtes Ajax du côté client, nous allons analyser ce qu'il set possible de faire du côté serveur où les pages vont recevoir les données.

Travailler avec les requêtes côté serveur

Ce qui est vraiment très intéressant avec Ajax du côté serveur, c'est qu'il n'y a absolument aucune différence dans la manière d'écrire un script. Tout ce passe exactement comme si aucun Ajax n'était impliqué. Vous pouvez par exemple accéder les arrays $_POST et $_GET de la même manière dont vous le faite habituellement. Si si vraiment. Jetons un coup d'oeil à l'exemple suivant:

//On the client side, you create your request
jQuery(document).ready(function(){
 
  $("a#myclicktrigger").click(function(){  //Click event
    //Will post the data to mypage.php when the link #myclicktrigger is clicked
    $.post(
      "mypage.php", 
      {firstname:"jeremy",lastname:"desvaux"},
      function(data){
        alert("Data Loaded: " + data);}
    });    
  });
 
});

//On the server side, you handle your data:
//So mypage.php could look like:
<?php
	$firstname = htmlentities($_POST["firstname"],ENT_QUOTES);
	$lastname = htmlentities($_POST["lastname"],ENT_QUOTES);
	echo $firstname." ".$lastname;
	//Like you would normally do.
?>

Si l'on analyse ces quelques lignes de code, nous pouvons voir qu'un requête Ajax Post est crée entre les lignes 6 et 11. Cette requête va poster les variables firstname et lastname vers la page mypage.php dès que le lien #myclicktrigger sera cliqué.

Puis, côté serveur, on accède l'usuel tableau$_POST pour retrouver les données postées. Il n'y a donc rien de dépaysant du côté serveur quand on en vient à coder de l'Ajax.

Retourner le résultat à l'utilisateur

Jusqu'ici dans notre cheminement, nous avons appris comment créer une requête Ajax, comment l'envoyer du côté serveur, et comment y retrouver nos données afin de pouvoir travailler avec. Seulement, étant donné que nous travaillons avec Ajax, et que du coup tout cela se passe de manière transparente pour l'utilisateur, il est très important de faire un effort particulier afin de l'informer de ce qui se passe.

Pour cela, je voudrais attirer votre attention sur le fait que chaque méthode Ajax jQuery listée ci dessus peut avoir une fonction callback, c'est à dire une fonction qui sera appelée une fois que le résultat de la requête sera arrivé. C'est cette fonction qui possède en paramètre le résultat de la requête. Mais que contient ce résultat? C'est très simple, il contient tout ce que vous décidez d'afficher dans la page distante.

Par exemple, si vous reprenez le morceau de code précédent, à la ligne 6, dans mypage.php, vous verrez echo $firstname." ".$lastname; Et dans le JavaScript, ligne 9, vous avez la fonction callback qui contient le résultat en paramètre et l'alert(). Basé sur ce que l'on vient de dire, la fonction callback va donc recevoir la phrase Jeremy Desvaux depuis mypage.php et va l'afficher.

A partir de ce principe, vous pouvez développer des interactions bien plus complexes entre les scripts côté client et serveur. Si je reprends l'exemple de l'utilisateur qui veut envoyer un commentaire à un autre, il est possible de le faire via Ajax sans changer de page. La requête Ajax va envoyer les données postées à la page distante, qui va les récupérer et insérer le commentaire correspondant dans la base de données. Cette page va ensuite retourner le résultat de la transaction au script jQuery via la fonction callback et jQuery pourra l'afficher à l'utilisateur. Vous pouvez trouver une solution complète de ce scenario sur la page dédiée aux commentaires Ajax.

Conclusion

Voila qui achève le processus d'interaction Ajax avec jQuery. Il peut être résumé en 5 étapes différentes: Préparer une requête grâce à l'une des 6 méthodes disponibles, Envoyer cette méthode sous le déclenchement d'un évènement particulier, récupérer et travailler les données côté serveur, et finalement renvoyer le résultat au JavaScript puis à l'utilisateur.

Grâce à jQuery, les possibilités qu'offrent la technologie Ajax ne sont plus limitées par les difficultés techniques mais par votre propre créativité. Faites moi savoir si vous avez des difficultés avec un problème Ajax, j'essayerai de vous aider et je mettrais l'article à jour avec ceux qui sont les plus intéressants.

Bon codage à tous!

Partager:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Vous seriez peut être aussi intéressé par::

• 
• 
• 
• 
• 
• 

Poster un Commentaire

Pseudo:

Email:

Site Web:

Message:

Commentaires récents