Partie 5 - Manipuler JQUERY

Cette partie couvre l'utilisation de la bibliothèque JQuery pour la manipulation du DOM et l'exécution de requêtes asynchrones avec AJAX.

Chapitre 1 : Découvrir JQUERY (Pages 208-224)

1. Concepts & Définitions

JQuery : Une bibliothèque JavaScript open-source inventée par John Resig en 2006. Elle est compatible avec les différents navigateurs web.
Rôle de JQuery : Simplifier l'utilisation de JavaScript et la manipulation du DOM sur les sites Web. Les traitements nécessitant l'écriture de nombreuses lignes de code JavaScript sont encapsulés dans des méthodes appelées dans une seule ligne de code.
Fonctionnalités de la bibliothèque JQuery :
- Manipulation du HTML et DOM
- Manipulation du CSS
- Méthodes d'événement HTML
- Effets et animations
- AJAX
Installation de JQuery :
- Méthode 1 : Téléchargement : Utiliser un fichier JQuery téléchargé depuis jquery.com.
  - Version de production : Version minifiée et compressée pour la phase de l’hébergement.
  - Version de développement : Version non compressée et lisible, pour la phase de développement et de tests.
- Méthode 2 : JQuery via CDN (Content Delivery Network) : Inclure JQuery à partir d'un CDN sans avoir besoin de télécharger les fichiers.
Sélecteur JQuery : Correspond à un sélecteur CSS utilisé pour interroger (ou rechercher) des éléments HTML.
Action JQuery : Correspond à une action à effectuer sur le(s) élément(s) sélectionné(s).
Événement ready : Événement de l'objet document qui permet d'empêcher l'exécution du code jQuery avant la fin du chargement complet du document.
Chaînage (Chaining) : Technique permettant d'exécuter plusieurs actions JQuery l'une après l'autre (dans la même ligne ou sur des lignes différentes), sur le même élément.
Plugin JQuery : Un code écrit dans un fichier JavaScript standard qui fournit des méthodes jQuery utiles pouvant être utilisées avec les méthodes de la bibliothèque jQuery. Ils permettent d'étendre les fonctionnalités offertes par JQuery.

2. Syntaxes & Codes

Référencer JQuery (Téléchargement) :

<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>

Référencer JQuery (CDN Google) :

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Syntaxe de base JQuery :
```
$(sélecteur).action()
```
- $() est un raccourci pour la fonction jQuery().

Syntaxe de l'événement ready :

$(document).ready(function(){
    // Méthodes jQuery...
});

Syntaxe du chaînage (une ligne) :

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Syntaxe du chaînage (plusieurs lignes) :

$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000);

Intégrer un plugin JQuery :

<script src="jquery.plug-in.js" type="text/javascript"></script>

3. Attributs & Propriétés

removeAttr(attribut) : Méthode JQuery qui supprime un attribut spécifié d'un élément.
- Exemple : removeAttr("href") supprime l'attribut href.
attr(attribut, valeur) : Méthode JQuery qui ajoute ou modifie un attribut avec une valeur spécifiée.
- Exemple : attr("href", "https://www.google.com/") ajoute ou met à jour l'attribut href.

4. Exemples Pratiques

Sélection d'éléments :
- $(this).hide() : masque l'élément courant.
- $("p").hide() : masque tous les éléments <p>.
- $(".test").hide() : masque tous les éléments avec class="test".
- $("#test").hide() : masque l'élément avec id="test".

Désactiver un lien href :

<head>
    <meta charset="utf-8">
    <title>Désactiver un lien</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".menu a").each(function(){
                if($(this).hasClass("disabled")){
                    $(this).removeAttr("href");
                }
            });
        });
    </script>
</head>
<body>
    <ul class="menu">
        <li><a href="https://www.ofppt.ma/">Lien1</a></li>
        <li><a href="https://www.ofppt.ma/">Lien2</a></li>
        <li><a href="https://www.ofppt.ma/" class="disabled">Lien3</a></li>
    </ul>
</body>

Activer un lien href :

<!-- Le HTML change pour le lien 3 -->
<li><a class="disabled">Lien3</a></li>

