Cours 8 - AJAX

name: inverse
layout: true
class: center, middle, inverse
---

# Developpement Web - CM 8
## Inès de Courchelle

## 2021-2022

![image](../img/CY-tech.png)

---
layout: false

# AJAX c’est quoi ?

| A                                            | B                                         |
| :---------------------:                      | :--------------------:                    |
| <img src="img/ajax_produit.jpg"  width=150/> | <img src="img/ajax_club.jpg"  width=200/> |

<br>

| C                                         | D                                    |
| :---------------------:                   | :--------------------:               |
| <img src="img/ajx_mitho.jpeg" width=150/> | <img src="img/ajax.png"  width=150/> |

---
# Votre Ultime Baffouille ?
<center>
<img src="img/ajaxJoke.png" width=400/>
</center>

---
# Histoire
- Notion introduite par microsoft en 1998 via un composant ActiveX
- Pour l’application Web OutlookWeb Access
- Le terme AJAX a été introduit par Jesse James Garrett (informaticien Americain) le 18 février 2005 dans un article sur le site Web Adaptive Path.

.pull-left[
<center>
<img src="img/jesse.jpg" width=150/>
</center>
]
.pull-right[
<center>
<img src="img/outlook_web.jpg" width=250/>
</center>
]

---
# Spécification
## Définition
- **A**synchonous **Ja**vaScript and **X**ML
- Ce n’est pas un langage de programmation
- Ce n’est pas une technologie : c’est un ensemble d’outils qui permet de construire des pages web dynamiques côté client.
    -   HTML + CSS
    -   Javascript
    -   XML
    -   DOM

## Objectifs
- Diminuer les temps de latence
- Ne pas avoir à recharger une page
- Augmenter la réactivité d’une application Web

---
# À quoi çà sert ?
## Principes
*Injecter des données stockées côté serveur dans des pages clientes sans recharger la page*
<center>
<img src="img/client_serveur_v1.png" width=650/>
</center>

---
# À quoi çà ressemble ? 1/2

---
# A quoi çà ressemble ? 2/2

- À l’utilisateur de rentrer un nombre
- À l’utilisateur de valider son choix
- Au programme d’appeler la fonction js **payer()** à la validation del’utilisateur

---
# Démonstration
<a href="demos/demo1/exemple1.html" target="_blank"> ICI </a>
<center>
    <img src="https://media.giphy.com/media/APbMklGCGIE1BKcz9F/giphy.gif" width=400/>
</center>

---
# Disséquons les instructions JS
La partie Javascript est constituée d’une fonction divisée en 5 Parties :
.pull-left[

1. Récupérer les éléments contenus dans le HTML
2. Initialiser un Objet de type XMLHttpRequest
3. Écouter à travers l’objet tout traitement côté serveur
4. Appliquer une action en cas de traitement côté serveur
5. Envoyer des informations au serveur pour un traitement

]

.pull-right[
<center>
    <img src="img/principe2.png" width=400/>
</center>
]

---
# ATTENTION : Sens de lecture du code
.underR[Le code ne se lit pas de haut en bas :]
.pull-left[

1.  **N°1 :** Récupérer les éléments contenus dans le HTML
2.  **N°2 :** Initialiser un Objet de type XMLHttpRequest
3.  **N°3 :** Écouter à travers l’objet tout traitement côté serveur
4.  **N°5 :** Envoyer des informations au serveur pour un traitement
5.  **N°4 :** Appliquer une action en cas de traitement côté serveur
]

.pull-right[
<center>
<img src="img/principe2.png" width=400/>
</center>
]

---
# traitement.php ? 1/2
## objectifs
.pull-left[
- C’est notre traitement côté serveur !!
- Elle récupere des données en GET/POST comme un action et une form
- Elle s’éxécute une fois l’instruction **send** réalisée

]

.pull-right[
<center>
<img src="img/principe3.png" width=400/>
</center>
]

---
# traitement.php ? 2/2
## Les instructions suivantes permettent de :
.pull-left[
1. Récupérer la valeur taxe passée en GET
2. Créer une variable tva
3. Calculer la tva à partir de la variable taxe
4. Afficher le résultat
]
.pull-right[
<center>
<img src="img/traitement1.png" width=250/>
</center>
]

---
# Mais ...
## j’ai encore des questions ???
- C’est quoi un objet ?
- Ça nous sert à quoi dans notre contexte ?
- C'est quoi ready state ?  Çà veut dire quoi status ?
- Mais ???

```javascript
this.responseText ??
```

---
# C’est quoi un objet ?
## AJAX et l'objet
- Ajax se base sur l’utilisation de l’objet Javascript **XMLHttpRequest()**
- C’est un objet JS utilisé depuis 2001 permettant, sans rechargement de la page de récupèrer des données sur le serveur et les afficher grâce au js

## De manière générale
- Un objet en informatique est une spécialisation d’un composant plus général
- Par exemple, **Jean-Michel** est une spécialisation du composant **Personne**
- Un objet peut réaliser un certain nombre d’opérations précisé dans le composant général
- Par exemple, le composant **Personne** autorise l’opération **Sport**
- Du coup, **Jean-Michel** fait du sport, et il fait même du **football**
- Si on repart dans du code Jean-Michel est une variable et l’opération sport est une fonction.

---
# hein ?
## Vous pouvez répéter ?
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jItPKY53oWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>

