ajax/jquery · 2019. 11. 6. · ajax/jquery ©tarekzlitni 2 -isims développement web ii ajax •...

1

AJAX/JQUERY

©Tarek ZLITNI - ISIMS Développement Web II 2

AJAX

• AJAX : Asynchronous JavaScript and XML

• AJAX :une technologie de développent web technique pour la création des applications web interactives.

• N’est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les normes existantes.

• Communication client/serveur en mode asynchrone

• l'échange de données avec un serveur, et la mise à jour des parties d'une page Web - sans recharger la page entière.

• Utilise XHTML pour le contenu, CSS pour la présentation, avec Le DOM et JavaScript pour afficher du contenu interactif.

• Plusieurs APIs :

• JQUERY, PROTOTYPE, DOJO, YUI, ANGULAR JS, EXT JS, …

2


AJAX

• AJAX est une technologie de navigateur Web (coté client) indépendant de la technologie coté serveur Web.

• XML est couramment utilisé en tant que format pour recevoir des données du serveur, bien que tout format, y compris le texte brut, peut être utilisé.

• Les applications Web classiques transmettent des informations vers et depuis le serveur utilisant des requêtes synchrones.

• è Cela signifie que vous remplissez un formulaire, cliquez sur Envoyer, et acheminés vers une nouvelle page avec de nouvelles informations à partir du serveur.


AJAX

èAvec AJAX, quand vous cliquez sur envoyer, JavaScript communique avec le serveur, interprète les résultats, et met à jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne sais jamais que tout ce qui a même été transmis au serveur.

• (+) Un utilisateur peut continuer à utiliser l'application alors que le programme client demande des informations à partir du serveur en arrière-plan.

• (+) l'interaction de l'utilisateur est intuitive et naturelle. Clic est pas nécessaire, mouvement de la souris, par exemple, est un événement déclencheur suffisant.

• Piloté par les données (Data-driven) VS Piloté par les pages (page-driven).

3


AJAXL'OBJET XMLHTTPREQUEST

• Le principe de fonctionnement d'XMLHttpRequest est d'envoyerune requête HTTP vers le serveur, et une fois la requête envoyée, lesdonnées renvoyées par le serveur peuvent être récupérées.

è Il faut disposer d'un objet disposant de cette fonctionnalité. Cetobjet a été développé par Microsoft et implémenté dans InternetExplorer 5.5 en tant que contrôle ActiveX.

• Par la suite, les autres navigateurs suivirent et implémentèrent unobjet appelé XMLHttpRequest.

• Cet objet fut implémenté avec les mêmes méthodes que celled'XMLHTTP de Microsoft.

• Plus tard, XMLHttpRequest fut proposé au W3C en vue de devenir unstandard.



Récupération de L'Objet XMLHTTPREQUEST

