Cosas que se pueden y no en Ajax

En este articulo veremos que se puede hacer y que no dentro del entorno de Ajax, como les dije en otros posts, para algunas cosas es muy útil pero en otras resulta incomodo.
Vamos a ver algunos ejemplos:

1°) No se puede ejecutar javascript en el archivo remoto que se llama con Ajax

Como dije, si uds. necesitan que al final del script del servidor se ejecute algun comando de Javascript este fallara, por ejemplo el comando location.href.
Pero se puede solucionar de otra forma, lo que si se puede es llamar funciones de javascript que se declaren en la pagina desde donde se invoca a la funcion Ajax. Estas pueden ser llamadas atraves de eventos de HTML.

2°) Formularios

Los formularios tienen un inconveniente si se hacen atraves de Ajax, se debe enviar toda la data con la funcion y dependiendo la cantidad a veces puede no ser enviada en su totalidad. Otra eventualidad que surge es a la hora de cargar archivos (Sonido, video, fotos).
Y aparte, se complicaria mucho mas el envio de informacion y manipulacion de la data con elementos extras como cookies, campos ocultos, etc. Por eso yo no recomiendo que todo lo que sea formulario y/o cargas de datos.

3°) Una cosa muy buena que se puede hacer es crear funciones para enviar data a la funcion de Ajax, por ejemplo:

<script language="javascript">
function Prueba(A,B){
     runAjax('Layer1','ajax.php?id=prueba&valor=' + A + '&valor2=' + B);
}
</script>

Como veran en este caso, se podria declarar una funcion que recibe 2 valores y despues los envia para su procesamiento via Ajax al server.
Pudiendo mostrar un resultado X en la pantalla.

Por ahora no recuerdo nada mas que les pueda ayudar pero estos son algunso tips de lo que se pueden encontrar y en algunos casos como solucionarlo.

Ajax un poco mas a fondo...

Bienvenidos a un nuevo post, hoy ahondaremos un poco mas en Ajax, veremos una breve explicación, como lo utilizo habitualmente y para que es una buena opcion y para que no.
Bueno, empecemos. Como dije en la Introduccion de Ajax, basicamente se hace un llamado atraves de Javascript a un script que se ejecuta en un servidor (P.E. PHP) y que el resultado puede ser volcado en un Div, Layer, Celda de tabla, etc. En fin todo aquello que se pueda marcar con un ID.
Sin mas preambulo, vamos a ver como lo hago yo habitualmente:

1°) La funcion de Javascript

function runAjax(objeto,server){
                var xmlHttp;
                xmlHttp=null;

               // Aca se detecta si debe utilizar el XML de la mayoria de los navegadores o el del IE viejo

               if (window.XMLHttpRequest){
                                xmlHttp=new XMLHttpRequest();
                        }
                else if (window.ActiveXObject){
                                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                // Aca es donde se efectua la magia!
                if (xmlHttp!=null){
                        var obj=document.getElementById(objeto);
                        xmlHttp.open("GET",server);
                        xmlHttp.onreadystatechange=function(){
                                                if (xmlHttp.readyState==4 && xmlHttp.status==200) {
                                                                obj.innerHTML=xmlHttp.responseText;
                                                        }
                                }
                        }
                else
                        {
                                alert("Este Browser no soporta AJAX");
                        }
                // Aca se anula el objeto para volverlo a ejecutar y liberar memoria.
                xmlHttp.send(null);
        }

Como veran la funcion es bastante simple, cuando se la llama desde Javascript deberia ser algo asi:

 <script language="Javascript">
   runAjax('< el id del contenedor >','< la pagina que se ejecuta en el server y trae el resultado >');
</script>

Esto recomiendo hacerlo al final de la pagina que esta del lado del cliente y llamar todas instancias que sean necesarias.

2°) Estructura basica de como utilizarlo:

<html>
....
<script language="javscript">
function runAjax(objeto,server){
    < aca va la funcion antes mostrada >
}
</script>
....
<div id="Layer1" style="< aca usan los parametros que deseen >"></div>
....
<script language="javascipt">
    runAjax('Layer1','ajax.php?id=prueba');
</script>
</html>

