aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace tiempo ya que hice aquel post en que pretendía hacer llegar a más gente la manera facil de usar Ajax, y despues de haber leido este otro post he pensado que quizas deba actualizar con otro post los nuevos conocimientos que he adquirido en estos 5 meses. Asi que vamos a ver como empezar a usar Ajax de forma facil y rápida.

Vamos a hacerlo de dos formas. La primera que es la más optima sería definir nosotros las funciones necesarias para crear el objeto xmlhttprequest y la otra será usando prototype, que se encarga de generar el objeto ya sin nosotros tener que definir más que que tipo de objeto y que llamadas y datos ha de pasar.

¿Que necesitamos?

1. Tiempo y ganas 😀
2. Un editor (a ser posible con colorines, es más facil de ver el código)

1) Generando las funciones.

Vamos a hacer una funcion chorra que nos va a crear el objeto xmlhttprequest.

Una forma rápida y clara es la siguiente, además compatible con:

• Safari 1.2 +
• Internet Explorer 5.0 +
• Firefox 0.7 +, Camino,…
• Opera 7.6+ (con alguna limitación).

function xmlhttp() {
var xmlhttp;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
else return xmlhttp;
}

De esta manera probamos a generar el objeto en todos los navegadores, devolviendonos el objeto adecuado para nuestro caso. De tal forma que podríamos crear el objeto de la siguiente forma.

var oAjax = xmlhttp();

Ahora tenemos un objeto creado ubicado en la variable oAjax, y atraves de ella podremos usar todas las funcionalidades del objeto xmlhttprequest.

Ahora solo necesitaremos dos funciones, una enviar los datos y otra para la recepción de los datos.

Envio de datos

Para enviar los datos vamos a usar una función que recibirá 2 parametros y se encargará de enviar las variables a la URL definida anteriormente, del modo desado (POST,GET).

function enviaDatos(method,vars)
{
if (method == "GET")
{
oAjax.open(method, URL+"?"+vars, true);
vars = "";
}
else
{
oAjax.open(method, URL, true);
oAjax.setRequestHeader("Method", "POST "+URL+" HTTP/1.1");
oAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
oAjax.onreadystatechange = recibeDatos;
oAjax.send(null);
}

La variable URL debe estar definida anteriormente de la siguente forma.

var URL = "http://tuservidor.com/pagina_de_consulta.xxx";

De esta forma estamos definiendo que dependiendo de un método, y una url, damos unas variables y lanzamos la llamada apropiada. Una vez terminado en cuanto cambie el estado del objeto este mismo nos redireccionará a recibeDatos, que la especificaremos a continuación.

Recepcion de Datos

function recibeDatos(oResp) {
if (oResp.readyState == 4 && oResp.status == 200) {
alert("El resultado es : " + oResp.responseText);
} else {
alert("Aun está cargando");
}
}

Esta función únicamente comprueba el estado del objeto y cuando está listo lanza el mensaje de OK, en caso contrarío irá mostrando alerts de cargando hasta que reciba al respuesta (muy molesto :D).

Para entender un poco más la función hay que definir que los estados posibles del objeto xmlhttprequest son los siguientes.

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

Y el status se refiere a los códigos de HTML (404 «Not Found» ..:) en caso de ser 200 la respuesta significaría que la carga ha resultado correcta. Una vez terminada la carga y despues de que todo haya ido bien, el objeto nos devuelve dos objetos.

Uno es un string alojado dentro del atributo responseText del objeto xmlhttprequest y el otro esta estructura DOM del resultado de la consulta dentro del atributo responseXML, dependiendo del uso que queramos darle cojeremos uno u otro.

De esta forma, basta con inicializar la variable oAjax y realizar la llamada pertinene con el método y las variables necesarias para obtener resultados, alojándola donde creamos conveniente, siempre teniendo en cuenta que el usuario ha de lanzar dicha función.

var oAjax = xmlhttp();

enviaDatos("POST","var1=hola&var2" + variable);

[Descargar] [Ejemplo]

2) Usando prototype

¿Por que usando prototype?  Principalmente por que últimamente se estan usando muchos efectos en nuestras páginas y el 80% (por no decir más) usan esta librería para generar sus efectos. Y ya que lo tenemos importado para los efectos ¿para que meter más código que hace lo mismo?

Manos a la obra

Vamos a usar la clase Ajax.Request para hacer una petición muy básica, puedes usar muchas otras funcionalidades de la clase, para obtener resultados más complejos.

La funcíon queda en algo tan facil como esto.

Envio de datos

function enviaDatos(myMethod,vars) {
var myAjax = new Ajax.Request(
URL,
{
method: myMethod,
parameters: vars,
onComplete: showResponse
}
);
}

Como podeis ver tambien necesitamos tener definida la URL de destino, que haremos igual que en el caso anterior. Esta función requiere dos parametros myMethod y vars, que como sus nombre indican son simplemente eso, el metodo a usar (POST o GET) y las variables a enviar. En onComplete indicamos el nombre de la función que llamaremos cuando el proceso se haya completado.

Recepcion de datos

function showResponse(oResp) {
$('result').value = oResp.responseText;
}

Con esta función meteremos en el elemento con id result el resultado obtenido. Para entender más sobre la función $() echalé un vistazo a esto.

Espero haber sido todo lo claro que quería ser, y que os sirva de algo. Si encontrais algun error o algo debería estar hecho de otra forma, por favor informarme que yo tambien querio aprender.

[Descargar]