function getXMLHttpRequest() {var xhr = null;

if (window.XMLHttpRequest || window.ActiveXObject) {if (window.ActiveXObject) {

try {xhr = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {xhr = new ActiveXObject("Microsoft.XMLHTTP");

}} else {

xhr = new XMLHttpRequest(); }

} else {alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");return null;}

return xhr;}

4



Le changement d'état de la requête

• Quand on envoie une requête HTTP via XMLHttpRequest, ellepassepar plusieurs états différents :

• 0 : L'objet XHR a été créé, mais pas encore initialisé (la méthode open n'a pas encore été appelée)

• 1 : L'objet XHR a été créé, mais pas encore envoyé (avec la méthode send )

• 2 : La méthode send vient d'être appelée

• 3 : Le serveur traite les informations et a commencé à renvoyer des données

• 4 : Le serveur a fini son travail, et toutes les données sont réceptionnées



• Il faut détecter les changements d'état pour savoir où en est la requête.

è utiliser la propriété onreadystatechange, et à chaque changement d'état:

var xhr = getXMLHttpRequest();

xhr.onreadystatechange = function() {if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

alert("OK"); // C'est bon \o/}

};xhr.open("GET", « traitmentDonnees.php", true);xhr.send(null);

5



Récupérer les données

• Utiliser une des deux propriétés :

• responseText : récupérer les données sous forme de texte brut

• responseXML : récupérer les données sous forme d'arbre XML

var xhr = getXMLHttpRequest();xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {alert(xhr.responseText); }

};


L’API JQUERY

Principe de fonctionnement

• Définition d'une fonction : jquery() ou $() (raccourci)

• Accepte des paramètres (en général, un selecteur)

• Retourne un objet JQuery

• Est exécutée au cours du chargement de l'arbre DOM de la page

• Sinon, il faut utiliser window.onload

• Utilisation de sélecteurs CSS et JQuery pour accéder et manipuler les éléments de l'arbre.

6


L’API JQUERY

• Possibilité de sélectionner :

• par type de bloc

• par identifiant

• par classe

• en combinant les critères

• en filtrant sur les noms d’attributs

• en faisant référence aux positions relatives dans le DOM

• en ne récupérant qu’un seul élément parmi les objets sélectionnés

• en filtrant parmi les objets sélectionnés

Sélection d’éléments


L’API JQUERY

Sélecteurs CSS

• Similaires aux éléments d'une feuille de style, ou XPath

• Exemples : #menuid, h2, .onglet, *, etc.

• Exemple : $ ( « body» )

• Exemple : $("div.main") // tous les divs de classe main

• Exemple : sélectionneur de visibilité // si l'élément est visible $("div:visible") // sinon $("div:hidden")

http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

• Sélecteurs Jquery

• Sélecteurs supplémentaires n'existant pas en CSS ou Xpath (ou raccourcis)

• Exemples : :visible, :first, etc

Sélection d’éléments

http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

7


L’API JQUERY

• Chaque méthode renvoie l'objet courant

• Acces/modification au contenu d'un objet : html()

• Exemple :

$ ( ' body ' ) . html ( " hello world " ) ;

• Forcer l'utilisation de la fonction jquery() (à la place de $() )

• $.noConflict( ) ou jquery.noConflict ( )

<html> <head><script type="text/javascript" src="jquery-1.11.3.js"></script></head><body>He l l o World<script> $('body').html("bonjour tout le monde" ) ; </script></body> </html>

Les méthodes


L’API JQUERY

Variables

• var nomVaraible= ValInitiale;

• var body = $ ( ' body ' ) ;

• Variables standards :

Exemples :length ou size : Nombre d‘élements contenus dans l'objet JQuery courant:

$ ( function ( ) { var bodycont ent = $ ( " d i v " ) ;$ ( '#id2 ' ). html ( " I l y a " + bodycont ent . l e n g t h + " ) " ) ;// afficher le nombre des <div>}) ;

8


L’API JQUERY

• .html('[contenu]') : remplacement du contenu d’un élément (les balises sont considérées comme des balises)

• .text('[contenu]') : remplacement du contenu d’un élément en considérant le tout comme du texte (les caractères < et > des balises sont remplacés par les entités XML (> et <)

• .after('[contenu]') : insertion du contenu après l’élément sélectionné

• .before('[contenu]') : insertion du contenu avant l’élément sélectionné

• .append('[contenu]') : insertion du contenu dans l’élément sélectionné à la suite des éléments existants

• .prepend('[contenu]') : insertion du contenu dans l’élément sélectionné avant les éléments existants

Modifier le code HTML


L’API JQUERY

text() vs. html()

• html() : Remplacement du contenu d'un élément (les balises sont considerees comme des balises)

• text() : Remplacement du contenu d'un élément en considérant le tout comme du texte (les caractères < et > des balises sont remplaces par les entités XML (> et <)

$ ( function () { var bodycontent = $ ( " d i v " ) ;$ ( '#id2' ). html ( " Il ya " + bodycont ent . length+ " div ) " ) ;}) ;

9


L’API JQUERY

• Récupération de la valeur de l'attribut CSS d'un élément :

• .css('color') renvoie la couleur de l'élément

• Attribution d'une valeur à l'attribut CSS d'un élément :

• .css('color','red') attribue la couleur rouge à l'élément

• Attribution d'une valeur à l'attribut CSS des éléments de classe CSS «id» en fonction de leur valeur actuelle à l'aide d'une fonction :

Récupérer /modifier les propriétés CSS

var tailleActuelle = parseInt($('#id').css("font-size"));$('#id').css("font-size",function(){return tailleActuelle+10;

});

è augmente de 10 points la taille de police de caractèresdes éléments de classe «id»


L’API JQUERY

• Attribution d'un ensemble de valeurs à un ensemble d'attributs CSS d'un élément :

• .css({'border' : '1px solid black', 'color' : 'red'})

è attribue la couleur rouge à l'élément et lui ajoute une bordurenoire.


10


L’API JQUERY

Manipulation des classes CSS

• .addClass('laClasse')

• Ajoute la classe CSS laClasse à l'élément.

• .removeClass('laClasse')

• Retire la classe CSS laClasse à l'élément.

• .toggleClass('laClasse')

• Ajoute la classe CSS laClasse à l'élément s'il ne l'a pas, la lui retire sinon.

• .hasClass('laClasse')

• Renvoie true si l'élément a la classeCSS laClasse, false sinon.



L’API JQUERY

• Un évènement est une action remplie par le navigateur, ou plus généralement l'utilisateur. on lance un bout de code quand une action est remplie.

• Un évènement qui pourra écouter la souris de l'utilisateur , ou bien écouter le clavier de l'utilisateur : quand il presse des touches du clavier; exécuter du code.

èUn évènement fait le lien entre une action remplie, et une fonction (du code) exécutée.

Les évènements

$("#unDiv").click(function(){// Le code a exécuter !

});

11


L’API JQUERYLes évènements : La souris

Action

Clic

Double-clic

Passage de la souris

Rentrer dans un élément

Quitter un élément

Presser un bouton de la souris

Relâcher un bouton de la souris

Scroller (utiliser la roulette)

Fonction

click()

dblclick()

hover()

mouseenter()

mouseleave()

mousedown()

mouseup()

scroll()


L’API JQUERYLes évènements : La souris

Fonction Action

keydown() qui se lance lorsqu'une touche du clavier est enfoncée

keypress() se lance lorsqu'on maintient une touche enfoncée

keyup() se lance lorsqu'on relâche une touche préalablement enfoncée.

12


L’API JQUERYLes évènements : Document /Fenêtre

Action Fonction

Load()/ready() Chargement du document

resize() Changement de la taille de la fenêtre

scroll() Défilement avec la barre de défilement

Unload() A la fermeture document


L’API JQUERYLes évènements : Formulaire

Action Fonction

submit() Envoi du formulaire

change() Changement de la valeur d’un champ de formulaire

focus() Mettre le focus dans un champ de formulaire

blur() Perte du focus dans un champ de formulaire

13


L’API JQUERYLes effets :Afficher/Cacher

è Le paramètre de vitesse optionnel spécifie la vitesse d’afficher/cacher et peut prendre les valeurs suivantes: "slow” , "fast", ou une valeur en millisecondes.

<script>$(document).ready(function(){

$("#hide").click(function(){$("p").hide(); });

$("#show").click(function(){$("p").show(); });

});</script>

</head><body><button id="hide">Cacher</button><button id="show">Afficher</button><p> Le message a afficher /cahcer</p></html>

• On peut afficher / cacher un élément HTML respectivement avec les deux fonctions : show() et hide() , toggle() jout le double rôles

$("button").click(function(){$("p").hide(1000);});


L’API JQUERYLes effets :l’hauteur

$(document).ready(function(){$("#flip").click(function(){

$("#panel").slideUp("slow");});

});</script><style>

#panel, #flip {padding: 5px;text-align: center;

border: solid 1px #c3c3c3;}

#panel {padding: 50px;

}</style></head><body><div id="flip">Click to slide up panel</div><div id="panel">Hello world!</div></body></html>

• Les effets sur la hauteur sont assurés par les fonctions: slideUp() , slideDown() , slideToggle()

• slideToggle() bascule entre les deux méthodes slideDown() et slideUp()

14


L’API JQUERYLes effets: opacité

• Modifier l’opacité d’une façon progressive

• jQuery offre les méthodes suivantes :

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);

});

