docAJAX (Asynchronous JavaScript and XML) Principe: utilisation de la
download 
Plainte Transcription
AJAX (Asynchronous JavaScript and XML) Principe: utilisation de la
AJAX
(Asynchronous JavaScript and XML)
Principe:
utilisation de la classe XMLHttpRequest et des librairies aculo , jquery , prototype
série 1
source de départ
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
function verif()
{
req = new XMLHttpRequest();
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
document.monform.suite.value=req.responseText;
}
}
appel="data.php?val="+document.monform.dyn.value;
req.open("GET",appel , true);
req.send(null);
}
</script>
</head>
<body>
<form name="monform" method="POST" action="">
entree:<input type="text" name="dyn" size="32" value="" onKeyup="verif()">
sortie:<input type="text" name="suite" size="32" value="">
</form>
</body></html>
Exercice1 (base d'AJAX: XMLHttpRequest)
En reprenant l'exemple ci-dessus, réaliser une page html
avec 2 zones de texte, la premiere permettant de saisir
un nom, la deuxieme affichant le nombre d'abonnés correspondant aux caractères saisis.
Vous devez créer 2 fichiers: le fichier exo1.htm et le fichier data.php
Exercice 2: Idem exercice 1 mais avec une zone div pour la zone d'affichage et en utilisant la
librairie jquery
Astuce: voir $(....).load(....) pour ecrire dans un div
et $(...).keyup(....) pour la détection de saisie
et $(...).attr(....) pour récupérer la valeur de la zone de saisie d'entrée
Exercice3: (en utilisant la librairie jquery)
idem sauf que dans la deuxieme apparaît la liste des abonnés correspondant aux caractères
saisis.
série2
Exercice1: (librairie jquery)
mettez en oeuvre la complession automatique sur le champ identification de l'abonné.
Exercice 2: (librairie jquery /AJAX)
faire un formulaire de modification des propriétés d'un abonné (une premiere zone de saisie
permet de rentrer l'id de l'abonné tandis que le champs « nom » se rempli automatiquement sans
bouton de validation, les modifications faites dans la zone nom,sont mises à jour dans la base de
données à la volée. (voir demo)
astuces:
•
utiliser $("# ... ").load( ... ) pour créer le formulaire à la volée dans un div
•
utiliser $.ajax(...) pour mettre à jour les modifications dans la base lors de la saisie dans
les champs
Exercice 3:
Intégrer cette fonctionnalité dans le back-office de Stpavut en prévoyant une page
avec la liste de tous les abonnés et lors du click sur l'un d'eux un div « s'ouvre »
avec un formulaire prérempli pour modifier à la volée les infos de l'abonné.(voir
demo)
Exercice4: (librairie jquery)
En utilisant les script « jquery ui », mettez en oeuvre dans la partie regisseur le drag&drop sur la liste des abonnés. Le fait de prendre
un nom d'abonné et de l'amener sur une zone « poubelle » devra supprimer l'abonné de la liste.
Exercice 5:
prévoir la possibilité d'ajouter un nouvel abonné
de façon dynamique dans cette page (utiliser
encore AJAX)
le fait de cliquer sur valider ne recharge pas la
page (voir demo) mais rajoute bien l'abonné
dans la base.
exercice 6:
améliorer l'ergonomie de l'ensemble en ajoutant des effets prédéfinis de jquery (voir demo)
série3
Exercice1:(librairie jquery)
Réaliser une page de chat en AJAX sur le site StPavut pour les visiteurs.
● Créer une table chat(id , pseudo, phrase , temps , ip)
● Créer une page valider.php avec 2 parametres d'entrées qui devra stocker le message dans la table
(ex: valider.php?pseudo=bob&phrase=salut)
● Créer une page lire.php qui devra afficher les 10 derniers messages de la base sous la forme « bob>salut<br>toto>hello.... »
● tester votre systeme de chat avec 2 fenetres de navigateur
● realiser une page html avec 2 zones de saisie (pseudo et phrase) , un bouton et une zone div qui recevra les discussions
●
●
●
●
ajouter les scripts dans cette page html permettant via AJAX de gérer le chat. (utiliser prototype.js)
○ utiliser $.timer() (penser à télécharger jquery.timer.js sur http://code.google.com/p/jquery-timer/ , ou alors utiliser la
methode javascript setinterval() ou settimeout ) pour relire régulièrement les nouveaux messages et $(...).load() ou
$.ajax() pour envoyer les phrases saisies.
rechercher une solution javascript pour que la validation s'effectue lors de l’appuie sur la touche « Entrée » du clavier valide
la phrase.
○ pour cela vous pouvez ré-utiliser la méthode $(....).keyup( function(event){ …. } )
sachant que event.which retourne le code ASCII de la touche appuyée.
Exemple d'utilisation de base : $(....).keyup( function(event){ alert(event.wich ) ; } )
Ajouter le script nécessaire pour « purger » la zone de saisie de la phrase après chaque validation
utiliser un framework css (ex : kickstart voir http://www.99lime.com ) pour mettre en forme le chat.
Exercice2 (TP1):
reprendre l'ensemble des exercices en les intégrant sur le site « Saint Pavut » :
1.
une page (une ressource document) avec le chat (avec une mise en forme avec par exemple kickstart) (voir demo :
http://195.83.128.55/~fmeuzeret/modx2/index.php?id=17 )
2.
une page de recherche avec complétion de manifestation (voir demo : http://195.83.128.55/~fmeuzeret/modx2/index.php?
id=13 avec effet « fade » et http://195.83.128.55/~fmeuzeret/modx2/index.php?id=11 sans effet « fade ». pour essayer, tapez
par exemple p, pa, par, paris, ... )
3.
un lien vers un dossier protégé par htaccess (type Dutaf SRC1 : htpassword : sgbdr:rlGyLrmS3JENk pour l'accès prof et
rajouter le votre en plus ) pour le mini back-office (à faire hors modx) d'ajout/modifier/supprimer un abonné). Vous pouvez
mettre en forme ce mini-backoffice en utilisant un framework css comme « bootstrap twitter »
