AJAX: Primer encuentro :D

Fiiufff! Estuve 2 semanas tratando de hacer lo que sigue😯 pero vale la pena😉 que si no… el proyecto a las pailas!

Qué vamos a hacer? Vamos a simular el ingreso de una factura, en una venta. Donde está la gran cosa😯❓ ps la gracia, es (por ahora) que el nombre de los clientes o el RUT (guardados en una BD) aparezcan en un DDL automáticamente😀 (Con automáticamente me refiero por AJAX😯 )

Primero empezamos por crear la tabla 8)


La tabla clientes, que tiene los siguientes campos

CREATE TABLE proyec.clientes (
   idRUT BIGINT NOT NULL,
   Nombre VARCHAR(20) NOT NULL,
   Direccion VARCHAR(20),
   FonoFax VARCHAR(20),
   Email VARCHAR(20),
   Giro VARCHAR(50),
  PRIMARY KEY (idRUT)
) ENGINE = MyISAM ROW_FORMAT = DEFAULT;

Ps creo que con esos datos por ahora queda bien (por ahora claro😉 )

Como solamente interesan (para el tuto) los datos del “idRUT” y del “Nombre” llenamos con unos ¿3 valores?

  • 12345678 -> Marito Cares
  • 87654321-> Juanito Peres

Bien, creamos ahora la página para ingresar la venta.
Algo simple, como esto:

<form action="asd" method="post">
    <table border="1">
        <tr>
           <td>Dia</td>
           <td>Nº Factura</td>
           <td>Cliente</td>
           <td>RUT</td>
           <td>Neto $</td>
           <td>IVA $</td>
           <td>Total $</td>
        </tr>
        <tr>
           <td><input type="text" name="dia" size="2" /></td>
           <td><input type="text" name="NFac" size="10"/></td>
           <td><select name="DDClientes" onfocus="leerClientes()">
                 </select></td>
           <td><input type="text" name="Rut" size="10" /></td>
           <td><input type="text" name="Neto" size="10" /></td>
           <td><input type="text" name="IVA" size="10" /></td>
           <td><input type="text" name="Total" size="10" /></td>
        </tr>
        <tr><td><input type="submit" value="Enviar" name="envio" /></td></tr>
    </table>
</form>

Como pueden ver, el action lleva a “asd”😯 esto porque no importa😀 (por ahora solo queremos llenar el combobox (costumbre de .NET😀 )
Ahora, llamamos la función “leerClientes()” cuando el DDL gana el foco (ya sea por tab, click, etc) que previamente importamos; en mi caso (ya lo cambiarán ustedes😉 ):

<script src="../js/Ajax.js" type="text/javascript"></script&lt;

Por su parte, archivo “Ajax.js” tiene las siguientes funciones:

function AJAXCrearObjeto(){
 var obj;
 if(window.XMLHttpRequest) { // no es IE
     obj = new XMLHttpRequest();
 } else { // Es IE o no tiene el objeto
     try {
         obj = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) {
         alert('El navegador utilizado no está soportado');
     }
 }
 return obj;
}
function leerClientes(){
    oXML = AJAXCrearObjeto();
    // Creamos la variable parametro
    parametro = 'clientes'; //Por ahora no enviamos ningún parámetro : )
    // Preparamos la petición con parametros
    oXML.open('POST','/ConectaBD/XML');
    // Preparamos la recepción
    oXML.onreadystatechange = leerDatos;
    // Realizamos la petición
    oXML.send( 'parametro=' + escape(parametro)); //escape para limpiar la URL
}
function leerDatos(){
   if (oXML.readyState == 4) {
       try{
         var xml = oXML.responseXML;
         var cant = xml.getElementsByTagName('cliente').length;
         for(i=0;i<cant;i++){
           rut = xml.getElementsByTagName('rut')[i].firstChild.data;
           nombre = xml.getElementsByTagName('nombre')[i].firstChild.data;
           DDLAsignarRUT(rut);
        }
       } catch(ex){
           alert(ex.toString());
       }
  }
}

function DDLAsignarRUT(valor){
    try {
        var largo = document.forms.form.DDClientes.options.length;
        document.forms.form.DDClientes.options[largo]=new Option(valor,"asd");
    }catch(ex){
        alert(ex.toString());
    }

En la función “DDLAsignarRUT“, “form” es el nombre de mi formulario, y “DDClientes” es el nombre del select.

Por último, el servlet “XML” (bonito nombre 8) )
Lo que hacemos en él:

  1. Leer los nombres y RUTs de los clientes, desde la BD.
  2. Guardarlos en su variable loca😛
  3. Devolver la respuesta en formato XML

Mostraré solamente la función GenXML, y el ProcessRequest el resto del servlet ps, se lo pueden imaginar😉

private void GenXML(String rut, String app, Integer vez){
        try {
            if(vez==1){
                this.xml = "<cliente>" +
                "<rut>" + rut +"</rut>" +
                "<nombre>" + app +"</nombre>" +
                "</cliente>";
            }else{
                this.xml=this.xml +
                "<cliente>" +
                "<rut>" + rut +"</rut>" +
                "<nombre>" + app +"</nombre>" +
                "</cliente>";
            }

        }catch(Exception e){

        }
    }
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        Boolean estado;
        estado = respuesta();
        if(estado){
            response.setHeader("Content-Type", "text/xml");
            response.setHeader("Cache-Control", "must-revalidate");
            response.setHeader("Cache-Control", "no-cache");
            PrintWriter out = response.getWriter();
            try {
                String respuesta;
                respuesta = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>" +
                        "<clientes>" +
                        this.xml +
                        "</clientes>";
               out.write(respuesta);
            } finally {
                out.close();
            }
        }else{
            response.setHeader("Content-Type", "text/html");
            PrintWriter out = response.getWriter();
            out.write(this.eror);
        }
    } 

En mi caso, la respuesta del Servlet es la siguiente:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<clientes>
   <cliente>
      <rut>77634120</rut>
      <nombre>Imprecenter Ltda.</nombre>
   </cliente>
   <cliente>
      <rut>87654321</rut>
      <nombre>Juanito Perez</nombre>
   </cliente>
   <cliente>
      <rut>12345678</rut>
      <nombre>Marito Cares</nombre>
   </cliente>
</clientes>

El funcionamiento es así:

  • Cuando el ComboBox gana el foco se llama a la función.
  • Esta , sin recargar la página ni nada (esa es la mágia de AJAX) ejecuta la llamada al Servlet, y recibe la respuesta de éste (la cual es en XML).
  • Ahora leemos la respuesta, y la “des.componemos” por los tags. En “nombre” y “rut”. Esto lo hacemos tantas veces como la etiqueta “cliente”.
  • Luego, llenamos el ComboBox con los datos que nos da el XML.

Y eso es todo.

Ahora que lo veo, fue bastante corto y fácil. Pero llegar al resultado….😯 fue terrible.

Cualquier cosa, ps ya saben😉

Código infacven.JSP, código de AJaX.js, y el código del servlet xmlinfacven.java

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 Proyecto. 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