Programmation JavaScript/Ajax

Programmation JavaScript

1. Introduction

   Programmer en deux minutes

   • Page wiki
   • Compteur en temps réel
   • Site dans un document

2. Outils de développement
3. Syntaxe
   1. Ligne d'instruction
   2. Ordre d'évaluation
   3. Bloc d'instructions
   4. Identificateurs
   5. Expression littérale
   6. Commentaire
   7. Mots réservés
   8. Variables
   9. Opérateurs
   10. Structures de contrôle
   11. Exceptions et erreurs
   12. Fonctions utilisateur
   13. Évènement
4. Objets prédéfinis
   1. window
   2. document
   3. navigator
   4. Array
   5. Boolean
   6. Date
   7. Error
   8. Function
   9. Math
   10. Number
   11. Object
   12. String
   13. Element
   14. RegExp
5. Fonctions prédéfinies
6. Programmation avancée
   1. Opérateurs de bits
   2. Fermeture
   3. Programmation objet
   4. Notation JSON
   5. AJAX
   6. Stockage
   7. Générateurs
   8. Interface DOM
   9. Objets Microsoft
7. Frameworks
   1. Dojo

      Hello World

      Widgets

      Ressources

   2. jQuery
   3. Node.js
   4. React.js
8. Bibliothèques
   1. Datatables
9. Tests
   1. Ava
   2. Jest
   3. Cypress
10. Débogage
11. Erreurs connues
12. Références

AJAX signifie "Asynchronous Javascript And Xml", soit « Javascript asynchrone et Xml » en français. Il s'agit d'un moyen de charger le contenu retourné par un serveur web (ressource, fichier, ...) depuis le javascript. Cela permet notamment de recharger une partie de l'interface web sans recharger toute la page.

Exemple

function createXhrObject()
{
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();

    if (window.ActiveXObject)
    {
        var names = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for(var i in names)
        {
            try{ return new ActiveXObject(names[i]); }
            catch(e){}
        }
    }
    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
    return null; // non supporté
}

function updatePage(contentpath)
{
    let xhr = createXhrObject();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
           document.getElementById('cadre_contenu').innerHTML = xhr.responseText;
    }
    xhr.open("GET", "load.php?page="+contentpath, true);
    xhr.send(null); // Envoi avec données (typiquement pour une requête POST seulement, null pour GET).
}