Génération PHP.net » Archive du blog » AJAX avec PHP et YUI
« WordPress 2.3.2
PHP 4.4.8 »

AJAX avec PHP et YUI

Étape 4 - Exemple final

Poursuivons notre exemple et créons donc un objet AjaxObject qui contiendra les méthodes auxquelles notre objet callback fera référence.

Afin d’afficher la liste des pays récupérées, nous modifierons la 2e liste déroulante en manipulant le DOM. Le script est commenté afin de bien expliquer le fonctionnement de chaque partie.

/*
* Définition d'un objet Ajax
*/
var AjaxObject = {
 
  /*
  * Méthode en cas de succès
  */
  handleSuccess:function(o){
 
    this.processResult(o);
  },
 
  /*
  * Méthode en cas d'échec
  */
  handleFailure:function(o){
 
    // Création d'un noeud <option>
    var option = document.createElement('option');
    option.appendChild(document.createTextNode('Aucun pays'));
    YAHOO.util.Dom.get('pays').appendChild(option);
  },
 
  /*
  * Méthode de traitement de résultats
  */
  processResult:function(o){
 
    // Vidage des <option> de la liste déroulante
    YAHOO.util.Dom.get('pays').innerHTML = '';
 
    /*
    * Réponse XML
    */
    if (o.responseXML) {
 
      // Récupération des éléments <pays> de la réponse
      var data = o.responseXML.getElementsByTagName('pays');
 
      for(var i=0;i<data.length;i++) {
 
        /*
        * Création de l'élément <option>
        */
        var option = document.createElement('option');
        // Valeur = code alpha2 du pays
        option.setAttribute('value', data[i].getAttribute('alpha2'));
        // Contenu de l'élément <option> = Nom du pays (anglais)
        option.appendChild(document.createTextNode(data[i].firstChild.nodeValue));
        // Ajout du noeud à l'élément <select> pays
        YAHOO.util.Dom.get('pays').appendChild(option);
      }
    }
 
    /*
     * Fallback sur méthode d'échec si aucun réponse XML
     */
    else {
 
      this.handleFailure(o);
    }
  },
 
  /*
  * Exécution de la requête AJAX via requête HTTP GET
  */
  startRequest:function() {
 
    var continent = YAHOO.util.Dom.get('continent').value;
    YAHOO.util.Connect.asyncRequest('GET', 'pays.php?continent='+continent, callback, null);
  }
 
};
 
/*
 * Définition des méthodes de succès et d'échec
 */
var callback =
{
  success:AjaxObject.handleSuccess,
  failure:AjaxObject.handleFailure,
  scope: AjaxObject
};

Attachons la méthode startRequest à l’évènement onChange de la première liste déroulante:

YAHOO.util.Event.addListener('continent', 'change', function(e) { AjaxObject.startRequest(); } );

Les 2 listes déroulantes sont maintenant liées. La liste des pays sera récupérée via AJAX lorsque l’évènement onChange sera déclenchée sur la première liste déroulante. Les pays seront insérés dans la seconde via une manipulation du DOM.

Conclusion

Vous pouvez télécharger une archive contenant tous les fichiers nécessaires au bon fonctionnement de l’exemple:

Pour plus d’informations:

Pages: 1 2 3 4 5

Cet article a été publié le Dimanche 30 décembre 2007 à 6:12 et est classé dans PHP. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.

Laisser un commentaire