Desde hace tiempo tengo la idea, creo que buena, de incorporar AJAX a la página Web de www.openti.net, con sus grandes beneficios:
- Carga más rápida de las páginas.
- Mejor experiencia de usuario y mayor impacto para este.
- Menor tráfico de datos, con lo cual permitirá mayor número de usuarios concurrentes.
- Tomar tendencia hacia la Web 2.0
Pero también tenemos que tener cuidado con otra serie de aspectos:
- No impedir la indexación de partes del contenidos a los navegadores.
- No impedir a los generadores de estadísticas (Yo uso Google Analytics) que puedan controlar este tipo de tráfico.
Llevo desde ayer integrando la librería de MooTools en la web, por lo general es bastante sencillo, pero tengo algunos problemillas pendientes de resolver, como la carga de la página de contacto que está fallando la evaluación de los javascripts que validan el formulario.
Cosas que necesitas considerar:
- Crear un fichero ajax.js que contiene todas las funciones necesarias
- Incluir tanto mootools.js y ajax.js en el head de la página index.php
- Colocar DIV de precarga donde desees dentro del index.php.
- Colocar un DIV con un ID <div id="ajaxcontainer"> donde se encuentra el mainbody de nuestra plantilla, que es donde se cargan el contenido de los artículos, y coloca el mainbody actual dentro de esta división, para que cuando se haga una solicitud de página, la página se cargará en este DIV.
- Incluir un código javascript que cambiará todos los enlaces dentro de la página por algo así: javascript:ajaxload(‘index2.php?option=com_frontpa ge&Itemid=1′)
El DIV ajaxcontainer deberá ser parecido a esto:
1: <div id="ajaxcontainer">
2: <div id="main_content">
3: <?php mosMainBody(); ?>
4: </div>
5: </div>
y la función ajaxlink antes de cerrar la etiqueta body, la cual sustituirá todos los enlaces para que llamen a la función AJAX, en vez de al link que recargaría la página, es un pequeño parche pero funciona, otra opción sería cambiar todos nuestro enlaces desde la administración de Joomla, pero este proceso puede llegar a ser muy tedioso:
1: <!-- Start of AjaxLink function for changing all the links of page -->
2: <script type="text/javascript">
3: <!--
4: function ajaxLinks () {
5: for (var i=0;i < document.links.length;i++) {
6: if(document.links[i].href.substr(0,<?php echo strlen($mosConfig_live_site)?>)=="<?php echo $mosConfig_live_site ?>"||document.links[i].href.substr(0,9)=="index.php:"){
7: document.links[i].href = "javascript:ajaxload('index2.php"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"')";
8: }}}
9: ajaxLinks();
10: -->
11: </script>
12: <!-- End of AjaxLink function -->
13: </body>
14: </html>
El ajax.js
1: //This function is for switching beetwin two condtions of preloader division that you need to
2: //place in your page here the division name is: loading
3: function showLoad(show){
4: if(show){
5: $('loading').style.display="inline";
6: }else{
7: $('loading').style.display="none";
8: }
9: };
10: //This is ajax function that you can use inside your page, the only parameter that
11: //i defined for this function is url, all the content of loaded url would be placed inside
12: //a division that is ajaxconatiner here. As you see evalscript is true and that is the only
13: //way that any Javascript can be executedinside the loaded content
14:
15: function ajaxload(url){
16: //call showload function to show preloader
17: window.scrollTo(0,100);
18: document.getElementById('ajaxcontainer').innerHTML='';
19: showLoad(true);
20: try
21: {
22: new Ajax(url, {
23: //loaded content would be updated inside this division
24: update: 'ajaxcontainer',
25: //this should be true if you want to execute JS inside the loaded content
26: evalScripts: true,
27: onComplete:function(r)
28: {
29: //It sets the type property of the script tag,
30: //then puts the script body inside of the element (between the opening and closing script tags),
31: //then injects into the head of the page
32: var script = new Element('script')
33: script.setProperty('type','text/javascript');
34: try
35: {
36: script.setHTML(r);
37: }
38: catch(e)
39: {
40: }
41: },
42: onSuccess:function(){
43: try
44: {
45: //This would disappear preloader div
46: showLoad(false);
47: //The ajaxlinks function is being called here,I defined this function in footer
48: ajaxLinks();
49: }
50: catch(e)
51: {
52: }
53: }
54: }).request();
55: }
56: catch(e)
57: {
58: }
59: }
60:
Para todo esto me basé en la plantilla:
http://www.web2coder.com/downloads/web2coder-Mittwoch.zip
Podéis ver una demostración en www.openti.net , aunque faltan algunos detallitos.
Un Saludo.