Como veran, las paginas las hacen como siempre pero les convendria declarar la funcion lo antes posible en la pagina, luego acomodan el receptor de la funcion de Ajax en donde mas les plazca o necesiten y por el ultimo en este ejemplo de estructura, vuelven a crear una instancia de Javascript y ahi si llaman a la funcion antes declarada.
Porque es asi, porque me ha sucedido que si llama antes no encuentra el contenedor y si declaran despues la funcion (en vez del principio) a veces el Ajax falla (no es siempre pero depende de la velocidad del enlace y del navegador).

3°) Invocando a Ajax desde un enlace:

Ahora vamos a ver otro forma de invocar una funcion de Ajax, en las paginas puede ser atraves de un link o un boton. La unica forma es atraves del evento "onclick" y la forma es asi:

Por enlace:
<a href="" onclick="runAjax('Layer1','ajax.php?id=prueba');return false">Prueba</a>

Por boton:
<button onclick="runAjax('Layer1','ajax.php?id=prueba');return false">Prueba</button>

Como veran se deberia tener una funcion runAjax en Javascript, y un Layer1 para visualizarlo, asi como les mostre en el segundo caso. Y lo otro que es fundamental es que despues de llamar a la funcion de Ajax se debe ejecutar un return false, esto es debido a que evita que se recargue la pagina y se pierda la data del Ajax.
El return false es utilizado para los eventos de interaccion del usuario con la pagina, en los casos que se lo invoca desde la pagina como en el segundo caso, no es necesaario.

4|) Ajax unido a un evento de tiempo:

Ajax tambien se puede utilizar con eventos de tiempo para que se autoejecute cada X cantidad de tiempo o despues de cierto tiempo, por ejemplo con la instruccion setInterval o setTimeout.
Por ejemplo, tienes una lista de entradas de un blog pero te gustaria que se actualice solo cada 10 minutos para que en el caso de una nueva entrada aparezca automaticamente, esto se podria hacer con un evento setInterval, un simple ejemplo:

<script language="javascript">
       setInterval(function(){
                  runAjax('Layer1','ajax.php?id=prueba');
           }, 300000);
</script>


Y esto se deberia poner al final de la pagina para que se autoejecute en cada intervalo establecido.

En fin, como veran esto es todo el secreto que tiene Ajax. Hay mas metodos y mas instancias que se pueden llegar a utilizar pero lo basico como para que funcione cualquier tipo de pagina, ya sea de listado, de entradas, de catalogo, etc. Lo ideal con esto es evitar que se refresque la pagina con cada accion que tomamos y le da ilusion de que es algo completamente dinamico.
Es una excelente opcion para evitar el uso de Flash, y esto con HTML5 y las acciones y eventos que se pueden utilizar en celulares permiten una flexibilidad unica.
Espero que les sea util y proximamente subire algunas otras acciones que he encontrado y utilizado para espero a partir de Abril empezar a estudiar C y C++ para despues ir subiendo a medida que vaya estudiando.
Gracias por haber llegado a esta ultima linea y espero que te sea util como lo fue en su momento para mi.

Introduccion a Ajax

Hola, a todos. Este breve articulo es para hacer una leve descripción de, ¿el lenguaje de programación?, Ajax. Basicamente es una fusion entre Javascript y PHP, donde permite ejecutar acciones en el server y que se vean representadas en el cliente como si se ejecutaran localmente, un ejemplo es gmail y la mayoria de las aplicaciones web de google.
En una explicacion muy basica, pero muy basica, cuando se llama atraves de una funcion de javascript a un archivo de PHP y el resultado se puede mostrar en un layer, en una celda de una tabla, en fin todo aquello que permita mostrar el resultado en una pagina web.
De todos los metodos que busque, encontre uno que fue el mas lindo, bonito y barato porque te permite efectuar lo que describi anteriormente a traves de una funcion de javascript que puede ser llamada varias veces.
En fin, tiene sus pros y sus contras, lo mas "pro" para mostrar data "dinamicamente" en una pagina sin tener que andar refrescando la pagina entera y se actualiza lo que se puede especificar, la "contra" es para algunos tipos de paginas, como por ejemplo formularios, puede resultar poco practico o tener que recargar de informacion en las URLs o cookies.
A medida que pueda ire agregando mas informacion para que se vayan dando cuenta que en realidad es una pavada atomica y se pueden hacer cosas muy interesantes.