Archives mensuelles : novembre 2011

PHP Tour Lille 2011

Laisser une réponse

Voilà enfin arrivé ce jour tant attendu (en tout cas par moi). Je suis donc prêt, bic et carnet en main, à prendre pleins de bonnes notes sur les différents aspects de PHP.

8h30, je suis sur le parking et avance vers le site de Euratecnologies de Lille. Déjà, rien que pour la réaffectation de ce bâtiment, le détour en valait la peine.

Après avoir récupéré mon badge et mon petit cadeau, un éléphant rose (ça va se chamailler à la maison), je me dirige vers l’auditoire pour la keynote présentée par Jean-Marc Fontaine de Alter Way.
La bienvenue nous est souhaitée et la présentation des deux jours nous est narrée, tout en nous présentant l’AFUP et en nous motivant pour ouvrir des antennes dans nos régions (peut-être une bonne idée à creuser là).

Le sujet de la première conférence à laquelle j’ai assisté est la présentation de PHP 5.4 par Julien Pauli, nous expliquant les grandes nouveautés, qui ne se trouvent pas forcément dans le langage, mais bien dans sa construction, avec la mise en place de RFC, permettant à chaque utilisateur d’émettre des changements dans le langage.
Un cycle de vie déterminé de 3 ans par mise à jour majeure et de 1 an pour une mise à jour mineure.
De plus une bonne nouvelle est que la descendance ne sera plus cassée dans les versions mineures.
Bien sûr, les nouveautés liées au langage nous sont présentées, mais cela n’est plus un secret et l’on trouve tout sur developpez.com.
Par contre, Julien nous annonce un gain de performance de l’ordre de 55% par rapport à PHP5.3, avec benchmark à la clé.
Julien nous a promis ses slides sur le site de l’AFUP très prochainement.

Ensuite, j’ai assisté à l’industrialisation du site lamaisondevalerie.fr , faisant partie du groupe Conforama, présentée par Sophie Beaupuis.
Ici expliquer en quelque mots serait difficile tant les infos étaient nombreuses, on a pu voir tout le panel d’outils utilisés pour le développement de son application (très orienté Zend avec la suite de produit complets).
Ce qui était agréable dans cette présentation est que madame Beaupuis s’est mouillée en nous expliquant les freins liés à son projet et a eu l’honnêteté de dire ‘désolée je ne connais pas’.

J’ai pris 5 minutes pour vous faire ces quelques lignes et je remercie Jean Marc Fontaine de m’avoir trouvé un petit Wifi.
Ce soir je vous poste la suite de cette première journée.
Un seul regret actuellement, est de ne pas avoir pris de CV avec moi, parce que les offres d’emploi ici sont palpables… Merci le réseautage !

Par MaitrePylos

Un classique AJAX : utiliser les données au bon moment !

1 réponse

S’il est une erreur classique chez les débutants en AJAX, que l’on retrouve régulièrement sur le forum AJAX, c’est de vouloir utiliser les données du serveur avant de les avoir reçues.

Faisons une petite analogie.
Imaginons que vous ayez une poule. Tous les matins, vous souhaitez savoir combien d’œufs ont été pondus, vous envoyez donc quelqu’un les compter.
J’imagine, qu’au moment même où cette personne part compter les Å“ufs, il ne vous viendrait pas à l’esprit de l’appeler pour lui demander le compte : la moindre des choses est d’attendre qu’elle soit revenue car avant, elle ne connait pas l’information !

Avec AJAX, c’est exactement pareil. Le premier A de l’acronyme signifie asynchronous (asynchrone), c’est-à-dire que JavaScript ne va pas attendre la réponse du serveur avant de continuer à exécuter le code, sauf bien entendu si vous avez spécifié le mode synchrone.
Ainsi, le seul moment où l’on est sûr d’avoir reçu la réponse est lorsque la propriété readyState de l’objet XMLHttpRequest vaut 4 et que la propriété status correspond à un code de réussite de la requête (classiquement 200). C’est pourquoi tous les traitements se basant sur la réponse du serveur doivent être traités dans le callback de la requête..

Avant d’écrire son code, il est donc fondamental de se demander si les données que l’on veut utiliser existent ou non.

A titre d’exemple, un petit code :

