Bueno la primer pregunta es para que me sirve ajax, o por que utilizarlo.
Bueno más que explicar que es ajax vamos a dar unos pequeños ejemplos para que lo entiendan.
Ejemplo 1, supongamos que queremos en una página de registro común, que se vayan validando los datos.
Como se hacía antes, se dejaba ingresar todos los datos, y luego cuando se confirmaba se verificaba todo, entonces si había algún error se le decía al usuario que es lo que estaba mal.
Como se hace con ajax, cuando el usuario digita por ejemplo el nombre de usuario, al tabular, ya le podemos decir si hay otro con ese nombre y que elija otro, cuando digita el mail, al tabular ya le podemos decir si es válido o no, etc, entonces al confirmar ya sabemos que está todo bien ingresado.
Ejemplo 2, el clásico campo país, el cual se carga de la base de datos, y son miles, entonces vamos a suponer que tenemos una consulta en la que se filtra por el país.
Como se hacía antes, bueno son varias las opciones, una es que se deje ingresar cualquier cosa y luego al hacer la consulta en la base de datos hacemos un like, la otra es poner un combo el cual sería enorme
Como se puede hacer ahora, en el texto donde se digita el pais, por cada una de las letras que el usuario va a digitar se va a buscar todos los países que contenga esas letras, ejemplo si digito a, muestro argentina, Argelia, Alemania, luego digito r (ar en total) muestro argentina, Argelia, y así sucesivamente.
Entonces, un poco más técnico, lo que hace ajax, es sin tener que refrescar la pagina, ir al servidor y obtener los datos de la base de datos, entonces esto lo que hace es que los usuarios vean mayor interactividad de la pagina.
Y algo que el usuario no ve, pero que hace ajax es que nos obliga un poco a los programadores a modularizar las cosas y sobre todo a separar un poco la interface de la lógica y de la persistencia.
Ahora vamos a empezar con la parte técnica.
Primero que nada para crear la instancia de ajax, tenemos que pasarle varios parámetros, entonces para facilitarnos la cosa vamos a crear una función javascript para hacer esto.
Entonces en un js, yo lo llamo libreria.js pero se puede llamar como sea, tenemos que crear una función con este código
function peticionAJAX(metodo,parametros,oncomplete){
this.parameters=parametros;
this.method=metodo;
this.onComplete=oncomplete;
}
Esta función no tiene nada complicado sino solo se cargan los parámetros al objeto peticionAJAX
Vamos a suponer un ejemplo en el que lo que queremos obtener son los usuarios de un determinado país. Entonces vamos a crear una función que nos va a escribir el html de la tabla donde se van a tirar los usuarios.
function BuscoUsuarios(pais){
miPeticion=new peticionAJAX('get','pais='+pais,FinBuscarUsuarios);
url="php/getUsuarios.php";
aRequest=new Ajax.Request(url,miPeticion);
}
Vamos a detallar cada renglón.
miPeticion=new peticionAJAX('get','pais='+pais,FinBuscarUsuarios);
aca lo que se esta haciendo es creando el objeto miPeticion, que es la función que creamos antes, con los siguientes parámetros, get, que es la forma que se va a obtener los parámetros el php, las opciones son 2, get o post, la regla en general es si se va a modificar datos en la base de datos deben pasarse los parámetros por post, si no se modifican es get.
el segundo parámetro son los parámetros que va a recibir nuestro php
luego el ultimo parámetro es el nombre de la función que se llamara cuando nos conteste el php con algún dato.
url="php/getUsuarios.php";
aca solo le decimos donde este el php, yo para ser prolijo tengo una carpeta php para los archivos php
aRequest=new Ajax.Request(url,miPeticion);
aca lo que hacemos es creamos la instancia Request de ajax, que es lo que quiere decir esto, en definitiva aca es donde se ejecuta el ajax.
bueno segun vemos ahora tenemos que tener un función llamada FinBuscarUsuarios, y un php que llamado getUsuarios.php
la función FinBuscarusuarios, es la que va a recibir el vector que nos devuelva el php y va a pintar en un html.
Empecemos por decir que tiene nuestro html ,bueno lo unico que nos interesa que tenga es una div que es en la que vamos a tirar el html, seria algo asi
Vamos a hablar un poco del php, y como dijimos en el encabezado, vamos a usar JSON, entonces el php deberia de ser algo asi
require_once('JSON.php');
include('conexion.php');
$json = new Services_JSON();
$b = Conexion();
$pais=$_GET["pais"];
$q="select * from usuarios where UsuPais= '$pais' ";
$rs=mysql_query($q);
$unCol=mysql_fetch_array($rs);
$i=0;
while($unCol != null){
$elCol=array('usu'=>$unCol["UsuCod"] );
$junCol=$json->encode($elCol);
$vec[$i++]=$junCol;
$unCol=mysql_fetch_array($rs);
}
if($i!=0){
$retorno=$json->encode($vec);
}else{
$retorno="NO_HAY_DATOS";
}
echo($retorno);
?>
Vamos a explicar un poco cada uno de los renglones empezando por la inclusión de JSON
En el primer renglón, como dije, estamos incluyendo la clase php JSON, les aconsejo bajarse la últimos (igual que prototype), mas adelante explicaremos más en detalle por que usar JSON.
En el segundo renglón, estamos incluyendo el archivo php para la conexión a al base de datos.
Luego creamos dos variables una de json y la otra de nuestra conexión
En el siguiente renglón es donde obtenemos el parámetro que nos envió la función, en nuestro caso es el país.
Lugo en los siguientes 3 renglones vamos a definir la consulta sql, y a posicionarnos en el primer registro.
Luego definimos la variable i que es la que va a recorrer el vector para el resultado, y empezamos a recorrer los datos que nos devolvió la base de datos.
Dentro del while lo que hacemos es primero obtener el dato concreto que necesito y creamos un vector, luego (aca empieza un poco de JSON) encodeamos este vector, y lo ponemos nuevamente en un vector, entonces vamos a tener un vector en el que va a tener todas las tuplas que obtuvimos de la base de datos, y en cada casillero del vetor, tendremos las tuplas que queramos, en nuestro cas la tupla consta de un solo registro, el usuario, pero si quisiéramos además del usuario, poner el país, entonces tendremos 2 datos.
Y al final lo que hacemos es si entramos por lo menos una vez en el while (if i!=0) entonces encodeamos nuevamente el vector entero que vamos a devolver
Con esto tenemos terminado nuestro php, que es el que se va a conectar con la base de datos.
Bueno entonces ahora lo que nos falta es la función que se llama cuando la consulta devuelve algún dato, es la función que pusimos en la que ya definimos, entonces sería algo así
function FinBuscarUsuarios(aRequest){
obj=$("mensaje")
jUnaCol=aRequest.responseText;
if ((jUnaCol == 'NO_HAY_DATOS') || (jUnaCol == '')){
obj.innerHTML = "Ocurrio un error, por favor intente de nuevo";
} else {
obj=$("contenedor");
var vec = jUnaCol.parseJSON();
...
}
}
Bueno explicaremos renglón a renglón que es cada cosa.
Primero que nada, si hay algún problema con la base de datos por ejemplo, entonces no llegamos a obtener ningún dato, en la pantalla del usuario le daremos un mensaje de error (ya les explicare como), entonces debemos de tener un div para desplegarlo (también ya les explicare).
El segundo renglón es el más importante, y acá es donde trabaja ajax, en este renglón lo que se hace es cuando el objeto php devuelve algo este renglón es el que se entera.
Después tenemos un if en el que si el resultado del php es que no encontró nada o si esta vacio entonces, se desplego un mensaje que es el siguiente renglón
Ahora si nos devolvió algo el php, entonces ahora debemos de escribir el html para desplegar en la pagina, y esto también lo tiraremos en una div (todo este código no lo pongo porque puede ser cualquier cosa).
En la siguiente línea debemos de des-encodear (no debe de existir la palabra, pero se entiende lo que quiero decir) el vector que encodemaos en el php (acá se utiliza JSON que es el que se encarga de enviar el vector de un lado al otro y optimizar esto).
Como les dije con esto ya estaría todo pronto, pero falta la parte que ve el usuario, hasta ahora nada de lo que pusimos tiene nada de interface, es decir no lo va a ver nunca el usuario, entonces te explicare brevemente que tienes que usar en tu html para que el usuario vea algo.
Como te mostré arriba con obj=$("mensaje") (esto del $ es algo de prototype, si no usaras prototype deberias de poner getElementByID) y obj=$("contenedor"), que son 2 div, es donde el usuario ve algo.
Entonces en el html tu lo único que tienes que poner es lo siguiente (o algo parecido, depende si queres poner scrolls, en distintos nivesles, etc. para mas datos investigar div en html)
Cuando en la función ponemos obj.innerHTML = " algun texto ", esto lo que hace es escribir directamente en la div, y el usuario ve lo que escribiste dentro de las comillas, pero si en vez de texto pelado, pones texto en el que tenga algo html, por ejemplo "hola
como
te va", esto se verá como un html y serán 3 renglones (espero ser claro, si no lo soy pruébalo).
Entonces la parte mas importante de todas es escribir bien el código html en la div contenedor, que ahi es donde mostraremos al usuario todos los usuarios que sean de un pais indicado.
Lo que nos falta para el html es incluir las librerías que utilizamos esto sería algo así
o cualquier otra que utlices
Con esto (obviamente es un ejemplo muy sencillo) ya estamos usando ajax y para el usuario va a ser mucho mas interactivo y no dependiendo tanto la conexión y el refresh de la pagina.
Para mí lo mas impórtate (del punto de vista del desarrollador) es que separamos la persistencia, la interfaz de usuario, y la logica, haciendo software mucho mas de calidad.
Un breve resumen para que veas que toda la chachara de arriba no es nada muy complicado.
1 - tener el php que nos devuelve los datos de la base de datos.
2 - tener las funciones en algún js que se ejecuten y cuando le devuelvan los datos pinten el html
3 - tener un html limpio (y es lo mas lindo de esto) en el que se mostraran los datos.
A continuación copiare las funciones y el php que he puesto arriba
function peticionAJAX(metodo,parametros,oncomplete){
this.parameters=parametros;
this.method=metodo;
this.onComplete=oncomplete;
}
function BuscoUsuarios(pais){
miPeticion=new peticionAJAX('get','pais='+pais,FinBuscarUsuarios);
url="php/getUsuarios.php";
aRequest=new Ajax.Request(url,miPeticion);
}
function FinBuscarUsuarios(aRequest){
obj=$("mensaje")
jUnaCol=aRequest.responseText;
if ((jUnaCol == 'NO_HAY_DATOS') || (jUnaCol == '')){
obj.innerHTML = "Ocurrio un error, por favor intente de nuevo";
} else {
obj=$("contenedor");
var vec = jUnaCol.parseJSON();
...
}
}
require_once('JSON.php');
include('conexion.php');
$json = new Services_JSON();
$b = Conexion();
$pais=$_GET["pais"];
$q="select * from usuarios where UsuPais= '$pais' ";
$rs=mysql_query($q);
$unCol=mysql_fetch_array($rs);
$i=0;
while($unCol != null){
$elCol=array('usu'=>$unCol["UsuCod"] );
$junCol=$json->encode($elCol);
$vec[$i++]=$junCol;
$unCol=mysql_fetch_array($rs);
}
if($i!=0){
$retorno=$json->encode($vec);
}else{
$retorno="NO_HAY_DATOS";
}
echo($retorno);
?>
No hay comentarios:
Publicar un comentario