Dale con AJAX

Considero que he aprendido bastante del mundo Ajax como para hacer un tuto. Principalmente siguiendo la línea de mi proyecto (ese que no volví a actualizar en el blog…)

Estoy haciendo un módulo de contabilidad, el tuto se basa en leer datos de un egreso en la BD y llenar un formulario con los campos recibidos. Algo como esto:

Egreso recibido


Como clientes (en la página web), no podemos leer datos directamente desde nuestra Base de Datos. Para ello le pedimos al Servidor que busque datos en la BD, y que luego nos entregue la información.

Es en este punto cuando entra en Juego Ajax. Si no lo hiciéramos con él, tendríamos que llenar los datos del formulario al momento de generar la página. En otras palabras, refrescar la página cada vez que pidamos alguna información. Y ps… esto es una lata😯 .

HTML

Solamente creo un formulario. Lo importante es darle un identificador único a cada campo del formulario para luego cargarlo con los datos.

Servidor

El otro extremo del asunto es el servidor. El que se encarga de pedir los datos a la BD y entregarlos. No voy a hacer esa parte… creo haberla hecho antes… y si no, será otro tuto (si es que lo piden🙂 ) Saltando la parte esa, como respuesta tenemos los datos crudos (en variables, en una lista, etc.  por lo que debemos formatearlos para leerlos en JavaScript. Vamos a seguir con XML (otras opciones son YML o JSON, dependiendo de cada uno) siguiendo el siguiente formato:









Dependiendo de cómo tengan almacenados los datos, completan el archivo y lo devuelven en respuesta XML. La forma que tengo de generar el XML con una clase especial dedicada a solo hacer eso… no se si les sirva, pero la comparto igual

De respuesta tenemos esto (en la URL indico cuál es el egreso que quiero leer, en este caso el 1):

Respuesta desde el servidor

JavaScript

La parte más importante😛 . Necesitamos 2 funciones  para que funcione (😯 )

En la primera creamos un objeto para enviar la petición y recibir la respuesta del servidor.

function ObjAJAX(){
    var obj;
    if (window.XMLHttpRequest)
        obj = new XMLHttpRequest();
    else if (window.ActiveXObject){
        try{
            obj = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                obj = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alert("Error al generar objeto XMLHttpRequest");
            }
        }
    }
    return obj;
}

Dependiendo del navegador que tengamos se crea uno u otro.

La segunda función tiene esta estructura:

  1. Creo el objeto XMLHttpRequest
  2. Abro la petición con el servidor. De ser necesario, envío datos (?dato1=1&dato2=2)
  3. Defino qué es lo que voy cuando  establezca la conexión.
  1.  Cuando tengo respuesta.
  2. Mientras la espero.
  • Llamo al servidor.

Todo eso es esto (suponiendo que solo quiero pasar la fecha del XML al campo fecha en el formulario:

oxml = function getEgr(){
    oxml = ObjAJAX();
    oxml.open('GET', 'Egresos?accion=leer&fin=getEgreso&egr='+this.value, true);
    oxml.onreadystatechange = function(){
        if(oxml.readyState == 4){
            var xml = oxml.responseXML;
            document.getElementById("fecha").value = xml.getElementsByTagName("fecha").item(0).getAttribute("dato");
        }else{
            /*mientras espero respuesta, por ejemplo, puedo poner un gif de carga*/
</pre>
<img src="cargando.gif" alt="" />
<pre>
        }
    }
}

Y eso es todo! ya solo es cosa de rellenar los demás campos de la misma manera.

Cualquier pregunta o algo que no entiendan, o quieren los archivos completos, comenten😀

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en Java, JavaScript, Lenguajes, Tutoriales. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s