Ajax con y sin Prototype (Parte I)

Prototype es una de las librerías de Javascript mas usadas actualmente para realizar todo tipo de operaciones en la web. Desde las utilidades cross-browsing hasta efectos, pasando por Scriptaculous, este framework nos ayudará a desarrollar nuestro site sin quebraderos de cabeza producidos por los distintos navegadores.

Una de las operaciones que podemos realizar fácilmente con Prototype son las peticiones AJAX. En este artículo veremos como realizarlas creando nosotros el objeto XMLHTTP o bien utilizando los métodos que Prototype pone a nuestra disposición.

AJAX Clásico

Para utilizar AJAX en nuestra web debemos comprender el concepto de este término. Como bien sabemos se trata de una petición al servidor realizada de forma asíncrona que tendrá como resultado una respuesta, ya sean datos XML, objetos JSON o una respuesta del servidor. Una vez tenemos nuestra respuesta utilizamos Javascript para mostrarla en tiempo real en nuestra página sin necesidad de recargarla, manipulando el DOM.

Al trabajar con AJAX utilizamos un objeto creado por Microsoft en 2001 llamado XMLHTTP. Este objeto ha de crearse de diferentes formas analizando el explorador que está haciendo uso en ese momento. Un objeto creado para Internet Explorer no funcionará en un navegador Mozilla, con lo cual es tarea del programador identificar que navegador es e instanciar el objeto correcto.

Lo primero será crear el objeto XMLHTTP, para Internet Explorer debemos crear un objeto ActiveX. Como se han ido actualizando las versiones debemos probar cual es la correcta al crearse. Desgraciadamente esto debemos hacerlo con un método de ensayo y error. Para el resto de navegadores es mucho mas fácil crearlo. El siguiente código nos muestra a continuación como crear el objeto para diferentes navegadores.

function crearXMLHTTP()
        {
                if(typeof XMLHTTPRequest !="undefined"){
                        return new XMLHTTPRequest();
                }else if (window.ActiveXObjetc){
                        var versiones=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
                        "MSXML2.XMLHttp","Microsoft.XMLHttp"];

                        var i=0;

                        for(i=0;i<versiones.length; i++) {
                                try{
                                        var oXMLHttp= new ActiveXObject(version[i]);
                                        return oXMLHttp;
                                }catch(oError){
                                        //se produjo un fallo y se procede a crear el siguiente
                                        //aqui introducimos nuestro código para procesar errores
                                }
                        }
                }
                throw new Error("El objeto no pudo crearse.");
        }

Ya hemos creado la función que nos devolverá un objeto XMLHTTP listo para ser utilizado. A continuación veremos como realizar una petición a un archivo PHP que nos devolverá un nombre.

Para realizar el proceso primero llamaremos al método open() que inicializará el objeto. Debe introducirse los argumentos para el tipo de petición (get o post), la url a la que hacemos la petición, en este caso la dirección de nuestro archivo php, y por último un valor booleano que indica que se hace la petición de forma asíncrona o no.

Si enviamos la petición de forma asíncrona Javascript no esperará hasta que haya terminado la ejecución de la operación, con lo cual debemos crear un manipulador de eventos. Por otro lado si creamos la petición de forma sincrona Javascript esperará a terminar la operación antes de continuar procesando el resto del código.

Creamos nuestro objeto y lo iniciamos:

var oXMLHttp=crearXMLHTTP();
        oXMLHttp.open("get", "test.php", true);

        oXMLHttp.onreadystatechange=function(){
                if(oXMLHttp.readystate==4){
                        alert("He obtenido respuesta");
                }
        }

        oXMLHttp.send();

Podemos observar que despues de iniciar nuestro objeto con open hemos utilizado un manipulador de eventos. Al cambiar el estado del objeto (readystate) se genera un evento onreadystatechange. Utilizaremos dicho evento para comprobar cual es el estado del objeto. Nuestro objeto puede tener los siguientes estados:

0. El objeto ha sido creado pero no se ha llamado al método open.
1. Se ha llamado a open pero la petición aun no se ha procesado.
2. La petición se ha enviado.
3. Se ha recibido una respuesta parcial.
4. Se ha recibido la respuesta completamente.

Por último llamamos al método send para enviar la petición. Pero también nos interesa saber si el servidor ha procesado correctamente la petición y que resultado ha obtenido. Para ello contamos con el atributo status. Esta propiedad contiene la respuesta del servidor, 200 si se ha realizado con éxito, 404 si no se ha encontrado el recurso, etc.

También combinaremos esto con la respuesta que nos envía el servidor, los datos en si mismo. Como hemos comentado antes lo normal será recibir un XML o un JSON pero para este ejemplo utilizaremos una cadena normal de texto. La respuesta estará contenida en el atributo responseText.

var oXMLHttp=crearXMLHTTP();
        oXMLHttp.open("get", "test.php", true);

        oXMLHttp.onreadystatechange=function(){
                if(oXMLHttp.readystate==4){
                        if(oXMLHttp.status==200){
                                alert(oXMLHttp.responseText); // Imprimimos la respuesta enviado por el script php
                        }

                        if(oXMLHttp.status=404){
                                alert("No se ha encontrado el recurso");
                        }
                }
        }

        oXMLHttp.send();

Nuestro script php será muy simple:

<?php

        echo("Respuesta desde PHP");

?>

Finalmente al ejecutar el código obtendremos “Respuesta desde PHP” en pantalla de forma asíncrona. Ya es tarea nuestra cuando realizar la petición y como procesar la respuesta para sacarle partido a este conjunto de tecnologías que forma AJAX.

Es posible pasar argumentos a nuestro script de PHP por medio de valores en la URL en el caso de GET, o bien formateando la cadena en el caso de POST. No los estudiaremos en este artículo ya que en su segunda parte, usando prototype, podremos usar AJAX de una manera mucho mas rápida y cómoda.

Etiquetas: , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos requeridos, están marcados *

*


*