-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e90355f
commit 4629bf8
Showing
5 changed files
with
94 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,94 @@ | ||
| Laquelle de ces instructions constitue un objet JavaScript valide: | ||
| Pour effectuer une requête AJAX GET, et afficher la réponse du serveur dans un `alert()`, il faut instancier la classe `XMLHttpRequest` puis... | ||
|
|
||
| - [ prop1: 3, prop2: 4 ] | ||
| * { prop1: 3, prop2: 4 } | ||
| - { 2, true, 'bonjour' } | ||
| - { 'a': 1; 'b': 2 } | ||
| * ... appeler 2 méthodes, et définir 1 fonction | ||
| - ... appeler 1 méthode, et définir 2 fonctions | ||
| - ... appeler 3 méthodes | ||
| - ... définir 3 fonctions | ||
|
|
||
| ??? | ||
|
|
||
| Un objet JavaScript: | ||
| ```js | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); | ||
| xhr.onreadystatechange = function() { | ||
| if (xhr.readyState === 4) { | ||
| alert(xhr.responseText); | ||
| } | ||
| }; | ||
| xhr.send(); | ||
| ``` | ||
|
|
||
| Dans le code de cette requête, on: | ||
|
|
||
| - instancie la classe `XMLHttpRequest` dans la variable `xhr`, | ||
| - **définit 1 fonction** qu'on affecte à la propriété `onreadystatechange` de `xhr`, | ||
| - et on **appelle 2 méthodes** de `xhr`: `open()` et `send()`. | ||
|
|
||
| - accolades | ||
| - propriétés définis par paires clé-valeur (syntaxe: `clé: valeur`) | ||
| - propriétés séparées par des virgules | ||
| À noter que `alert()` est un appel de fonction, et non un appel de méthode, car cette fonction n'est pas rattachée à une instance de classe. | ||
|
|
||
| --- | ||
|
|
||
| Comment récupérer la valeur de la propriété `nom` d'un objet affecté à une variable `personne` ? | ||
| J'ai écrit le code permettant d'envoyer une requête HTTP GET, mais rien ne se passe, et rien n'apparait dans la console. | ||
|
|
||
| - personne.get('nom'); | ||
| - personne.[nom]; | ||
| - personne[nom]; | ||
| * personne.nom; | ||
| Cela pourrait être dû à: | ||
|
|
||
| - une erreur de syntaxe | ||
| - une URL erronée | ||
| * l'oubli de l'appel à `send()` | ||
| - l'oubli de l'usage de `JSON.parse()` | ||
|
|
||
| ??? | ||
|
|
||
| Sachant qu'on connaît littéralement la clé de la propriété (il s'agit de `nom`), on peut utiliser la notation pointée. | ||
| Dans ces trois cas, on aurait obtenu une erreur dans la console: | ||
|
|
||
| - *une erreur de syntaxe* | ||
| - *une URL erronée* | ||
| - *l'oubli de l'usage de `JSON.parse()`* | ||
|
|
||
| La bonne réponse est donc: *l'oubli de l'appel à `send()`*. | ||
|
|
||
| En effet, c'est cette méthode qui permet l'envoi de la requête. Sans cela, notre code n'aura eu aucun effet, sauf l'initialisation de la requête dans l'instance `xhr`. | ||
|
|
||
| --- | ||
|
|
||
| Toujours dans notre objet `personne`, comment récupérer la valeur d'une propriété dont la clé est stockée dans la variable `laCle` ? | ||
| Quel est le format le plus couramment utilisé de nos jours pour échanger des informations en AJAX avec une API ? | ||
|
|
||
| - personne.get(laCle); | ||
| - personne.laCle; | ||
| * personne[laCle]; | ||
| - personne['laCle']; | ||
| - HTML | ||
| - XML | ||
| * JSON | ||
| - texte brut | ||
|
|
||
| ??? | ||
|
|
||
| Sachant qu'on ne connaît pas a priori la clé de la propriété (car elle est stockée dans une variable), on ne peut PAS utiliser la notation pointée. => Il faut utiliser les crochets, comme pour récupérer la valeur d'un élément de tableau. | ||
| AJAX (*Asynchronous Javascript And XML*) a été initialement conçu pour échanger des informations au format XML, très en vogue dans les années 90, mais il permet d'utiliser n'importe quel format sérialisable sous forme d'une chaine de caractères. | ||
|
|
||
| Et, sachant que `laCle` est une variable, et non la valeur littérale de notre clé, il ne faut pas l'écrire entre apostrophes. | ||
| Aujourd'hui, on utilise majoritairement le format *JSON* dans les requêtes AJAX, car il a l'avantage d'être concis (et peu consommateur de bande passante), facilement lisible à l'oeil nu, et directement manipulable en JavaScript. | ||
|
|
||
| --- | ||
|
|
||
| ```js | ||
| var compteFacebook = { | ||
| groupes: { | ||
| maitresJedi: {}, | ||
| lolcats: { | ||
| titre: 'Vive les chats !', | ||
| membres: [ 'Patrick' ], | ||
| }, | ||
| }, | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); | ||
| xhr.onreadystatechange = function() { | ||
| if (xhr.readyState === 4) { | ||
| var reponse = JSON.parse(xhr.responseText); | ||
| alert(/* A SAISIR */); | ||
| } | ||
| }; | ||
| xhr.send(); | ||
| ``` | ||
|
|
||
| Quelle instruction faut-il saisir pour accéder à la valeur `'Patrick'` ? | ||
| Si on veut afficher la propriété `email` de l'objet contenu dans la réponse à notre requête, par quoi faut-il replacer `/* A SAISIR */` ? | ||
|
|
||
| * compteFacebook.groupes.lolcats.membres[0] | ||
| - compteFacebook.membres[0] | ||
| - [comptesFacebook][groupes][lolcats][membres][0] | ||
| - ['comptesFacebook']['groupes']['lolcats']['membres'][0] | ||
| - JSON.parse(xhr.responseText.email) | ||
| - xhr.responseText.email | ||
| * reponse.email | ||
| - responseText['email'] | ||
|
|
||
| ??? | ||
|
|
||
| Il faut préciser tout le cheminement à effectuer, niveau par niveau, en partant de la racine de l'arbre: la variable qui contient l'objet principal. | ||
|
|
||
| Vu qu'on connaît les clés de chaque propriété de cet objet hiérarchique (objets imbriqués), on peut utiliser la notation pointée, sauf pour accéder au premier élément du tableau contenant la valeur `'Patrick'`. | ||
| - la propriété `xhr.responseText` est de type `string` (c'est la forme *sérialisée* de l'objet contenu dans la réponse à la requête), donc on ne peut pas utiliser directement la notation pointée pour accéder à la propriété `email` demandée. | ||
| - `JSON.parse()` a été appelé sur `xhr.responseText`, et l'objet résultant est stocké dans la variable `reponse`. Il n'est donc pas nécéssaire d'appeler `JSON.parse()` à nouveau. | ||
| - `responseText['email']` causerait une erreur car `responseText` est une propriété de l'objet `xhr`, et non une variable existante. | ||
|
|
||
| Il est possible d'utiliser des crochets au lieu de la notation pointée, à condition de mettre les noms de chaque clé entre apostrophes (car on connaît leur valeur littérale à priori), et de ne pas mettre le nom de la variable contenant l'objet (`compteFacebook`) entre crochets, car ce n'est pas une clé de propriété. | ||
| Il va donc falloir extraire la propriété `email` de l'objet contenu dans la variable `reponse` (qui a été désérialisé par `JSON.parse()`), en utilisant la notation pointée: `reponse.email`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters