TP javascript : Ajax, promesses.
Vous disposez tous, à la racine de votre compte, d'un répertoire public_html qui est servi (http/https) par le serveur dwarves.
Pour accéder à vos pages, utilisez l'url :
http(s)://dwarves.[arda|iut-fbleau.fr]/~login
Pour tester les différentes api http, vous pouvez utilisez la commande curl.
Ex1
Le but est de faire une recherche de film en utilisant l'api OMDb (Open Movie Database).
Son utilisation nécessite une clé. Vous pouvez utiliser la mienne 2fcb2848. Si
la limite de requêtes est atteinte, générez votre propre clé.
Complétez le code.
-
J'ai volontairement utilisé des modules. Il vous faut donc tester l'application avec http.
-
Écrire la fonction du modèle
getMovies(search)Cette fonction renvoie une promesse qui permet de faire une requête ajax vers l'api OMDb. Pour ajax, utilisez d'abord l'interface
fetch,puis l'objet.XMLHttpRequest -
Écrire la fonction du contrôleur
async search(searchMovie)qui permet de faire une recherche. Cette fonction utilise évidemment la fonction précédente
getMovies. -
Écrire la fonction de la vue
renderList(movies)qui construit la liste des films affichés. La structure attendue est
<li> <a href="http://www.imdb.com/title/tt0068646" target="_blank">The Godfather</a><span>1972</span> </li>
Ex2
Le but, dans un premier temps, est d'écrire une interface, avec ajax, qui permette de jouer au jeu suivant :
-
On a une grille dans laquelle sont cachés des renards (on en connait le nombre initial).
-
A chaque tour, on choisit de tirer sur un case. On a l'alternative suivante :
- on tue un renard,
- on récupére les nombres de renards sur la grille sur la ligne, colonne et diagonales de la case.
Le jeu utilise un serveur http à l'url suivante
https://dwarves.iut-fbleau.fr/foxes/foxes.php
Voici les urls du jeu :
https://dwarves.iut-fbleau.fr/foxes/foxes.php?new&size=10&foxes=10
initialise la partie , avec la taille de la grille et le nombre de renards dont la position est aléatoire (le script utilise des sessions de cinq minutes).
La réponse normale, en json :
{"status":"ok","foxes":10,"tries":0}
https://dwarves.iut-fbleau.fr/foxes/foxes.php?X=1&Y=3
permet de tirer sur une case. Le serveur répond
{"status":"ok","foxes":2,"tries":1}
foxes vaut -1 si le coup est gagnant, sinon donne le nombre de renards de la colonne, ligne et diagonales de la case.
En cas de victoire, le status est win. En cas d'erreur, le status est nok.
Remarque
Ajouter l'option credentials à vos requêtes pour utiliser la session en cours.