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 3 - Librairie Yahoo! UI (YUI)

Nous utiliserons les utilitaires Event, Connection et DOM de YUI.

Inclusion des utilitaires YUI

Il faut donc inclure les librairies suivantes dans l’en-tête du document:

<!-- Base -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js"></script>
 
<!-- Event -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/event/event-min.js"></script>
 
<!-- Connection -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/connection/connection-min.js"></script>
<!-- DOM -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dom/dom-min.js"></script>

Yahoo! offre gratuitement un service d’hébergement pour les librairies YUI. Vous pouvez donc utiliser ce service si vous ne désirez pas téléchargement les librairies.

Explications sur l’utilitaire Connection

L’utilitaire Connection contient et définit plusieurs méthodes utiles à l’utilisation d’AJAX dont la méthode asyncRequest. Cette méthode permet de faire appel à une page grâce une transaction HTTP de type GET ou POST et d’en récupérer sa réponse et contenu. Des fonctions de type “callback” sont définies afin de gérer les succès et échecs de cette transaction.

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
Explications des paramètres
Paramètre Valeur Explications
Paramètre Valeur Explications
retour (transaction) Référence vers la transaction effectuée.
1re paramètre GET Spécifique le type de requête HTTP. (GET dans le cas présent)
2e paramètre sURL Chaine de caractère contenant l’URL vers le script appelé.
3e paramètre callback Référence vers un objet qui gérera la réponse du serveur.
4e paramètre null Variable utilisée pour envoyées des valeurs lors de requêtes POST. Peut être null ou ignoré si GET est utilisé.

L’objet callback

L’objet callback contient des méthodes définissant les opérations à exécuter en cas de succès ou d’échec de la transaction.

Dans l’exemple suivant, un objet callback est déclaré. La méthode success représente la fonction qui sera appelée en cas de succès et failure la fonction qui sera appelée en cas d’échec. abort peut être défini si nécessaire.

Des arguments utilisateur peuvent être définies si nécessaire via la propriété argument. Ils seront accessibles dans l’objet de réponse.

Un timeout peut être défini si nécessaire via la propriété timeout.

/*
* Les méthodes peuvent être remplacées
* par des références de fonctions.
*/
var callback =
{
  success: function(o) { /* opérations en cas de succès */ },
  failure: function(o) { /* opérations en cas d'échec */ },
  abort: function(o) { /* opérations en cas d'interruption */ },
  timeout: 5000,
  argument: [argument1, argument2]
}

Lors de l’exécution de la méthode, l’argument o contiendra une référence vers l’objet de réponse. Les propriétés suivantes seront disponibles dépendament de la réponse:

En cas de succès
Propriété Explications
Propriété Explications
tId Identifiant unique pour la transaction.
status Code HTTP du résultat de la transaction.
statusText Message associé au code HTTP du résultat de la transaction.
getResponseHeader Retourne la valeur de l’entête spécifié.
getAllResponseHeaders Retourne toutes les entêtes en tant que chaine de caractères.
responseText Réponse du serveur en tant que chaine de caractère.
responseXML Réponse du serveur en tant que document XML.
argument Argument défini par l’utilisateur dans l’objet callback.
En cas d’échec
Propriété Explications
Propriété Explications
tId Identifiant unique pour la transaction.
status Code HTTP du résultat de la transaction.
statusText Message associé au code HTTP du résultat de la transaction.
argument Argument défini par l’utilisateur dans l’objet callback.
En cas d’interruption
Propriété Explications
Propriété Explications
tId Identifiant unique pour la transaction.
status -1
statusText “transaction aborted”
argument Argument défini par l’utilisateur dans l’objet callback.

Consultez la documentation pour plus de détails sur les méthodes disponibles.

Explications sur l’utilitaire DOM

L’utilitaire DOM définit plusieurs méthodes facilitant la manipulation du DOM.

Nous utiliserons que la méthode get. Il suffit de passer en paramètre l’ID de l’élément à récupérer et l’objet représentant cet élément sera retourné.

var element = YAHOO.util.Dom.get('IDelement');

Consultez la documentation pour plus de détails sur les méthodes disponibles.

Explications sur l’utilitaire Event

L’utilitaire Event définit plusieurs méthodes facilitant la création, modification d’évènements en fournissant une interface simple d’utilisation pour Javascript.

Nous utiliserons la méthode addListener pour attacher et déclencher une fonction lors de la modification de la première liste déroulante.

YAHOO.util.Event.addListener("IDelement", "event", callback);
Explications des paramètres
Propriété Explications
Propriété Explications
IDelement Attache la fonction de gestion d’évènement à l’élément IDelement.
event Évènement à gérer (exemple: click)
callback Fonction de type callback qui sera déclenchée par l’évènement

Consultez la documentation pour plus de détails sur les méthodes disponibles.

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