En algunes ocasions ens hem trobat amb la necessitat de dotar la pàgina de càrrega d'elements mitjançant ajax. És important partir d'una web completament funcional sense JavaScript per no penalitzar al SEO ia aquells usuaris que no usen Javascript. La temptació és sol · licitar mitjançant AJAX el contingut global de la pàgina a carregar i després deixar que jQuery mitjançant selectors filtrin la informació que realment anem a actualitzar a la web. Això comporta un excés innecessari de trànsit, ja que anem a sol · licitar tot el contingut de la pagina per emprar només una peça d'ella, ja que normalment la capçalera, menú, etc .. són els mateixos per a cadascuna de les pàgines. Per resoldre això hem valorat dues opcions:
- Construir un fitxer php que només torni la informació que necessitem.
- Parsejar directament la sortida de PHP perquè només enviï a la xarxa la informació necessària.
El primer dels casos és òptim quant a càrrega i trànsit ja que només genera la informació necessària i no genera consultes extra a la base de dades, però té un inconvenient: el manteniment, qualsevol canvi en la lògica de l'aplicació s'ha de fer per duplicat a la web convencional i en l'script que envia la peça per a AJAX. I això és un problema sobretot en grans aplicacions. El segon cas, resuleve aquest problema ja que partint del mateix codi i amb el pas d'una variable get, PHP només retorna el contès necessari eliminant el trànsit innecessari. Si emprem algun sistema d'escorcoll de la sortida de PHP, com és el nostre cas, eliminem les consultes extres per compondre la resta de la pàgina que no necessitarem. Només penalitzarem la càrrega de memòria i CPU del servidor necessària per al parseo del XHTML. Nosaltres ens decantem per la segona opció i per això fem servir http://simplehtmldom.sourceforge.net/ una eina que ens permet treballar amb el DOM de forma similar a com podem fer amb JQuery. En el nostre PHP només hem d'afegir les següents línies:
On $ globalHTML és la variable que conté tot l'HTML de la páginba, nosaltres fem servir habitualment Smarty, pel que recuperar l'HTML abans d'enviar a la sortida és molt senzill usant fetch en lloc de display I en el nostre javascript
- ) . load ( "nuestraPagina.php?selector=#seccionACargar" ) ; $ ("# SeccionACargar"). Load ("nuestraPagina.php? Selector = # seccionACargar");
D'aquesta manera en carregar nuestraPagina.php? Selector = # seccionACargar el php no tornarà tot l'HTML de la pàgina si no que ens retornara només el contingut del selector estalviant un bon Quantitat de bytes (o Kb) en la transmissió de les dades. Com ja he comentat això suposa un gran estalvi respecte a l'alternativa que ens ofereix jquery
- ) . load ( "nuestraPagina.php #seccionACargar" ) ; $ ("# SeccionACargar"). Load ("nuestraPagina.php # seccionACargar");
ja que Jquery recupera la pàgina completa i després realitza el parseo. Nosaltres hem fet servir amb èxit aquesta tècnica en www.berroguetto.com per carregar cadascuna de les seccions del web, i element d'elles, com les notícies i cadascuna de les pàgines dels paginadors.
