AJAX-jQuery AJAX AJAX est l’acronyme d’Asynchronous JavaScript and XML. Le terme AJAX est apparu pour la première fois le 18 février 2005, dans un essai de James Garret intitulé "Ajax : une nouvelle approche pour les applications Web". AJAX n’est pas un langage en soit, c’est un terme synthétique qui désigne l’utilisation conjointe de différentes technologies dans la création de pages web. Ainsi AJAX incorpore : le HTML et les feuilles de style CSS ; le JavaScript ; le Document Object Model (DOM) ; l’objet XMLHttpRequest ; le XML et le XSL. L’objet XMLHttpRequest permet de lancer des requêtes de la page web vers le serveur pour y récupérer des fichiers. Son fonctionnement permet d’effectuer ces requêtes de façon asynchrone, soit en arrière-plan de la page et de façon complètement transparente pour l’utilisateur. Avantage La technologie AJAX se révèle bien adaptée pour les applications mobiles car elle permet de ne charger qu’un contenu de taille réduite au lieu de devoir effectuer une requête complète pour recharger la page. Le temps d’attente de l’utilisateur est réduit car il n’est plus nécessaire de recharger toute la page pour obtenir une nouvelle information. La fluidité de la navigation peut être amélioré Application Hypermédia 1 Simon Guimond Dufour Julie Gagnon Désavantage Développer une application AJAX peut augmenter sensiblement le temps de conception et donc le coût. AJAX comporte beaucoup de JavaScript. Les utilisateurs qui ont désactivé la prise en charge du JavaScript par leur navigateur ne pourront pas accéder aux applications AJAX. Le référencement des pages en AJAX ne sera pas simple à réaliser Transmission des données Il est possible de passer des arguments à notre requête Web soit en mode GET ou en mode POST. La méthode GET var value1 = encodeURIComponent(value1), var value2 = encodeURIComponent(value2); xhr.open('GET', 'http://mon_site_web.com/ajax.php?param1=' + value1 + '&param2=' + value2); xhr.send() La méthode POST xhr.open('POST', 'http://mon_site_web.com/ajax.php'); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send('param1=' + value1 + '&param2=' + value2); Les données envoyées doivent être au format XML, JSON ou texte. PHP supporte bien l’envoi de ces types de données respectivement avec les fonctions de SimpleXML et json_encode jQuery, décrit ci-dessous, possède une fonction AJAX qui simplifie le code nécessaire. Démo : http://webc.cegepsherbrooke.qc.ca/~tijg09/ajax.html jQuery Le premier objectif de JQuery est de simplifier le codage JavaScript pour des opérations qu’un développeur Web fait à tous les jours. De plus, JQuery à pour objectif d’être intercompatible entre les divers navigateurs. Sa principale tâche est de standardiser un code entre les navigateurs. De plus, plusieurs fonctions nous permettent de sélectionner un ou plusieurs éléments HTML et de leur appliquer une modification tant HTML que CSS. Ces actions peuvent être déclenché par un évènement. Évidemment, lorsqu’on exécute une fonction JQuery, des instructions JavaScript s’exécutent derrière. Donc, JQuery ajoute une couche de traitement ce qui peut ralentir l’exécution. Par contre, du coté du développeur, il peut voir son travail simplifié et il s’assure d’une uniformité sur les différents navigateurs. Bien que les navigateurs s’approchent d’une standardisation, certains bogues subsistent. C’est un choix à faire. Ce qui doit orienter ce choix est de toujours savoir ce que fait JQuery à votre place. Pour certaines fonctions, JQuery est moins efficace que le JavaScript. De plus, il y a de bonnes pratiques sur l’utilisation de JQuery qui doivent être observées. Application Hypermédia 2 Simon Guimond Dufour Julie Gagnon De nos jours, de plus en plus de bibliothèques JavaScript voient le jour, mais selon des statistiques JQuery demeurent de loin la plus populaire. (https://w3techs.com/technologies/overview/javascript_library/all ) Installation Pour utiliser JQuery, il faut ajouter la bibliothèque à notre page Web. Nous utiliserons la balise <script> qui appelle un fichier externe et nous nous servirons de notre ami Google qui héberge les principales bibliothèques sur ses serveurs. Il est possible de consulter la liste des bibliothèques disponibles et les inclusions de scripts à faire pour les ajouter à nos pages Web à l’adresse suivante : https://developers.google.com/speed/libraries/ Ce genre de dépôt se nomme CDN et est très pratique, car cela libère la bande passante de notre serveur d’hébergement. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Premier exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> Inclusion de la librairie JQuery <body> <p> Un paragraphe </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script>$('body p').html('JQuery Fonctionne!');</script> </body> </html> Utilisation de la librairie JQuery Sans JQuery, cette page vous affichera le texte « Un paragraphe » alors que si votre JQuery est bien installé, il affichera « JQuery fonctionne! » Utilisation Décortiquons l’exemple ci-dessus. L’utilisation de jQuery commence par la fonction $() ou jQuery(). Ces 2 fonctions font le même travail, mais jQuery est plus sécuritaire si nous utilisons plusieurs bibliothèques. La syntaxe standard d’une commande jQuery va comme suit : jQuery('sélecteur CSS').fonction_jQuery('paramètres'); sélecteur CSS : Tous les sélecteurs CSS que nous avons vus (ex : p, html, body, a, ul, li, etc.) fonction_jQuery : Action qui sera faite sur les éléments sélectionnés. Nous les détaillerons au prochain point. paramètres : paramètres qui sont passées à la fonction jQuery. Comment s’assurer que le code jQuery s’exécute après le chargement complet de la page ? Application Hypermédia 3 Simon Guimond Dufour Julie Gagnon Le jQuery(document).ready() va attendre que la page (HTML + CSS + JS) soit chargée pour exécuter le code qui est dans la fonction. Ce qui nous permet d’être certains que lorsque les instructions jQuery manipuleront les éléments de la page Web ils auront eu le temps de se charger. <script> jQuery(document).ready(function($){ // Là on peut utiliser $() en ayant la certitude que c'est jQuery, sans conflit possible }); </script> Ou encore … <script> jQuery(function($){ // $() est ici disponible comme alias de jQuery() }); </script> Principales fonctions jQuery Action Avant d’appliquer une animation ou d’ajouter un contenu sur nos pages Web, il faut souvent attendre une action de l’utilisateur, comme un clic de souris ou le fait d’appuyer sur une touche du clavier. Par exemple, lorsque l’on clique sur un <div> une alerte se produit. <script> $("#target").click(function() { alert( "Vous avez cliqué sur le div" ); }); </script> <div id="target"> Cliquez ici </div> Plusieurs autres événements existent, mais voici les principaux, pour les autres rendez-vous sur le site officiel de JQuery : http://api.jquery.com/category/events/ Fonction click() dbclick() focus() Application Hypermédia Utilisation Permet de capter le clic de souris sur un élément Permet de capter le double clic de souris sur un élément Permet de capter le focus sur élément. Le focus se produit sur un élément ayant le curseur de la souris dessus. Comme dans un champ texte de formulaire 4 Simon Guimond Dufour Julie Gagnon Apparition, disparition Il peut être intéressant de vouloir cacher un élément si l’on clique sur un bouton ou si un élément est déjà caché, de l’afficher. Plusieurs options s’offrent à vous et vous proposent de petites animations. http://api.jquery.com/category/effects/ Fonction show() hide() toggle() Utilisation Permettent d’afficher un élément HTML Permettent de cacher un élément HTML Permettent d’afficher ou de masquer un élément HTML dépendamment de son état actuel fadein(), Permettent de faire progressivement apparaître (ou disparaître) un élément en jouant fadeout() sur sa transparence slideup(), permettent de faire apparaître (respectivement disparaître) un élément à la manière slidedown() d'un store se déroulant ou s'enroulant Toutes ces fonctions prennent un paramètre qui est la vitesse d’exécution en milliseconde Ajouter, modifier ou supprimer des éléments dans une page Fonction html text append, prepend appendTo, prependTo Utilisation Sans argument elle renvoie le code HTML d’un élément. Si un argument est utilisé, cet argument remplacera le contenu de l’élément HTML Même principe que la fonction html, mais elle ne prend que le texte pas le codage HTML Ajoutent le paramètre à l'élément sélectionné, respectivement à sa fin et à son début Le paramètre est un sélecteur. Ces fonctions ajoutent l'élément sélectionné à la fin (respectivement au début) de l'élément spécifié par le sélecteur. $("<span>(Fin de paragraphe)</span>").appendTo($("p")); after, before Ajoute le paramètre qui sera du code HTML respectivement après et avant l’élément sélectionné $(h1).after(<p>Test</p>); insertAfter, insertBefore Le paramètre est un sélecteur. Ces fonctions ajoutent l’élément sélectionné après (respectivement avant) l'élément spécifié par le sélecteur $("<p>(Fin de section)</p>").insertBefore($("h1")); wrap Permet d’englober le sélecteur d’un élément. Le paramètre sera du code HTML $("p").wrap($("<div></div>")); replaceAll Le paramètre est un sélecteur. Le but de la fonction est de remplacer l’élément indiqué par le paramètre par la sélection. $("<p>Paragraphe</p>").replaceAll("h3"); replaceWith Le paramètre est du contenu HTML. Même principe que replaceAll, mais on inverse les rôles du paramètre et du sélecteur. $("em").replaceWith("<strong>"+$(this).text()+"</strong>"); empty Vide l’élément sélectionné, mais l’élément sélectionné existe encore seul ses enfants sont détruits $("#p1").empty() remove Même principe que empty, mais élimine aussi la balise sélectionné $("#p1").remove() Application Hypermédia 5 Simon Guimond Dufour Julie Gagnon Pour plus d’information et davantage de fonction : http://api.jquery.com/ Pour une initiation vidéo : http://www.grafikart.fr/tutoriels/jquery/initiation-jquery-84 Il existe aussi beaucoup de « plugin » fait en jQuery. Un plugin jQuery est un ensemble d’instruction développé par quelqu’un et qui fait une certaine action tel que des diaporamas, des actions sur des formulaires, un système d’onglet ou d’accordéon. Voici un lien qui en contient plusieurs : http://plugins.jquery.com/ Pour optimiser votre JQuery et faire attention à vos choix d’utilisation - https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551 http://youmightnotneedjquery.com/ Application Hypermédia 6 Simon Guimond Dufour Julie Gagnon