Contactez-nous

1

Plugin « Inclure Ajaxload »

27 septembre 2011
par ARNO*

La fonction introduite par ce plugin est similaire au principe d’Ajax Parallel Loading introduit dans Zpip, tel que décrit ici. La méthode de fonctionnement est cependant différente, et surtout ce plugin est destiné à être utilisé dans n’importe quel jeu de squelettes (non Zpip, donc).

Plugins « Inclure Ajaxload »

Il ajoute un critère, {ajaxload}, à la balise #INCLURE, par exemple :

  1. [(#INCLURE{fond=inc/footer}{id_rubrique}{ajaxload})]

Au lieu d’insérer dans le code source de la page le contenu de inc/footer avec la variable d’environnement id_rubrique, le critère {ajaxload} modifie complètement le fonctionnement : seul un lien hypertexte doté d’un code spécifique est inséré dans la page. À l’affichage de la page chez le visiteur, une fonction Javascript charge dynamiquement le contenu nécessaire et l’insère à l’endroit prévu.

Il est impératif d’utiliser #INSERT_HEAD dans le squelette appelant (le code Javascript nécessaire au bon fonctionnement est alors inséré dans la page).

Quelques remarques :
- seuls les critères spécifiés dans l’appel #INCLURE sont passés à la page appelante ; si ces critères sont communs à plusieurs pages, on bénéficie ainsi du chargement d’éléments communs à ces pages (cache navigateur) ;
- si Javascript est désactivé chez le visiteur, une version fonctionnant sans Javascript est activée ;
- de manière automatique, les moteurs de recherche se voient proposer le contenu complet (identique à la version sans Javascript), ce qui leur permet d’indexer correctement les pages et de profiter de la navigation du site ;
- attention, ne pas insérer dans ces morceaux chargés dynamiquement des publicités ou des compteurs de visites (notamment Google), qui « écrivent » via Javascript, ce qui généralement provoque un affichage de page blanche ; plus généralement, éviter les chargements Ajax à l’intérieur de ces éléments chargés dynamiquement, ils deviennent difficiles à maîtriser.

Méthode alternative : chargement d’un fichier statique

La version 0.7 du plugin introduit une nouvelle méthode : l’inclusion dynamique de fichiers HTML parfaitement statiques. La méthode « normale » fonctionne sur la base des « noisettes Ajax » de SPIP : les fichiers inclus sont donc bien pages SPIP dotées de toutes les caractéristiques habituelles (notamment la possibilité d’avoir du contenu dynamique).

La méthode alternative permet d’inclure non des pages SPIP, mais des petits fichiers HTML statiques, stockés (brutalement...) dans /local/cache-ajaxload.

Pour cela, le critère devient :

  1. <code>{ajaxload=html}</code>

Dans ce cas, au calcul de la page, la noisette est immédiatement calculée, et son contenu est stocké « en dur » dans /local/cache-ajaxload. Au chargement de la page, c’est ce fichier HTML qui est directement inséré dans la page.

Pour les visites des robots de moteurs de recherche ou sans Javascript, ce sont ces morceaux « statiques » qui sont directement inclus.

L’avantage principal de cette méthode est que ces fichiers sont appelés « hors SPIP », et même hors PHP. Ce sont des fichiers HTML entièrement statiques. On gagne en vitesse et en charge du serveur. Il est très probable également que la visite du site par un robot de moteur de recherche soit beaucoup moins lourde pour le serveur avec cette méthode.

L’inconvénient, c’est que ces fichiers sortent totalement de SPIP :
— ils sont totalement statiques, et ne doivent donc contenir aucun élément dépendant d’une #SESSION, du statut du visiteur, ni code PHP non précalculé (tel que l’affichage de l’heure ou de l’IP du visiteur) ;
— le système n’interroge pas la durée du cache selon la méthode SPIP ; la durée de vie d’un tel fichier est fixée par défaut à 2 heures ; on peut forcer une autre durée, dans l’appel, avec un critère supplémentaire (ici : 24 heures) :

  1. <code>{ajaxload=html}{ttl_ajaxload=60*60*24}</code>

L’appel du footer pourrait donc se faire, avec cette méthode, ainsi :

  1. [(#INCLURE{fond=inc/footer}{id_rubrique}{ajaxload=html}{ttl_ajaxload=60*60*24})]

Pour les ceusses qui se la pètent en Javascript

Deux méthodes avancées sont destinées à ceux qui voudraient gérer eux-mêmes les appels Ajax (pas de chargement automatique par ce plugin, donc, mais « à la demande » selon du code développé par le webmestre lui-même). Ces méthodes retournent directement l’URL du fichier qui contient la noisette, à charge pour le créateur du site de savoir comment il souhaite les utiliser :
— {ajaxload=url} retourne l’URL de la noisette dynamique ;
— {ajaxload=url_html} retourne l’URL du fichier HTML statique.

Utiliser l’inclusion ESI de Varnish

Pour le #INCLURE fonctionne directement via l’inclusion ESI de Varnish, utiliser le méthode {ajaxload=esi}.

Évolutions

Version 0.5. Les inclusions {ajax}{ajaxload} conservent désormais le fonctionnement du {ajax}. On peut donc ainsi charger des éléments paginés (la pagination Ajax fonctionne à nouveau).

Version 0.6. Meilleure gestion du <meta refresh>, notamment dans le cas de passage des robots.

Version 0.7. Introduction de la méthode {ajaxload=html} et du critère {ttl_ajaxload=60*60*24}.

Version 0.8. Divers bugs corrigés concernant la navigation sans Javascript et sans cookies.

Version 1.0. Ajout des méthodes {ajaxload=url} et {ajaxload=url_html}.

Version 1.1. Insertion plus fine du code du <meta refresh>, uniquement dans les pages où il est nécessaire. (En revanche, l’insertion du Javascript reste systématique, de façon à ne pas changer, d’une page à l’autre, le fichier Javascript créé par le compactage de SPIP.)

Version 1.3 Ajout de la méthode {ajaxload=esi}.

  • laurent
    Décembre 2011

    bonjour. Sous spip 2.1, javascript du navigateur acuité, le plugin fonctionne très bien. J’ai un soucis lors de la désactivation du javascript : la "petite roue" tourne tourne tourne mais.... Rien de plus :( Auriez vous des pistes de résolution du problème ? Merci d’avance, et merci pour cet outil très efficace !

  • laurent
    Décembre 2011

    (re) salut

    apres tests, voila ce qui bloque :

    [(#INCLURE{fond=inc/footer}{id_rubrique}{ajaxload})]
    ne passe pas sans javascripts

    par contre
    #INCLURE{fond=inc/footer}{id_rubrique}{ajaxload}
    oui.

    je ne comprend pas pourquoi (mais connaissances etant limitées). cette différence d’écriture a t elle un impact ?

    Si vous pouvez nous en dire plus... ?

    grand merci !

  • laurent
    Décembre 2011

    #INCLURE{fond=inc/footer}{id_rubrique}{ajaxload}

    c’etait une mauvaise idée... :S

    donc j’ai toujours ce probleme pour les navigateurs dont le javascript est désactivé : la "petite roue" tourne tourne tourne...

    je suppose que coté robots, ca doit pas etre top (?)

    ps : j’espere qu’il y a toujours quelqu’un derrière cette page (?) - je ne sais si c’est le bonne endroit , ni ou poster ce probleme.

  • ARNO*
    Décembre 2011

    Laurent, tu as bien #INSERT_HEAD, dans ton entête ?

  • laurent
    Décembre 2011

    salut.

    Ouaip, ya bien #insert_head dans un fichier head appelé en inclure pour chaque page (à la base c’est un "squelette" sarka-spip").

    Voici le site en question : http://www.fsl-nancy.fr

    Merci du coup de main.

  • ARNO*
    Décembre 2011

    Hum. La partie du plugin qui provoque l’insertion d’un dans la page est une peu tordue.

    Est-ce que tes #INCLURE en ajaxload sont dans le squelette « racine » (genre « sommaire.html »), ou bien dans un fichier qui est déjà lui-même inclus ? Et dans ce cas, si tu mets un ajaxload déjà dans le fichier « sommaire.html », est-ce que ça change la donne ?

  • ARNO*
    Décembre 2011

    Au fait, le plugin détecte (comme SPIP) directement les principaux robots. Il balance des pages « complètes » directement quand il repère les robots. Sans attendre que le robot n’interprète pas Javascript.

    Du coup, Google « voit » de toute façon les pages complètes, sans passer par les versions « no_js ». La version « no_js », c’est pour l’accessibilité, pas pour le référencement.

  • laurent
    Décembre 2011

    Est-ce que tes #INCLURE en ajaxload sont dans le squelette « racine »

    ouaip, la plus part sont a la racine

    ya plusieurs appels (par exemple pour sommaire : colonne droite et pieds par exemple). j’ai aussi essayé avec 1 seul appel en ajaxload dune page "de texte" depuis la page sommaire... meme effet...

    je continue les test en "fin de soirée"
    thanks a lot !

  • laurent
    Décembre 2011

    bon , ca marche.

    voila la "procedure" que j’ai utilisé
    - désactivation de tous les plugins
    - "désactivation" des squelettes
    - modification de la page sommaire du squelette-dist pour appeler en ajaxload un inclure (au choix, la g modifié l’inclure des rubriques)
    - vidange
    - activation du plugin ajaxload
    - test page sommaire sans javascript
    - a ce moment il m’a semblé que le navigateur rafraichissait la page en plusieurs temps (j’ai pas eu le temps de noter l’adresse exacte) : monsite.truc/javascript=no puis monsite.truc
    - apres ce "cycle" ca marche sans javascript, et sans (en apparence ?) le cycle mentionné ci dessus.
    - "remise en fonction" du squelette / vidange
    - activation des autres plugins / vidange

    je n’ai pas compris d’ou venait le probleme, mais cela fonctionne sans probleme maintenant : avec javascript, l(es)’appel(s) des inclures avec ajaxload se fait en parallèle / sans javascript, l’inclure est "direct" et affiche la page.

    voila voila...
    si ca peut aider...

  • Marcimat
    Janvier 2012

    Un petit mot de passage pour signaler que cet excellent plugin semble fonctionner parfaitement en SPIP 3.0-beta2

    Merci Arno !

  • Stéphane Santon
    Avril 2012

    Bonjour,

    Un exemple de base pour {ajaxload=url} ? Je ne sais pas par quel bout le prendre... Merci

  • Janvier 2013

    Bonjour

    Je n’arrive pas à attraper le style attaché à l’image animé lors du chargement. Quel est le nom de cette class ? J’aurai aimé centrer l’image en question qui chez moi apparaît dans le coin haut et gauche.

    Merci de tes réponses

  • Janvier 2013

    Re. Je pense avoir levé un bug sur le plugin. Il introduit des balises script non fermées dans le html, tout à proximité de la balise body. On est en version spip 2.1.19.

    Les balises sont :

    <script type="text/javascript"><!--
    document.write("<\/script><script>/*");
    //--></script>

    Merci de nous dire.

  • laurent
    Février 2015

    salut salut

    une question à propos des fichiers statiques générés via ajaxload=html : sont ils effacés automatiquement ?

    merci !

  • Julien
    18 mai

    Dans la dernière version, la pagination Ajax ne fonctionne plus.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.