Les fonctions et traitement Ajax

Fonctions et traitement Ajax

Tout arrive! Maintenant que notre application est bien définie, nos outils prêts, et nos déclencheurs actifs, nous allons pouvoir enfin aborder vraiment Ajax. Pour cela, nous allons devoir, pour chaque outil, écrire les étapes suivantes:
● traitement et décodage du déclenchement
● préparation de la requête Ajax et envoi
● attente et réception du retour
● mis en place des résultats Je vais le faire en détail pour l’outil 1, puis je décrirais uniquement les différences pour les autres outils. Pour l’outil1, le déclenchement se fera pour chaque touche actionnée, mais il nous faut lancer le calcul uniquement lorsque c’est la touche Return qui est actionnée. On crée donc les fonctions lisCodeTouche(evt) et estReturn(evt) (evt étant l’évènement déclencheur) dans commun.js, pour reconnaître le Return (évidemment, le décodage est différent pour IE et les autres!):

function lisCodeTouche(evt) { if (window.event) { // si IE var CodeTouche = window.event.keyCode } else { // si DOM var CodeTouche = evt.which; } return CodeTouche; } function estReturn(evt) { // test si return, retourne true si oui false si non var CodeTouche=lisCodeTouche(evt) return (CodeTouche == 13)? true : false; } 3.1.1 Les requêtes Ajax

Outil 1: calculette
Une requête Ajax va consister à construire un requêteur, qui va gérer en fait le retour de l’information, de manière asynchrone avec l’application, et l’envoi la requête sous forme d’un « Post » (on pourrait aussi utiliser un « Get »), en appelant la page chargée du traitement de
Démarrer avec Ajax et le php: exemple d’application 12/23
l’information sur notre serveur, qui sera un script php capable d’acquérir les données transmises, de les traiter et de renvoyer l’information souhaitée. On va tout d’abord préparer le « Post », en indiquant les variables transmises à la page appelée. Dans le cas de la calculette, c’est simple, on va transmettre l’expression saisie au clavier,en récupérant la valeur du champ « outil1_saisie » et en codant sa valeur sous forme compatible URI :

if(!estReturn(e)) return false; // si pas return, on ne fait rien!! if(!existeChamp(‘outil1_saisie’)) return false; // si pas de champ, non plus ! var expression=document.getElementById(‘outil1_saisie’).value; var data=’expression=’+encodeURIComponent(expression); // a poster !! On code la valeur récupérée dans l’élément de saisie par la fonction « encodeURIComponent » plutôt que de coder l’ensemble par « encodeURI », car cette dernière remplace le + par un espace, et ce n’est pas bon pour notre calcul! Après avoir obtenu un requêteur « requester » (voir plus loin), on pourra expédier notre « Post » en précisant le type d’envoi (‘post’), la destination (ici: le script ‘calculette.php’), le mode asynchrone (‘yes’) qui signifie que l’on attend pas le retour pour continuer l’exécution, le type de données envoyées (Content-Type’), et les données en question (data): requester.open(‘post’,’calculette.php’,true); requester.setRequestHeader(‘Content-Type’,application/x-www-form-urlencoded’); requester.send(data); La fonction d’obtention du requêteur « getRequester » que l’on ajoutera dans commun.js est indiquée ci-dessous, évidemment il faut traiter différemment IE et les navigateurs compatibles DOM, et même les différentes versions d’IE! Bref, sans entrer dans le détail, on crée un objet XMLHTTP qui est la base de tout le fonctionnement d’ Ajax, vous pourrez aller fouiller la littérature pour en savoir plus! function getRequester() { // obtient un requester Ajax compatible IE et DOM try { return new ActiveXObject(‘Msxml2.XMLHTTP’); } catch(e) { } try { return new ActiveXObject(‘Microsoft.XMLHTTP’); } catch (e) { } try { return new XMLHttpRequest(); } catch (e) { } return false; }