lixcial Desarrollando vida en la web
  • Tutorial de AJAX para principiantes

    scissors

    AJAX de la teoría a la práctica

    Este es un mini-tutorial que explica con pasos sencillos, cómo manejar nuestros eventos con AJAX en una página web2.0.

    Cargando una página html en un contenedor <div> sin recargar la página.

    Necesitas:

    · Un servidor web · Un navegador · Un editor de texto Ahora si, ya que sabemos qué mismo es AJAX(click aquí si no sabes), podemos ponerlo en práctica en un ejemplo sencillo, fíjense en el código de la página web que tenemos a continuación:

    ejemplo.html

    <html>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <title>lixcial</title>

    <script language=”javascript” src=”ajax.js” type=”text/javascript”></script>

    </head>

    <body>

    <h2>Ejemplo AJAX</h2>

    <a href=”#” onclick=”requerir(‘feliz.html’)”>feliz</a>

    <div id=”espacio”></div>

    </body>

    </html>

    Noten que en el head incluimos un archivo que contiene código JavaScript que llamaremos “ajax.js”, es en este archivo donde se encuentra la función “requerir” a la cual hacemos referencia en el “onclick” del <a href=”#”>. Ojo que la función recibe una URL, Esta URL es la página que deseamos que cargue nuestro requerimiento AJAX, puede ser también un manejador o algo que genere una respuesta de texto (XML por ejemplo). Las URL que le enviamos en nuestro caso es “feliz.html”, una página web normal.

    feliz.html

    <html>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <title>lixcial</title>

    </head>

    <body> 🙂 </body>

    </html>

    Ahora si, vamos al AJAX:

    ajax.js

    var http_request = false;

    function requerir(url) {

    http_request = false;

    if (window.XMLHttpRequest) {

    http_request = new XMLHttpRequest();

    if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);

    } else if (window.ActiveXObject) {

    try {

    http_request = new ActiveXObject(“Msxml2.XMLHTTP”);

    } catch (e) {

    try { http_request = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}

    }

    }

    if (!http_request) {

    alert(‘Imposible crear una instancia XMLHTTP’);

    return false;

    }

    http_request.onreadystatechange = callback;

    http_request.open(‘GET’, url, true);

    http_request.send(null);

    }

    function callback() {

    var espa;

    if (http_request.readyState == 4) {

    if (http_request.status == 200) {

    espa=document.getElementById(“espacio”);

    espa.innerHTML=http_request.responseText;

    }else alert(‘No se pudo completar el requerimiento’);

    }

    }

    Explicación del código de ajax.js

    Para poder hacer el requerimiento AJAX, es necesario instanciar un objeto que nos provea este servicio, pero antes pregunta si el requerimiento viene de Internet Explorer (window.ActiveXObject), o de otro navegador (window.XMLHttpRequest), esto lo hacemos con el siguiente if.

    if (window.XMLHttpRequest) {

    http_request = new XMLHttpRequest();

    if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);

    } else if (window.ActiveXObject) {

    try {

    http_request = new ActiveXObject(“Msxml2.XMLHTTP”);

    } catch (e) {

    try { http_request = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {}

    }

    }

    Las partes en negrita instancian un objeto HTTPrequest en la variable http_request necesario para el requerimiento, el resto son validaciones. Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml, por eso incluimos la línea:

    if (http_request.overrideMimeType) http_request.overrideMimeType(‘text/xml’);

    Ahora necesitamos decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta, lo hacemos asignando el nombre de la función a la propiedad onreadystatechange del objeto.

    http_request.onreadystatechange = callback;

    Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTPrequest, como se muestra a continuación:

    http_request.open(‘GET’,url,true);

    http_request.send(null);

    GET es el método HTTPRequest, también podíamos utilizar POST, HEAD o cualquiera que acepte el servidor, pilas como ya especificamos anteriormente la url puede ser una página web que se encuentre en el servidor o cualquier manejador que regrese xml o texto, y por último enviamos true si queremos que la ejecución de la función de JavaScript continúe aún cuando la respuesta del servidor no haya llegado (Asincronía).

    Luego en el método send, nos sirve por ejemplo cuando usamos POST en la petición para enviar datos al servidor en forma de cadena, en nuestro caso no es necesario, enviaremos null.

    Ahora seguimos con nuestra función callback, que es la que decide qué va a pasar con la respuesta del servidor si es que llega, y llega correcta.

    if (http_request.readyState == 4) {

    if (http_request.status == 200) //Aquí recibimos la respuesta

    else alert(‘Hubo problemas con la petición’);

    }

    El campo readyState nos da el “estado listo”, si tiene el valor 4, significa que la respuesta llegó completamente y podemos continuar, otros estados importantes son:

    • 0 (no inicializada)
    • 1 (leyendo)
    • 2 (leido)
    • 3 (interactiva)

    Y por último ¿de dónde sacamos la respuesta?, pues de las propiedades del objeto HTTPRequest:

    http_request.responseText, si la respuesta es texto.

    http_request.responseXML, si la respuesta es un XML que puede ser parseado con distintas funciones del DOM.

    espa=document.getElementById(“espacio”);

    espa.innerHTML=http_request.responseText;

    Y por último llamamos al <div> con id espacio y le colocamos el texto de respuesta (El contenido de feliz.html).

    Obteniendo el efecto de al dar click, se traiga el contenido de feliz.html:

    Y ya hicimos AJAX!!!!(bueno no se si el término es usamos o hicimos jeje)

    Ahora!!

    Exactamente lo mismo que hicimos, podemos hacerlo aún más sencillo, eliminando el contenido del archivo “ajax.js” y colocando el siguiente código:

    ajax.js

    function requerir(url) {

    new Ajax.Request(url,{

    method: “GET”,

    parameters: null,

    onSuccess:

    function(transport) {

    $(‘espacio’).innerHTML=transport.responseText;

    }

    });

    }

    ¿A quién hay que matar? A nadie!! Sólo hay que descargarse la librería prototype (descárgala aquí) que es gratis e implementa muchas funciones que nos pueden ser de gran utilidad, la incluimos igual que como incluimos ajax.js, en el head:

    <script language=”javascript” src=”prototype.js” type=”text/javascript”></script>

    Para bajarte todo el código de la práctica en un proyecto de netbeans da click aquí.

    Estoy usando Apache Tomcat 6.0.16

    Tags: ,,,

 

2 responses to “Tutorial de AJAX para principiantes” RSS icon


Leave a reply