Contenido

Segundo contacto con Ajax

5 Jun

+ 14

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]

  • Un ‘Hello World!’ para ver un ejemplo ya seria la leche 😉

  • No me ha dado tiempo ha acabar el que usa prototype, esta noche lo pondré.

  • Podrias poner una ejemplo pero que envia con el metodo post pero a la misma pagina por favor………..

  • Sarah, es que no te entiendo.

    ¿A que te refieres con la misma página?

    Ajax interactua con el servidor la misma página debería tener en cuenta que puedas acceder a ella mediante POST.

    Perdona que no me explique mejor, pero es que no entiendo tu pregunta. Quizas tu lo veas muy claro, pero me has pillado fuera de juego y no se exactamente de lo que hablas.

  • Hola aNieto2k

    Disculpa las molestias ya pude corregir el error que tenia en la funcion
    sendQuerystring, yo omiti una linea pero ya la envio a la misma pagina y con el metodo post.

    Pero quisiera saber si hay alguna manera de enviar las variables por el mismo metodo post sin tener que especificarles en http.send(), lo que sucede es que tengo formularios que son muy grandes y son varias paginas y es un poquito tedioso estar poniendo todas las variables en http.send()

    Otra pregunta ¿Por qué no funcionan los códigos de _JavaScript en las paginas que se carga en el div, solo funcionan cuando llamo funciones que esta definidas en otros script y esos script los mando a llamar de en la pagina de inicio en la que tengo el div?¿Como puedo hace para que me reconosca los script que estan en las pagianas que se carga en el div, es que tengo paginas dimanamicas donde uso una mezcla de javascrip con php?

    Disculpa las molestias, pero soy inexperta con Ajax….
    De antemano muchas gracias por tu ayuda…….

  • arriba se menciona q la URL debe de ser de la forma:

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

    yo estoy batallando por q no me acepta una IP en vez del servidor. mi pregunta es,

    Puedo poner una URL en la cual el server sea una IP??

    e.g.

    http://10.201.13.193/MiSitio/webservice.asmx

  • Buenas Adbon, la IP que estás poniendo es la de tu propio servidor??

    Ajax no permite conexiones remotas entre servidores, quizas sea ese tu problema.

    Un saludo

  • FAbuloso, pero…

    Cuando dices de poner los estados:

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

    Donde lo tenemos que poner i como?

    GRacias

  • #8 Si te fijas recojemos el estado mediante readyState.


    if (oResp.readyState == 4 && oResp.status == 200) {
    ...

  • Es que a mi alli me da un error:

    oResp has no properties

    I me dice la linea que dices tu. Por eso preguntaba lo de los estados, no se que sea el problema

  • no funciona, da problemas con la respuesta.

  • Yo he utilizado estas funciones por separado sin ninguna dificultad, pero estoy intentando utilizar las dos funciones en una misma página, me está dando muchos errores y ya no se si son compatibles

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.