L’Ajax avec Prototype, jQuery, MooTools

par Kevin

Pour ceux qui souhaitent ce mettre à l’Ajax, mais qui trouve la syntaxe de celui-ci trop lourde, voici un petit article sur l’utilisation de l’Ajax avec trois des plus gros frameworks JavaScript.

Mais avant tout, si quand je dis Ajax vous pensez à une marque de lessive, à l’un des héros de la guerre de Troie ou pire … je ne peux que vous conseiller d’aller faire un tour sur ces sites :

Environnement

Nous allons dans un premier temps mettre en place les 2 pages que nous utiliserons pour nos tests.

La première page sera ajax.php :

  1. <?php
  2. if ( isset($_POST[‘ajax’]) ) {
  3.         switch $_POST[‘ajax’] {
  4.                 case ‘date’:
  5.                         echo time();
  6.                         break;
  7.                 case ‘ip’:
  8.                         echo $_SERVER[‘REMOTE_ADDR’];
  9.                         break;
  10.                 default:
  11.                         echo ‘Hello !’;
  12.         }
  13. }
  14. ?>

Petite analyse du code : on renvoi la timestamp, l’ip ou un message selon la valeur envoyé en POST.

Le seconde page maintenant, index.html :

  1. <script type="text/javascript">
  2.         function changeList(el) {
  3.                 // Emplacement du Script
  4.         }
  5. </script>
  6. <select id="list" onchange="changeList(this)">
  7.         <option>none</option>
  8.         <option>date</option>
  9.         <option>ip</option>
  10. </select>

Note : n’oubliez pas d’inclure le framework que l’on utilisera

JavaScript

Avant d’utiliser une framework, nous allons voir la tête du script sans framework.

  1. function changeList(el) {
  2.         var xhr;
  3.         try { xhr = new XMLHttpRequest(); }
  4.         catch (e) {
  5.                 xhr = new ActiveXObject(Microsoft.XMLHTTP);
  6.         }
  7.  
  8.         xhr.onreadystatechange = function () {
  9.                 if (xhr.readyState == 4)
  10.                         if (xhr.status == 200)
  11.                                 alert(xhr.responseText);
  12.                         else
  13.                                 alert(xhr.status);
  14.         }
  15.  
  16.         xhr.open(’POST’, ‘ajax.php’, true);
  17.         xhr.setRequestHeader(”Content-type”, “application/x-www-form-urlencoded”);
  18.         xhr.send(’ajax=’ + el.options[el.selectedIndex].value);
  19. }

Assez lourd n’est-ce pas ?

Prototype

  1. function changeList(el) {
  2.         new Ajax.Request(’/ajax.php’, {
  3.                 method: ‘post’,
  4.                 parameters: {’ajax’: el.options[el.selectedIndex].value},
  5.                 onSuccess: function(xhr) {
  6.                         alert(xhr.responseText);
  7.                 },
  8.                 onFailure: function(xhr) {
  9.                         alert(’Error’);
  10.                 }
  11.         });
  12. }

Déjà plus léger.

jQuery

  1. function changeList(el) {
  2.         $.ajax({
  3.                 type: ‘POST’,
  4.                 url: ‘ajax.php’,
  5.                 data: ‘ajax=’ + el.options[el.selectedIndex].value,
  6.                 success: function(msg) {
  7.                         alert(msg);
  8.                 },
  9.                 error: function() {
  10.                         alert(’Error’);
  11.                 }
  12.         });
  13. }

MooTools

  1. function changeList(el) {
  2.         var ajax = new Ajax(’ajax.php’, {
  3.                 method: ‘POST’,
  4.                 data: ‘ajax=’ + el.options[el.selectedIndex].value,
  5.                 onComplete: function(msg) {
  6.                         alert(msg);
  7.                 },
  8.                 onFailure: function() {
  9.                         alert(’Error’);
  10.                 }
  11.         }).request();
  12. }

Besoin de conclure ? On voit rapidement que l’utilisation de l’un des frameworks simplifie grandement la chose. Tout simplement efficace et productif !

Rss Commenti

3 Commentaires

  1. Intéressant de voir ces quatre solutions ensemble.
    Bonne idée.

    #1 dmx

  2. Merci =)

    #2 Chris-vip

  3. Excellent, je crois que je vais le reprendre sur une slide de formation, si tu en es d’accord.

    #3 Mère Teresa

Laissez un commentaire