Lien vers le vieux TP Ajax pour ceux qui veulent retrouver leurs réponses.
Le terme AJAX existe depuis 2005. Ce n'est pas vraiment une nouvelle technologie mais plutôt un regroupement de technologies existantes : Javascript (et notamment l'objet XMLHttpRequest qui permet d'envoyer les données au serveur), XML pour le résultat.
AJAX permet de soumettre les données au serveur Web qui renvoie un résultat. Jusqu'à présent on sait déjà faire ça avec les formulaires et les liens hypertextes. Ce qu'il y a de nouveau dans l'approche AJAX :
Lorsque je tape "xml" dans Google, et avant d'avoir soumis le formulaire, il affiche une zone de liste contenant des résultats correspondants. A chaque lettre tapée au clavier, une requête est envoyée à Google, qui effectue une recherche, et renvoie de quoi alimenter cette zone de liste.
Dans cet exemple, quel est l'événement qui déclenche la requête Ajax ?
Quelle est la donnée envoyée au serveur de Google ?
Quelle est la réponse du serveur ?
Lorsque vous répondez aux questions de mes TP dynamiques, une requête AJAX est envoyée au serveur pour enregistrer votre réponse dans ma base de données.
Dans cet exemple, quel est l'événement qui déclenche la requête Ajax ?
Quelle est la donnée envoyée à mon serveur ?
Quelle est la réponse de mon serveur vers la page Web (le TP) ?
Dans cet exercice, on va apprendre à modifier le contenu d'une page HTML grâce à Javascript et à la manipulation de l'objet DOM. Ceci peut être particulièrement utile dans les cas suivants :
.
La zone de la page qui sera modifiée (c'est à dire : là où vous voulez afficher l'heure) doit être entourée des balises :
<div id='nom de la zone'></div> ou <span id='nom de la zone'></span>
Le code qui sera utilisé pour changer le contenu de cette zone est :
document.getElementById("nom de la zone").innerHTML = "nouveau contenu";
Essayer en affichant la date et l'heure avec les indications suivantes :
Date() renvoie la date et l'heure, prête à être affichée ;window.setTimeout() de la façon suivante :Avec toutes les indications ci-dessus, faites la page qui affiche l'heure et, lorsque ça marche, collez votre code complet ici :
On utilise l'objet XMLHttpRequest, vous pouvez utilisez pour ça le canevas déjà tout fait (à copier-coller dans chaque page devant utiliser AJAX) :
Vous devrez :
N'oubliez pas de glisser tout ça dans les balises habituelles qui permettent d'insérer du Javascript au milieu d'une page HTML :
Pour échapper une chaîne depuis Javascript destinée à être envoyée à un serveur PHP, on utilise encodeURIComponent et non pas encodeURI ni escape qui ne traduisent pas certains caractères (, / ? : @ & = + $ #).
Par exemple : encodeURIComponent("5% de déficit ?") donne comme résultat 5%25%20de%20d%C3%A9ficit%20%3F.
PHP réalise automatiquement le urldecode, par contre il faut appliquer le utf8_decode pour retrouver les accents.
On peut commencer par un petit test qui n'utilise pas de base de données. Dans une zone de liste déroulante, on choisit un numéro de département. Dans une deuxième liste s'affichent les villes du département :
A titre indicatif, pour votre jeu d'essai, vous pouvez intégrer les départements et villes suivantes :
Vaucluse (84) : Avignon, Montfavet, Vedène, Sorgues.
Bouches-du-Rhône (13) : Marseille, Aix-en-Provence, Salon.
Gard (30) : Nîmes, Rochefort-du-Gard.
L'événement qui déclenche le traitement AJAX est onChange de la zone de liste des départements.
La réponse du script PHP ira modifier la liste des villes.
Remarquez bien que le code renvoyé par PHP au navigateur doit être le contenu de la zone de liste, par exemple :
<option>Avignon</option>
<option>Montfavet</option>
<option>Vedène</option>
<option>Sorgues</option>
Dans votre page HTML, vous devrez renommer :
Ce script PHP s'exécute sans vous afficher les éventuelles erreurs (comme avec GD). Pour connaître les éventuelles erreurs PHP, activez le log des erreurs dans le PHP.INI :
log_errors = On
error_log = "C:/erreurs PHP.txt"
Une fois que ceci est au point, collez ici le code de la page HTML :
Collez ici le code de la page PHP :
Le principe est que lorsqu'on choisit un login lors d'une inscription, le serveur nous répond au fur et à mesure si le login choisi est disponible ou pas.
Choisissez un login : Disponible
...Choisissez un login : Va crever ! C'est déjà pris !
Faites une base de données MySQL avec une table users.
Faites la page avec le formulaire de choix de login, partie Ajax, bouton de validation du formulaire (qui ne servira pas ici).
Faites la partie PHP qui se connecte à la BDD, vérifie si le login en cours de frappe existe ou pas, et envoie la réponse à la page Web.