Initiation à AJAX
Réponse AJAX

Lien vers le vieux TP Ajax pour ceux qui veulent retrouver leurs réponses.

Présentation de AJAX

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.

Cherchez le détail de l'acronyme AJAX :
Votre réponse n°1

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 :

Exemples concrets

Google

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 ?

Votre réponse n°2

Quelle est la donnée envoyée au serveur de Google ?

Votre réponse n°3

Quelle est la réponse du serveur ?

Votre réponse n°4

Ce TP

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 ?

Votre réponse n°5

Quelle est la donnée envoyée à mon serveur ?

Votre réponse n°6

Quelle est la réponse de mon serveur vers la page Web (le TP) ?

Votre réponse n°7

Autres exemples

Google Maps.

Mes programmes télé.

Rappel Javascript : changer dynamiquement le contenu d'une page HTML

Pourquoi ?

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 :

Comment ?

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";

À vous !

Essayer en affichant la date et l'heure avec les indications suivantes :

Avec toutes les indications ci-dessus, faites la page qui affiche l'heure et, lorsque ça marche, collez votre code complet ici :

Votre réponse n°8

AJAX : envoyer une requête au serveur sur un événement Javascript

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 :

Précisions sur...L'échappement des caractères et les accents

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.

Exercice AJAX sur un cas simple sans base de données

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 :

Votre réponse n°9

Collez ici le code de la page PHP :

Votre réponse n°10

Exercice avec base de données : choix d'un login lors de l'inscription

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.

Collez ici la page HTML (formulaire, appel AJAX et traitement de la réponse) :

Votre réponse n°11

Collez ici la page PHP (traitement AJAX : vérification de l'existence du login) :

Votre réponse n°12