En algunas ocasiones nos hemos encontrado con la necesidad de dotar a la página de carga de elementos mediante ajax. Es importante partir de una web completamente funcional sin Javascript para no penalizar el SEO y a aquellos usuarios que no usan Javascript. La tentación es solicitar mediante AJAX el contenido global de la página a cargar y luego dejar que Jquery mediante selectores filtren la información que realmente vamos a actualizar en la web. Esto conlleva un exceso innecesario de trafico, ya que vamos a solicitar todo el contenido de la pagina para emplear solo una pieza de ella, ya que normalmente la cabecera, menú, etc.. son los mismos para cada una de las páginas. Para resolver esto hemos valorado dos opciones:
- Construir un fichero php que solo devuelva la información que necesitamos.
- Parsear directamente la salida de PHP para que solo envie a la red la información necesaria.
El primero de los casos es optimo en cuanto a carga y trafico ya que solo genera la información necesaria y no genera consultas extra a la base de datos, pero tiene un inconveniente: el mantenimiento, cualquier cambio en la lógica de la aplicación se debe hacer por duplicado en la web convencional y en el script que envía la pieza para AJAX. Y esto es un problema sobre todo en grandes aplicaciones. El segundo caso, resuleve este problema ya que partiendo del mismo código y con el paso de una variable get, PHP solo devuelve el contendido necesario eliminando el tráfico innecesario. Si empleamos algún sistema de cacheo de la salida de PHP, como es nuestro caso, eliminamos las consultas extras para componer el resto de la página que no vamos a necesitar. Solo penalizaremos la carga de memoria y CPU del servidor necesaria para el parseo del XHTML. Nosotros nos decantamos por la segunda opcion y para ello usamos http://simplehtmldom.sourceforge.net/ una herramienta que nos permite trabajar con el DOM de forma similar a como podemos hacer con JQuery. En nuestro PHP solo tenemos que añadir las siguientes lineas:
-
if ($_GET["selector"]) { $html = str_get_html($globalHTML); echo $html->find($selector,0)->innertext; }
Donde $globalHTML es la variable que contiene todo el HTML de la páginba, nosotros usamos habitualmente Smarty, por lo que recuperar el HTML antes de enviarlo a la salida es muy sencillo usando fetch en lugar de display Y en nuestro javascript
-
$("#seccionACargar").load("nuestraPagina.php?selector=#seccionACargar");
De esta forma al cargar nuestraPagina.php?selector=#seccionACargar el php no devolvera todo el HTML de la página si no que nos devolvera solo el contenido del selector ahorrando una buena candidad de bytes (o Kb) en la trasmisión de los datos. Como ya he comentado esto supone un gran ahorro con respecto a la alternativa que nos ofrece jquery
-
$("#seccionACargar").load("nuestraPagina.php #seccionACargar");
ya que Jquery recupera la página completa y luego realiza el parseo. Nosotros hemos usado con éxito esta técnica en www.berroguetto.com para cargar cada una de las secciones de la web, y elemento de ellas, como las noticias y cada una de las páginas de los paginadores.