var xhr = new XMLHttpRequest(), monResultat;
xhr.open('POST', url);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        monResultat = xhr.responseText;
        alert(monResultat);
    }
};
xhr.send('variable=valeur');
alert(maVariable);

Ici, le premier alert() affiché sera celui de la dernière ligne : JavaScript n’attend pas la réponse du serveur pour continuer à exécuter le code et cette alerte affichera undefined, puisqu’au moment où cette instruction est interprétée, aucune affectation n’a encore été faite pour maVariable ! Puis, lorsque le serveur aura répondu, le second alert() sera affiché avec cette fois la valeur attendue.

Voir aussi :

Les fonctions de rappel (callback) ou les utilisations cachées de eval()

2 réponses

Il existe de nombreux cas en JavaScript qui nécessitent l’utilisation de fonctions de rappel (callback en anglais).
Une fonction de rappel est une fonction passée en paramètre d’une autre fonction. Pour JavaScript, c’est le cas par exemple de setTimeout(), setInterval() ou encore des fonctions appelées par un gestionnaire d’événement.

Cette notion de fonction de rappel est d’autant plus difficile à appréhender pour les débutants qu’il existe différentes façons distinctes de la définir, dont certaines erronées.

Les trois plus fréquentes sont les suivantes :

  1. document.onclick = maFonction();
  2. document.onclick = "maFonction()";
  3. document.onclick = maFonction;
  1. setTimeout(maFonction(), délai);
  2. setTimeout("maFonction()", délai);
  3. setTimeout(maFonction, délai);

Les exemples (1) sont tout simplement faux et ne produiront pas le résultat attendu. Ils sont un mélange entre les deux formes suivantes et dues à la confusion entre une fonction et le résultat de l’exécution de celle-ci.
Lorsque l’interpréteur JavaScript rencontre la notation maFonction() (donc avec les parenthèses), il comprend qu’il faut exécuter la fonction et le fait donc sur le champ. Or ce qu’attendent les méthodes nécessitant une fonction de rappel, c’est une référence à la fonction. Avec la notation des exemples (1), c’est le résultat de l’exécution qui sera affecté au clic ou au timer, sans attendre le moment souhaité par le développeur.
Les exemples (2) sont syntaxiquement corrects, mais fortement marqués d’obsolescence. En fait, dans ces cas ci, il n’y a pas de fonction de rappel de définie mais une portion de code qui sera évaluée au moment de l’appel. En interne, JavaScript va utiliser la méthode eval() pour interpréter le code, comme le montre l’exemple suivant :

function eval(){
    alert('eval() is evil !');
}
function toto(){
    alert('toto');
}
document.onclick = "toto()";

Dans cet exemple, c’est bien le message eval() is evil ! qui sera affiché. Cette façon de procéder, liée à la préhistoire de JavaScript, est fortement déconseillée !

Dans les exemples (3), c’est bien la référence à la fonction qui est utilisée De ce fait, lorsque le moment sera venu, cette fonction pourra être exécutée sans passer par l’utilisation de eval(), comme le montre l’exemple suivant :

function eval(){
    alert('eval() is evil !');
}
function toto(){
    alert('toto');
}
document.onclick = toto;

C’est bien le message toto qui est affiché lors du clic sur la page.

Note : si vous utilisez une console (par exemple celle de Firebug) pour tester les codes ci-dessus et que vous faites « Exécuter » deux fois de suite, vous obtiendrez le message eval() is evil, cela est dû au fait que l’injection du code dans le document utilise elle aussi des méthodes utilisant en interne eval() qui vient d’être redéfinie.

Mais alors, comment passer des paramètres à la fonction de rappel ?
Effectivement, le seul moyen de passer des paramètres à la fonction de rappel était celle des exemples (2), qui sont déconseillés.
Pour passer des paramètres, il va falloir utiliser une quatrième technique qui consiste à englober l’appel de la fonction de rappel dans une fonction anonyme. Cette fonction anonyme étant définie au moment de l’affectation, elle correspond donc à une référence à une fonction et non à une exécution de celle-ci :

function eval(){
    alert('eval() is evil !');
}
function toto(texte){
    alert(texte);
}
document.onclick = function(){
    toto('Paramètre !');
};

Ce code affiche bien le paramètre passé à la fonction toto, elle-même englobée dans une fonction anonyme.