A la pràctica
El principi consisteix en fer que AJAX sigui accessible, amagant-ne la complexitat:
Tinc un tros de pàgina que conté enllaços cap a aquesta mateixa pàgina i que només provoquen canvis en aquest tros de pàgina:
- poso aquest tros de pàgina a dins d’un esquelet diferent
- marco els enllaços afectats amb la class ajax :
<a href='monlien' class='ajax'>...</a> - incloc el meu esquelet a una pàgina principal amb
<INCLURE{fond=monskel}{ajax}{env}>o#INCLURE{fond=monskel}{ajax}{env}
I això és tot!
Algunes petites precisions malgrat tot:
- comproveu sempre primer el vostre esquelet sense l’argument
{ajax} -
{ajax}hauria d’anar sempre acompanyat de{env}per tal d’evitar qualsevol risc d’injecció d’ULRL’s a la memòria cau d’SPIP. - per defecte, els enllaços
acontinguts a dins d’una classepaginationtambé es mostren en AJAX. - és possible determinar altres enllaços especificant el selector
jquery
var ajaxbloc_selecteur = 'a.uneautreclasse';
Amb tots els detalls
Sintaxi de crida:
-
<INCLURE{fond=mon_fond}{ajax}{env}> -
[(#INCLURE{fond=mon_fond}{ajax}{env})]
Aquesta crida inclou l’esquelet mon_fond aplicant AJAX automàticament a tots els enllaços definits per la variable js ajaxbloc_selecteur.
Un bloc <div ..></div> s’insereix automàticament a l’entorn del contingut del esquelet inclusiu, pel mecanisme de gestió de l’AJAX.
Per defecte aquest defineix les ’.pagination a,a.ajax’. Dit d’una altra manera, fa falta tenir al codi font dels esquelets:
- o bé la gestió estàndard de la paginació per SPIP. A condició que l’etiqueta
#PAGINATIONestigui inclosa en un element de classepagination. Ex :<p class="pagination">#PAGINATION</p> - o bé una classe
ajaxals enllaços (<a class="ajax" href=...>)
Un clic en un enllaç AJAX reactiva automàticament només el càlcul de l’esquelet inclusiu, restaurant el seu #ENV, i afegint-hi els paràmetres passats per l’Url de l’enllaç.
El bloc recarregat passa a tenir una opacitat del 50 % i agafa la class loading durant la càrrega cosa que permet modificar-ne l’estil segons les nostres conveniències.
És interessant adonar-nos que:
- els enllaços
ajaxes posen a la memòria cau del navegador quan es cliquen un cop. El bloc, per tant, només es carrega un cop, encara que l’internauta torni a clicar diverses vegades sobre el mateix ’enllaç - alguns enllaços es poden recarregar prèviament si els hi afegim la classe
preload
Alguns exemples
Utilització dels enllaços AJAX
O sigui, tenim l’esquelet inc-liens.html. El cridarem a dins de l’esquelet inclusiu
[(#INCLURE{fond=inc-liens}{ajax}{env})]I contindrà
<BOUCLE_liste(AUTEURS) >
<a class="ajax" href="[(#SELF|parametre_url{id_auteur,#ID_AUTEUR})]">
#NOM #ID_AUTEUR
</a>
</BOUCLE_liste>
[(#ENV{id_auteur}|oui)
#ENV{id_auteur}
]
<h4> Utilització de la paginació</h4>
Per la paginació, prenem un exemple tret de <code>squelettes-dist/sommaire.html</code>.
Posem a dins d'un esquelet <code>inc-recents.html</code> el bucle que llista els articles recents:
[(#REM) Últims articles ]
```
Llavors n’hi ha prou que el posem a dins de sommaire.html, al lloc d’aquest bucle
<INCLURE{fond=inc-recents}{env}{ajax}>
Límits i casos particulars
Aquest mecanisme automatitzat d’aplicació d’AJAX dels blocs descansa sobre una hipòtesi: els enllaços AJAX només permeten refrescar el bloc que els contenen, inserint la versió modificada al mateix indret. No es possible determinar una altra regió de la pagina.
Per altra banda, és important que ens fixem que el càlcul de l’esquelet inclusiu només ha de basar-se exclusivament ene els paràmetres passats per #ENV.
En efecte, en el moment de calcular el bloc AJAX, aquest es tornarà a calcular tot sol, cap a fora de l’esquelet que el crida. Només es restauraran les variables contingudes a #ENV.
D’aquesta manera, no és possible fer referència a variables PHP globals: aquestes no seran restaurades en el moment del càlcul del bloc AJAX.
Si veritablement voleu utilitzar variables globals PHP, és necessari re-injectar-les a dins del #ENV en el moment de la inclusió:
<INCLURE{fond=monskel}{ajax}{env}{parametre=#EVAL{$GLOBALS['toto']}}>Una mica d’història
SPIP 1.9.2 havia començat una temptativa (no documentada ja que era insatisfactòria) de considerar el bucle com un tros i permetre aplicar AJAX al contingut del bucle, sense haver de dividir l’esquelet.
Això es va revelar insatisfactori ja que:
- l’entitat bucle no era forçosament pertinent -> per exemple, una llista on els elements són generats per diversos bucles
- això obligava a tornar a calcular tota la pàgina per arribar al bucle, ja que no es podia conèixer el seu context d’entrada -> el servidor feia gairebé un càlcul de la pàgina completa per extreure’n el tros, le serveur faisait presque un calcul de page complet pour en extraire le morceau, guanyant molt poc en rapidesa
La nova solució té l’avantatge:
- d’obligar al dissenyador de l’esquelet a fer la fragmentació del tros que serà refrescat, posant-lo a dins d’un esquelet inclusiu
- de permetre-li decidir exactament què forma part d’un bloc funcional independent de la resta de la pàgina
- d’explicitar el seu entorn passant-lo en paràmetre a dins de la inclusió
- de permetre que el servidor només torni a calcular aquest fragment de pàgina