<!-- Le script change pour utiliser attr() -->
<script type="text/javascript">
    $(document).ready(function(){
        $(".menu a").each(function(){
            if($(this).hasClass("disabled")){
                $(this).attr("href","https://www.google.com/");
            }
        });
    });
</script>

Événements JQuery :

click() :

$("p").click(function(){
    // actions de l’évènement
    $(this).hide();
});

dblclick() :

$("p").dblclick(function(){
    $(this).hide();
});

mouseenter() :

$("#p1").mouseenter(function(){
    alert("Vous êtes sur le paragraphe p1!");
});

mouseleave() :

$("#p1").mouseleave(function(){
    alert("vous avez quitté le paragraphe p1!");
});

5. Spécifications Techniques

Sélecteurs : JQuery utilise la syntaxe des sélecteurs CSS pour trouver des éléments.
Compatibilité : JQuery est conçu pour fonctionner sur une large gamme de navigateurs web.
Plugins : L'intégration se fait via une balise <script> après la balise de JQuery. Le site officiel pour les plugins est https://jquery.com/plugins.

6. Points Critiques

Importance de $(document).ready() : Il est crucial d'encapsuler le code JQuery dans cet événement pour éviter les erreurs sur des éléments non encore chargés dans le DOM. Des actions comme masquer un élément ou obtenir la taille d'une image peuvent échouer si elles sont exécutées avant le chargement complet.
Différence entre $() et jQuery() : $() est simplement un alias (raccourci) pour jQuery().
Chaînage : Permet d'appliquer plusieurs méthodes au même ensemble d'éléments JQuery sans avoir à resélectionner l'élément à chaque fois, ce qui rend le code plus concis et performant.

Chapitre 2 : Découvrir AJAX (Pages 225-248)

1. Concepts & Définitions

AJAX : Acronyme de « Asynchronous JavaScript And XML ». C'est une technologie basée sur :
- Un objet XMLHttpRequest intégré au navigateur (pour demander des données à un serveur Web).
- JavaScript et DOM HTML (pour afficher les données).
Objectifs d'AJAX :
- Lire les données d'un serveur web (après le chargement d'une page web).
- Mettre à jour une page web sans la recharger.
- Envoyer les données à un serveur web (en arrière-plan).
Objet XMLHttpRequest (XHR) : Objet qui permet d’envoyer des requêtes HTTP au serveur, de recevoir des réponses et de mettre à jour la page Web. En mode asynchrone, la mise à jour se réalise sans recharger la page.
XMLHttpRequest.readyState : Propriété qui renvoie l’état d’un client XMLHttpRequest.
Fonction de rappel (Callback) : Une fonction passée en paramètre à une autre fonction. Utilisée pour exécuter du code après la fin d'une opération asynchrone.
Méthode jQuery.ajax() : Fournit les fonctionnalités de base d'Ajax dans jQuery. Elle envoie des requêtes HTTP asynchrones au serveur.

2. Syntaxes & Codes

Création d'un objet XMLHttpRequest :
```
variable = new XMLHttpRequest();
```
Envoyer une demande (XHR natif) :
```
open(method, url, async)
```
Syntaxe de la méthode jQuery.ajax() :
```
$.ajax(url, [options]);
```
Syntaxe de la méthode jQuery.get() :
```
$.get(url, [données], [rappel]);
```
Syntaxe de la méthode jQuery.getJSON() :
```
$.getJSON(url, [données], [rappel]);
```

Syntaxe de la méthode jQuery.post() :

$.post(url, [données], [rappel], [type]);

Syntaxe de la méthode jQuery.load() :
```
$.load(url, [données], [rappel]);
```

3. Attributs & Propriétés