$("button").click(function(){$("#div1").fadeOut();

});

$("button").click(function(){$("#div1").fadeToggle();

$("button").click(function(){$("#div1").fadeTo("slow", 0.15);$("#div2").fadeTo("slow", 0.4);});


L’API JQUERYLes effets: Animation

• Créer une animation par la modication de certaines propriétes de style CSS(déplacement d’un block par exemple)

• La fonction animate() a le syntaxe suivant :

• Le paramètre params définit les propriétés CSS à être animés.$("button").click(function(){

$("div").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'

});});

$(selecteur).animate({params},speed,callback);

15


L’API JQUERYLes effets: Animation

èLes valeurs à modifier peuvent être relatives aux valeurs actuelles

• Ceci est assuré par l’ajout de += ou-= devant la valeur :

$("button").click(function(){$("div").animate({

left: '250px',height: '+=150px',width: '+=150px'

});});

èOn peut créer une succession d’animation

$(document).ready(function(){$("button").click(function(){

var div = $("div"); div.animate({left: '100px'},

"slow");div.animate({fontSize: '3em'},

"slow");});

});


L’API JQUERYLes effets: Arrêt des animation

• Pour arrêter les animations on utilise la function stop()

$(selecteur).stop(stopAll,goToEnd);

• Le paramètre optionnel stopAll spécifie si toutes les animationsseront arrêtées. Par défaut est false, ce qui signifie que seulementl’animation courante sera arrêtée,

