-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (46 loc) · 2.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Mon application en AJAX LOL</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1 class="h1">Ma super app météo <3</h1>
<!-- Div dans laquelle on veut afficher les réponses de notre API -->
<div id="api-response"></div>
<span class="wow" id="temp"></span>°C<br>
<span class="wow" id="pressure"></span>hPa <br>
<span class="wow" id="humidity"></span>%<br>
<script src="js/main.js"></script>
<script>
/* méthode qui permet d'afficher la réponse d'une API à une requête donnée */
sendQuery('http://api.openweathermap.org/data/2.5/weather?zip=30100,it&appid=8600d7d564076529872375d01d7d93a2');
/* méthode qui permet de récupérer la réponse d'une requête AJAX
et de traiter le résultat lorsqu'elle l'aura reçu au moyen d'un "callback",
c'est à dire une fonction qui sera exécutée lors de la réception de la réponse.
Dans l'exemple ci-dessous, on demande la météo, en méthode "GET", puis on affiche "Pouet pouet"
à l'écran au moyen d'une méthode passée en troisième argument (stupide mais simple pour commencer à comprendre).
Dans l'exemple d'après, on demande la météo en méthode "GET", puis on précise que
lorsque l'on aura la réponse, on doit exécuter la fonction, qui prend en paramètre
le contenu même de la réponse (cf l'appel à "callbackFunction()" dans main.js.
ici, nous voulons tout simplement afficher la réponse telle qu'elle est renvoyée par
le serveur (ie. une chaine de caractères), puis on la convertit en Json pour
l'afficher à nouveau, dans un format plus simple à manipuler.
*/
sendQueryWithCallback(
'http://api.openweathermap.org/data/2.5/weather?zip=30100,it&appid=8600d7d564076529872375d01d7d93a2',
'GET',
() => { alert('Pouet pouet')}
);
sendQueryWithCallback(
'http://api.openweathermap.org/data/2.5/weather?zip=30100,it&appid=8600d7d564076529872375d01d7d93a2',
'GET',
(response) => {
console.log('Réponse de l\'api au format String', response);
response = JSON.parse(response);
console.log('Réponse de l\'api au format Json', response)}
);
</script>
</body>
</html>