Propriétés de l'objet XMLHttpRequest :
- onreadystatechange : Définit une fonction à appeler lorsque la propriété readyState change.
- readyState : Contient le statut de XMLHttpRequest (valeurs de 0 à 4).
- responseText : Renvoie les données de réponse sous forme de chaîne.
- responseXML : Renvoie les données de réponse sous forme de données XML.
- status : Renvoie le numéro d'état d'une requête (ex: 200, 403, 404).
- statusText : Renvoie le texte d'état (ex: "OK" ou "Not Found").
Méthodes de l'objet XMLHttpRequest :
- new XMLHttpRequest() : Crée un nouvel objet XMLHttpRequest.
- abort() : Quitte la requête courante.
- getAllResponseHeaders() : Retourne toutes les informations du header.
- getResponseHeader() : Retourne une information spécifique du header.
- open(method, url, async, user, psw) : Spécifie la requête.
- send() : Envoie la requête au serveur (utilisé dans les requêtes GET).
- send(string) : Envoie la requête au serveur (utilisé dans les requêtes POST).
Options de la méthode jQuery.ajax() :
- contentType : Type de contenu MIME. Défaut: "application/x-www-form-urlencoded; charset=UTF-8".
- data : Données à envoyer (objet JSON, chaîne, tableau).
- dataType : Type de données attendues du serveur.
- error : Fonction de rappel si la requête échoue.
- global : Booléen pour déclencher les gestionnaires Ajax globaux. Défaut: true.
- headers : Objet de paires clé/valeur d'en-têtes supplémentaires.
- statusCode : Objet JSON de codes HTTP et fonctions associées.
- success : Fonction de rappel si la requête réussit.
- timeout : Délai d'expiration en millisecondes.
- type : Type de requête (POST, PUT, GET). Défaut: GET.
- url : URL de la demande.
- username : Nom d'utilisateur pour l'authentification HTTP.
- password : Mot de passe pour l'authentification HTTP.

4. Exemples Pratiques

Utilisation de onreadystatechange :

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Envoyer une demande Ajax simple avec jQuery :

$.ajax('/jquery/getdata', {
    success: function (data, status, xhr) {
        $('p').append(data);
    }
});
// HTML: <p></p>

Obtenir des données JSON avec ajax() :

$.ajax('/jquery/getjsondata', {
    dataType: 'json', // type des données de la réponse
    timeout: 500, // délai d’expiration en milliseconds
    success: function (data, status, xhr) { // fonction callback en cas de succès
        $('p').append(data.firstName + ' ' + data.middleName + ' ' + data.lastName);
    },
    error: function (jqXhr, textStatus, errorMessage) { // cas d’erreur
        $('p').append('Error: ' + errorMessage);
    }
});
// HTML: <p></p>

Envoyer une requête POST avec ajax() :

$.ajax('/jquery/submitData', {
    type: 'POST', // Méthode POST
    data: { myData: 'Mes données.' }, // données à envoyer
    success: function (data, status, xhr) {
        $('p').append('status: ' + status + ', data: ' + data);
    },
    error: function (jqXhr, textStatus, errorMessage) {
        $('p').append('Error' + errorMessage);
    }
});
// HTML: <p></p>

Utilisation de $.get() :

$.get('/data.txt', // url
    function (data, textStatus, jqXHR) { // success callback
        alert('status: ' + textStatus + ', data:' + data);
    });

Utilisation de $.load() pour charger un fragment de page :

// HTML cible
<div id="msgDiv"></div>

// Code JQuery
$('#msgDiv').load('/demo.html #myHtmlContent');

// Contenu de /demo.html
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
    <h1>Page html.</h1>
    <div id="myHtmlContent">This is my html content.</div>
</body>
</html>

5. Spécifications Techniques

États readyState :
- 0 : Requête non initialisée.
- 1 : Connexion au serveur établie (open() a été invoquée).
- 2 : Requête reçue.
- 3 : Requête en cours de traitement.
- 4 : Requête terminée et réponse prête.
Statuts HTTP courants :
- 200: "OK"
- 403: "Forbidden"
- 404: "Not Found"
Requêtes POST : Pour envoyer des données via POST, il faut utiliser setRequestHeader("Content-type", "application/x-www-form-urlencoded") avec XHR natif. JQuery le fait automatiquement.

6. Points Critiques

Condition de succès AJAX : La condition readyState == 4 && status == 200 est fondamentale. Elle garantit que la requête est terminée (4) et qu'elle a réussi (200).
Asynchrone vs Synchrone : Les requêtes doivent être envoyées de manière asynchrone pour ne pas bloquer l'interface utilisateur.
$.load() et sélecteur : Si aucun élément n'est trouvé par le sélecteur de la méthode load(), la requête Ajax ne sera pas envoyée du tout.
Rappel getJSON() vs get() : getJSON() est spécifique à la récupération de données au format JSON, tandis que get() peut récupérer tout type de données.

🔗 Navigation