• [^] # Re: contenus et habillage

    Posté par (site web personnel) . En réponse à la dépêche Sortie de μJS, une bibliothèque JavaScript légère pour dynamiser un site sans framework. Évalué à 3.

    Headers complets : il y en a 4 en tout. X-Requested-With: XMLHttpRequest, X-Mu-Mode (mode d'injection courant), X-Mu-Method (pour les requêtes non-GET), et X-Mu-Prefetch: 1 (sur les prefetch uniquement).

    LeX-Requested-With: muJS était sur une ancienne version de μJS (et notamment visible sur le site mujs.org, qui vient d'être mis à jour)

    Quel fragment servir : deux approches. Soit le serveur retourne la page complète et μJS extrait lui-même le bon fragment via mu-source. Soit le serveur détecte X-Requested-With et retourne uniquement le fragment. C'est le développeur qui choisit.

    Pour illustrer les choses, imaginons que tu aies un page qui affiche 10 items (sur une liste qui peut en contenir plus), ainsi que le nombre total d'items. Tu auras une page qui ressemble à ça :

    <!-- URL : /mapage -->
    <html>
    <head>...</head>
    <body>
    <nav>...</nav>
    <ul>
    <li>Item 1</li>
    ...
    <li>Item 10</li>
    </ul>
    ...
    <div>
    Total : 125 items
    </div>
    ...
    reste de la page
    ...
    <a href="/mapage">Mettre à jour</a>
    </body>
    </html>

    Tu peux garder les choses comme ça. À chaque clic sur le lient "Mettre à jour", μJS va chercher la page, récupère le <body>, et le met à la place du <body> de la page courante. Ça met à jour toute la page.

    Autre solution : tu ne veux mettre à jour que deux portions (la liste et le nombre total d'items), pas la page entière. Dans ce cas, tu vas mettre des instructions qui n'ont pas d'effet sur le navigateur au chargement initial, mais qui seront utilisées par μJS lors du chargement dynamique.

    <!-- URL : /mapage -->
    <html>
    <head>...</head>
    <body>
    <nav>...</nav>
    <ul id="liste" mu-patch-target="#liste">
    <li>Item 1</li>
    ...
    <li>Item 10</li>
    </ul>
    ...
    <div id="nombre" mu-patch-target="#nombre">
    Total : 125 items
    </div>
    ...
    reste de la page
    ...
    <a href="/mapage" mu-mode="patch">Mettre à jour</a>
    </body>
    </html>

    Ici, le lien porte un attribut mu-mode="patch", donc μJS va chercher à "patcher" la page. Il va récupérer le HTML en AJAX, puis il regarde ce qu'il y a dedans.
    Le tag avec l'attribut mu-patch-target="#liste" va donc remplacer le tag avec id="liste" dans page actuelle .
    Et le tag avec l'attribut mu-patch-target="#nombre" va remplacer le tag avec id="nombre" dans la page actuelle.

    Et si tu cherches à vraiment aller plus loin (mais c'est souvent inutile), tu détectes l'en-tête HTTP X-Requested-With pour que lors d'une requête effectuée par μJS, tu ne renvoies que ce flux :

    <ul id="liste" mu-patch-target="#liste">
    <li>Item 1</li>
    ...
    <li>Item 10</li>
    </ul>
    <div id="nombre" mu-patch-target="#nombre">
    Total : 125 items
    </div>

    Cache HTTP : La remarque est juste, uniquement dans le tout dernier cas décris (si tu détectes X-Requested-With pour ne pas renvoyer la page entière). Dans ce cas, la solution standard est d'ajouter Vary: X-Requested-With dans les réponses serveur. Ça crée deux entrées de cache distinctes pour la même URL (réponse complète vs fragment).

    Service workers : fetch() passe par le service worker, qui voit tous les headers. Aucun problème particulier. Le service worker peut même les utiliser pour différencier les stratégies de cache.