AJAX

← Le volet web · 29 diapositives · flèches ou clic pour avancer

Pourquoi et comment - faire de l’AJAX - AJAX - Guide par Nadine Giasson St-Amand
Principe général - Qu’est-ce que c’est - et pourquoi l’utiliser.
Vous pouvez envoyer des messages en réponse à des statuts dans le milieu de votre fil ou mur - Sans perdre la position de votre scroll - Vous pourriez préparer 2 réponses en même temps ! - Votre fil d’actualité se met à jour seul, sans cliquer - Des notifications apparaissent automatiquement - Votre bulle de nombre de messages s’incrémente - Facebook un exemple populaire
Elle implique une communication client-serveur sans changer de page web - Elle permet aussi de soumettre des formulaires - L’AJAX est une technique web qui consiste à faire ‘naviguer’ une sous-fenêtre dans le navigateur sans recharger la fenêtre courante. - Qu’est-ce que c’est ?
Anciennement les iframe ont été utilisées, elles sont interdites dans les normes actuelles. - Maintenant, le JavaScript peut remplacer le contenu de boîtes. - Les navigateurs n’ont pas de réel mécanismes de sous-fenêtre. On simule l’effet de sous-fenêtres en remplaçant des <div> avec le JavaScript. - Qu’est-ce que c’est ?
Le JavaScript communique avec le serveur (le PHP) et reçoit une réponse sous forme de contenu - Le JavaScript traite la réponse et injecte et met à jour l’affichage en remplaçant des contenus de DIV - Qu’est-ce que c’est ? - LE JAVASCRIPT OPÈRE TOUT LE TRAVAIL, C’EST POURQUOI SON INITIALE FAIT PARTIE DU NOM AJAX Asynchronous JavaScript and XML
L’AJAX permet à l’utilisateur de conserver l’état de sa page - L’AJAX économise de la bande passante - L’AJAX permet de contextualiser l’interaction - On appelle RIA (Rich Interface Application) les applications web qui réagissent d’une manière Ajax aux actions de l’utilisateur. - Pourquoi ?
L’AJAX peut suggérer des complétion (auto-complétion) - L’AJAX peut valider des données au moment où l’usager effectue sa saisie et contextualiser sa réponse - Juste à coté du champs - Juste au bon moment - Vous remplissez un formulaire, diverses contributions peuvent être apportées par l’AJAX - Exemples avec un formulaire
Aspects techniques - Il existe différentes manières de faire de l’AJAX : - les variations sont au niveau de l’utilisation ou non de librairies et du choix de format de réponse du serveur vers le code JavaScript
AJAX du navigateur - Un module standard est supporté par tous les navigateurs modernes: l’objet XMLHttpRequest - var ajax = new XMLHttpRequest( ); - On greffe une fonction pour réagir au retour des données. - ajax.onreadystatechange = function(){} - Cependant elle est exécutée plusieurs fois, à chaque changement d’état de la connexion. Il faut tester l’état pour traiter les données au bon moment.…
AJAX du navigateur - Dans l'objet standard ajax, des champs contiennent les données reçues - var ajax = new XMLHttpRequest(); - Si ta requête retourne un XML valide, ce xml sera disponible en format DOM interrogeable dans - ajax.responseXML - Dans tous les cas, le texte de la réponse est dans - ajax.responseText
XML : ajax.responseXML - Avec ajax.responseXML on a accès aux fonctions du DOM - ajax.responseXML.getElementById() - ajax.responseXML.getElementsByTagName() - ajax.responseXML.getElementsByClassName()
JSON : ajax.responseText - On doit seulement reconvertir le JSON (objet javascript sérialisé) en objet JavaScript - objet = JSON.parse(ajax.responseText);
var ajax = new XMLHttpRequest(); - ajax.open('GET', 'http://localhost/ajax/get.php?page=3', true); - ajax.onreadystatechange = function() - { - if(4 == ajax.readyState) - { - var information=document.getElementById('information'); - if(information) - { - information.innerHTML = "Texte " + ajax.responseText; - } - } - } - ajax.send(""); - Ajax du navigateur - GET
var ajax = new XMLHttpRequest(); - ajax.open('POST', 'http://localhost/ajax/post.php', true); - // Des lignes supplémentaires sont requises pour le POST - ajax.setRequestHeader("Method", "POST http://localhost/ajax/post.php HTTP/1.1"); - ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - ajax.onreadystatechange = function(){ } - etc…. -…
permet d’éviter des vérifications d’état - pas de code supplémentaire pour le post - permet la rétrocompatibilité avec les vieux navigateurs - permet de définir séparément dans une autre fonction le code qui traite les données reçues du serveur - Fortement inspirée de XHConn, ce module enveloppe simplement XMLHttpRequest et permet de lancer l’AJAX facilement - Ajax avec Ajax.js – plus simple
function traiterRetour Ajax(reponse) - { - var information = document.getElementById('information'); - if(information) - { - information.innerHTML = "Texte " + reponse.responseText; - } - } - var ajax = new Ajax(); - ajax. executer ( 'GET', ' http://localhost/ajax/get.php ', - 'page=3', traiterRetour Ajax); - Ajax avec Ajax.js - GET - Ouvrez le dans l’autre onglet de navigateur - Un seul appel de…
Tout est pareil !!! On change seulement GET pour POST dans les paramètre de l’appel à connect. - Il est cependant préférable de préparer le travail en GET, pour le changer en POST lorsqu’il est prêt. TOUJOURS tester le script PHP à part. - var ajax = new Ajax(); - ajax. executer ( ‘POST', 'http://localhost/ajax/get.php','page=3', traiterRetour Ajax); - Ajax avec Ajax.js - POST - Ouvrez le dans…
Texte pur: message, valeur - HTML déjà prêt à afficher - XML qui contient des îlots HTML - XML pur à décoder - JSON à décoder - Plusieurs formats sont possibles même si le X de AJAX signifie XML, les formats les plus communs sont : - Données reçues du serveur
On peut utiliser l es fonctions getElementsByTagName() et getElementsB yClassName() - On peut utiliser la fonction getElementById( ) - On peut utiliser les attributs childNodes - Etc. - Si on reçoit du XML conforme - => On peut le récupérer dans reponse.responseXML et ainsi on a un objet DOM semblable à celui de la page we b - Données reçues du serveur
Diverses opérations possibles sur les données - parseInt(chaine) permet de convertir une donnee texte en entier - chaine.replace() permet de remplacer des chaines pour substituer des valeurs dans un template - Si on reçoit autre chose que du XML - => On doit le récupérer avec reponse.responseText et le traiter manuellement - Données reçues du serveur
On l’insère tout simplement avec - cible = document.getElementById(‘cible’) - cible.innerHTML = reponse.responseText; - On peut aussi l’insérer avec JQuery - $ ("#cible").html(reponse.responseText); - Si c’est du HTML déjà prêt - On doit le récupérer avec reponse.responseText mais aucun traitement n’est nécessaire - Données reçues du serveur - On peut aussi combiner en une seule ligne -…
Si le HTML contient des accents (même avec entités HTML) il ne passera pas le validateur XML donc on englobe le code HTMl avec <![CDATA[ et avec ]] - <panier><![CDATA[<div class="produit">…</div>]]</panier> - Cependant, cela implique une étape d’exploration supplémentaire dans le code JavaScript - achats = ajax.responseXML; - panier.innerHTML = achats. getElementsByTagName('panier')[0]; - $(" #…
Processus développement AJAX - Script serveur en PHP - Tester le PHP en ouvrant en permanence son URL dans notre navigateur - - en lui passant des paramètres valides en GET - - en rechargeant la page à chaque changement - Appel JavaScript - Déclencher l’exécution du script par le Javascript - Nommer la fonction qui reçoit et la créer vide - Valider l’url et les paramètres avec un alert() -…
Et avec le Jquery ? - html - head - title - body - div - h1 - input - id="recherche-cadeau" - ul - id="liste-cadeau"
Et avec le Jquery ? - Récupérer un noeud par son id en Javascript pur - var listeCadeau = document.getElementById("liste-cadeau"); - Récupérer un noeud par son id en JQuery - var listeCadeau = $(“#liste-cadeau”) - Récupérer un noeud par nom de balise en Javascript pur - var listeDesUL = document.getElementsByTagName("ul"); - var listeCadeau = listeDesUL[0]; - Récupérer un noeud par son nom de…
Et avec le JQuery ? - Cependant, l’objet obtenu par JQuery est différent de l’objet de base obtenu en JavaScript. Il se voit ajouté toutes les fonctionnalités de JQuery telles que définies dans cette feuille synthèse ( http://oscarotero.com/jquery/ ). - noeud HTML - html() - text() - val() - on() - Par exemple on peut récupérer la valeur inscrite par l’usager dans un champ de recherche grâce à la…
$.ajax({ - url: 'http://localhost/ajax/get.php', - type:GET, - data:{page:3}, - success: function(reponse){ }} - ); - Avec jQuery, le code de traitement de finition de l’ajax est dans une fonction qui se trouve attribuée à succès. Le tout s’écrit dans une seule expression qui commence par $.ajax - Et avec le jQuery ?
http://www.w3schools.com/js/js_events.asp - http://www.w3schools.com/jsref/dom_obj_event.asp - Références