---
# Dans notre contexte ?
Si on repart dans notre code : **xhttp** est une variable et **XMLHttpRequest** est notre
composante principale.
.pull-left[
Les instructions suivantes permettent de :
1. Créer un objet à partir d’une composante principale et lui donner un nom (celui que l’on veut)
2. Utiliser l’opération de **XMLHttpRequest** permettant d’écouter les changements réalisés sur le serveur
3. Envoyer les informations au serveur et à la bonne page du serveur
]
.pull-right[
<center>
<img src="img/principe4.png" width=400/>
</center>
]

C’est quoi le machin qui reste en rose ?

---
# le reste en rose !
## C-à-d
.pull-left[
1. Le readystate doit être égale à 4 afin de vérifier que le serveur à terminer le traitement (arriver à la fin du fichier **traitement.php**)
2.  Le status doit être égale à 200 afin de vérifier que le serveur peut accèder à la page. S’il est égale à 404, c’est la page qui n’a pas été trouvée (**404 not found**).
3. La responseText sont les chaînes de caractéres écrites par le serveur (**les echos**)
]

.pull-right[
<center>
<img src="img/principe5.png" width=410/>
</center>
]

---
# Comment ça fonctionne ?
C'est comme une balle de ping pong qui navigue entre le serveur et le client

---
# Évolution de l’objet  1/12
## Etape 1 : Créer l’objet
<center>
<img src="img/Objet1.png" width=700/>
</center>

---
# Évolution de l’objet 2/12
## Etape 2 : Placer l’objet sur écoute, pour vérifier s’il change d’état
<center>
<img src="img/Objet2.png" width=700/>
</center>

---
# Évolution de l’objet 3/12
## Etape 3 : Ecouter l’objet mais il n’a pas changé
<center>
<img src="img/Objet3.png" width=700/>
</center>

---
# Évolution de l’objet 4/12
## Etape 4 : Préparer les données à envoyer, et choisir la méthode
Ici, les données sont **la taxe** et la méthode **Get**
<center>
<img src="img/Objet4.png" width=700/>
</center>

---
# Évolution de l’objet 5/12
## Etape 5 : Voyager côté serveur !
<center>
<img src="img/Objet5.png" width=700/>
</center>

---
# Évolution de l’objet 6/12
## Etape 6 : Continuer à écouter l’objet mais il n’est pas dans l’état demandé
<center>
<img src="img/Objet6.png" width=700/>
</center>

---
# Évolution de l’objet 7/12
## Etape 7 : Réaliser un traitement côté serveur

---
# Évolution de l’objet 8/12
## Etape 8 : Continuer à écouter l’objet mais il n’est pas dans l’état demandé
<center>
<img src="img/Objet8.png" width=700/>
</center>

---
# Évolution de l’objet 9/12
## Etape 9 : Terminer le traitement serveur ! Ici, on décide de faire un texte
<center>
<img src="img/Objet9.png" width=700/>
</center>

---
# Évolution de l’objet 10/12
## Etape 10 : Partir du serveur ! On n’a plus rien à faire ici !
<center>
<img src="img/Objet10.png" width=700/>
</center>

---
# Évolution de l’objet 11/12
## Etape 11 : Continuer à écouter l’objet et effectivement il est dans l’état voulu !
<center>
<img src="img/Objet11.png" width=700/>
</center>

---
# Évolution de l’objet 12/12
## Etape 12 : Réaliser un traitement côté client ! Ici, écrire le texte du serveur, dans le div demo
<center>
<img src="img/Objet12.png" width=700/>
</center>

---
# Ce qu’il faut retenir
Afin de réaliser l’ajax voici le squelette de code qui vous servira à chaque fois :

.pull-left[
1. Ce que vous voulez en html qui appel une fonction js
2. Ce que vous voulez en javascript
3. Ce que vous voulez envoyer au serveur
4. Ce que vous voulez réaliser comme traitement une fois le serveur terminer (affichage, traitement Js ...)
TOdo illustration
]
.pull-right[
<center>
<img src="img/final.png" width=400/>
</center>
]

---
# JSON
## Un format de données universel

- **J**ava**S**cript **O**bject **N**otation – Notation Objet issue de JavaScript) est un format léger d’échange de données.
- C’est un format texte indépendant de tout langage de progrmmation !
- Utilisé dans beaucoup de langage : C, C++, JavaScript, Perl, Python ...

---
# JSON
## À quoi ça ressemble ?
.pull-left[
<center>
<img src="img/JSON1.png" width=250/>
</center>
]
.pull-right[
<center>
<img src="img/JSON2.png" width=250/>
</center>
]

---
# À quoi çà ressemble du JSON ? 2/2
## Principes
- Ordonner ces données dans un tableau
- Délimiter un tableau par des **“{”**
- Délimiter un sous tableau par des **“\[”**

## Pour vérifier votre JSON :

<http://json.parser.online.fr/>

---
# Démonstration
<a href="demos/demo2/exemple2.html" target="_blank"> ICI </a>
<center>
    <img src="https://media.giphy.com/media/APbMklGCGIE1BKcz9F/giphy.gif" width=400/>
</center>

---
# Dans notre contexte 1/2
##  JSON - Comment çà marche ?
.pull-left[
1. Récupérer les éléments contenus dans le HTML
2. Créer un tableau format JSON
3. Convertir le tableau JSON en chaîne de caractères (pour pouvoir l’envoyer)
4. Envoyer les informations en chaîne de caractères au serveur pour un traitement

]
.pull-right[
<center>
<img src="img/json_ex1.png" width=410/>
</center>
]

---
# Dans notre contexte 2/2
## JSON - Comment çà marche ?
1. Récupérer les éléments contenus dans le $_POST
2. Convertir la chaîne de caractères en JSON
3. Parcourir le JSON avec un **foreach**