• Le paramètre optionnel goToEnd spécifie si on complète ou onl’arête immédiatement . Par défaut est false.

• Par défaut, stop() arête l’animation courante appliquée surl’élément sélectionné.

16


L’API JQUERYLes effets: l’enchainement des effets

• Il existe une technique appelée l’enchainement , qui nous permet d'exécuter des commandes multiples jQuery, l'un après l'autre, sur le même élément.

• Pour l’enchainement d'une action, on ajoute simplement l'action à l'action précédente

• L’exemple suivant enchaine les methods css(), slideUp(), et slideDown() ensemble. L’élement "p1" changement au rouge d’abord, il glisse vers le haut, puis il glisse vers le bas:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);


L’API JQUERY

• Methode : ajax (paramètres dans un tableau)

• Parametres :

• url: + adresse de la page a laquelle est envoyée la requête

• type: + type de la requête (GET ou POST)

• async: (true|false) connexion asynchrone ou non

• data : + Tableau de clés/valeur (paramètres de la requête)

• success: + fonction (anonyme) exécutée en cas de succes

• complete: + fonction (anonyme) exécutée a la finn de l'envoi de la reponsepar le serveur (en cas de succes ou d'erreur)

AJAX

17


L’API JQUERY

Exemple (fichier HTML)

<!DOCTYPE html><html><head><script src="jquery-1.11.3.js"></script><script>$(document).ready(function(){

$("#button1").click(function(){var val=$('#champs').val();

$.ajax({url: "maj.php",type: "POST",data:{valeur:val},success:

function(result){$("#div1").html(result);

}});});

$("#button2").click(function(){var val=$('#champs').val();

$.ajax({url: "min.php",type: "POST",data:{valeur:val},success:

function(result){$("#div2").html(result);

}});});

});</script></head>

AJAX


L’API JQUERY

Exemple (fichier HTML)

</script></head><body>chaine : <input type="text" value="valuerinitiale" name="chp" id="champs"><br><br><table border="1" cellpadding="3"><tr><td><button id="button1"> Afficher en MAJUSCULE</button><div id="div1"></div></td>

<td><button id="button2"> Afficher en Miniscule</button>

<div id="div2"></div></td></tr></table></body></html>

AJAX

18


L’API JQUERY

Exemple

<?php$donnee =$_POST['valeur'];$maj =strtoupper($donnee);echo $maj;?>

<?php$donnee =$_POST['valeur'];$min =strtolower($donnee);echo $min;?>

Maj.php Min.php

AJAX


• Ecriture dans un fichier XML :

• L’écriture des fichiers XML repose sur l’objet XMLDOM.

1. La création d’une chaine englobant le contenu XML.

2. La sérialisation de cette chaine.

3. L’écriture de contenu XML final.

1. Affichage dans le navigateur.

2. Téléchargement d’un ficher XML.

Ecriture dans XMLL’API JQUERY

19


• Exemple : Ecriture dans XML

L’API JQUERY

<!DOCTYPE html><html><head><script src="jquery-1.11.3.js"></script><script >function parseXML(txt){

var xmlDocif (window.DOMParser){

xmlDoc=(new DOMParser()).parseFromString(txt,"application/xml");

}else{xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.loadXML(txt);

}return xmlDoc

}



L’API JQUERY

// Ecriture de contenu XMLfunction getCountries() {

return parseXML("<data><country name='USA'></country></data>")}// Sérialisationfunction toStringXML(xmlObject){

if(window.XMLSerializer)return (new XMLSerializer()).serializeToString(xmlObject)

elsereturn xmlObject.xml

}

20



L’API JQUERY

// Ecriture de contenu XML Final : affichage dans le navigateurfunction writerScreen(X){window.open('data:text/xml,' + encodeURIComponent('<?xml version="1.0" encoding="UTF-8"?>'

+toStringXML(X) ))}// Ecriture de contenu XML Final : télécharger le fichierfunction writer(X){var dataUrl='data:application/download,' + encodeURIComponent('<?xml version="1.0" encoding="UTF-8"?>’ +toStringXML(X)

)location.href=dataUrl

}



L’API JQUERY

function generateXML(){var data=getCountries()writer(data);//téléchargement//writerScreen(data);//affichage dans le navigateur}

$(function(){$('button').click(generateXML)

})</script>

<title>writer</title></head><body><button>Générer un ficher XML</button></body></html>

21


• Exercice :

Ecrire le code javascript permettant de récupérer lesprincipales propriétés d’une vidéo et les écrire sous formeXML. Le code de génération du code XML est invoqué suite auchargement des métadonnées de la ressource vidéo.

Ecriture dans XMLL’API JQUERY


• Quatre étapes pour récupérer le contenu XML :

1. Charger le fichier XML (get)

2. Spécifier le nom du tag a sélectionner (une structure itérative )

3. Accéder au contenu texte (text() )

4. Accéder aux attributs ($nomvar.attr(« nomattribut"))

Lecture d’un fichier XML L’API JQUERY

22


• Exemple :

Lire le contenu d’un fichier XML décrivant un ensemble de livres et les affichant sous frome de liste

• Le document XML :

Lecture d’un fichier XMLL’API JQUERY

<?xml version="1.0" encoding="UTF-8"?><livres><livre type="scientifique" ><titre>Programmer en Java</titre><annee>2013</annee><copyright>Delannoy</copyright>

</livre><livre type="roman" ><titre>Le zahir</titre><annee>2010</annee><copyright>Choello</copyright></livre></livres>



<!DOCTYPE html><html><head>

<script src="jquery-1.11.3.js"></script><script >

$(document).ready(function(){

$.get('biblio.xml', function(d){$('body').append('<h1> Ensemble de livres </h1>');$('body').append('<div />');$(d).find('livre').each(function(){

var $book = $(this); var type = $book.attr("type");var titre = $book.find('titre').text();var annee = $book.find('annee').text();var cp = $book.find('copyright').text();

23



var html = '<h4>' + titre + '</h4> ';html += '<ul><li>type :' + type + '</li>';html += '<li>année de sortie : ' + annee + '</li>' ;html += '<li>(c): ' + cp + '</li>' ;html += '</ul><hr>';$('div').append($(html)); });

});});</script><body></body></html>


• Exemple :


24


1. Parcourir la liste des fichiers d’un dossier donné :appel de lafonction ajax, en donnant l’url du répertoire.

2. Récupération des noms de tous les noms des fichiers

3. La suite du traitement demandé

• Exemple :

• Parcourir un dossier d’images de type « png » et les afficher

Parcours d’un dossier et manipulation de ses fichiers L’API JQUERY


L’API JQUERY

<script src="jquery-1.11.3.js"> </script><script>var dir = "./";var fileextension = ".png";$.ajax({url: dir,success: function (data) {

//Lister toutes les images et vérifier l’extension$(data).find("a:contains(" + fileextension + ")").each(function () {

var filename = this.href;$("body").append($("<img src="+ filename + "><br>"));

});}

});</script>

Parcours d’un dossier et manipulation de ses fichiers

25


ajax/jquery · 2019. 11. 6. · ajax/jquery ©tarekzlitni 2 -isims développement web ii ajax •...

Documents