[SOLUCIONADO] Bug en firebug ?

Italico76 · #1 (**permalink**) 24/06/2014, 16:47

Hola gente!

Tratando de corregir unas funciones que habia escrito para manejo de Ajax me encontre con un problema para mi indescifrable...... un extraño comportamiento del "Inspect Element" tanto de Chrome como de Firefox.

Me dice primero que un objeto Ajax tiene status:0 y cuando lo inspecciono dice que tiene status:200

Por otro lado "copio" el objeto a otra variable (ob = aR) y cuando la miro dice algo completamente distinto!

Alguien entiende que esta pasando ? y por que tanto Chrome con Firefox observan este comportamiento ?

http://i1353.photobucket.com/albums/...psc8991cb4.png

Código Javascript:

Ver original<html>
<body>
 
<form name="personal" action="../pruebas/ver_dump $_REQUEST.php" id="personal1">
    Edad: 
    <input type="text" id="edad" /> <br />
    Peso: 
    <input type="text" id="peso"  /><br />
    Sexo: 
    <select id="sexo">
        <option value="MASCULINO">M</option>
        <option value="FEMENINO">F</option>
    </select>   
</form>
 
<div id="outputAjax">Resultados del lado del servidor</div>
 
 
<script>
 
var edad_el     = document.getElementById('edad'),
    peso_el     = document.getElementById('peso'),
    sexo_el     = document.getElementById('sexo'),
    frm         = document.getElementById('personal1'),
    outputAjax  = document.getElementById('outputAjax');
 
 
    onreadystatechangeHandler = function(aR)
    {
        ob = aR;
        
        if(ob.readyState == 4  && ob.status == 200 ){   
            console.log(ob.responseText);
            outputAjax.innerHTML = ob.responseText;
        }else{
            console.log ('readyState: '+ob.readyState+' y status: '+ob.status);
            console.log (ob);
        }   
        
            
    };      
 
    function ajaxRequestObjectBuilder()
    {     
    var object;
    
    try{
        // Opera 8.0+, Firefox, Safari
        object = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            object = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                object = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){                
                alert("Error en Ajax");
                return false;
            }
        }
        
    }          
    return object;
    }
 
function ajaxByGet()
{
 
var ajaxRequest = ajaxRequestObjectBuilder();
 
    // registro funcion para Ajax
    ajaxRequest.onreadystatechange = onreadystatechangeHandler(ajaxRequest);
    //console.log(ajaxRequest);
 
var edad = edad_el.value,
    peso = peso_el.value,
    sexo = sexo_el.value;
 
    var params = "?edad=" + edad + "&peso=" + peso + "&sexo=" + sexo;
    ajaxRequest.open("GET", frm.action + '?' + params, true);
    ajaxRequest.send(null); 
}
 
 
// Registro cambios en elementos deel formulario: onChange
document.getElementById('personal1').addEventListener("change", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'SELECT')
    {
        ajaxByGet();        
    }
});
 
// Registro cambios en elementos deel formulario: onKeyup
document.getElementById('personal1').addEventListener("keyup", function (event)
{
    var tagname = event.target.tagName;
    
    if (tagname == 'INPUT' || tagname == 'TEXTAREA')
    {
        ajaxByGet();        
    }
});
 
</script>
 
 
</body>
</html>
</html>

y la parte que estaba debugueando es esta:

Código Javascript:

Ver originalonreadystatechangeHandler = function(aR)
    {
        ob = aR;
        
        if(ob.readyState == 4  && ob.status == 200 ){   
            console.log(ob.responseText);
            outputAjax.innerHTML = ob.responseText;
        }else{
            console.log ('readyState: '+ob.readyState+' y status: '+ob.status);
            console.log (ob);
        }               
    };

Desde ya muchas gracias

jp91 · #2 (**permalink**) 24/06/2014, 17:10

Me asombre con el titulo un bug en Firefox(representa dinero) jejejej lo que pasa por ejemplo en chrome te muestra una primera vista rapida del objeto pero cuando lo expandes te muestra lo que se esta ejecutando.

zerokilled · #3 (**permalink**) 24/06/2014, 17:15

buenas...
¿sabes lo que significa esa i azul que aparece al final de la primera línea del log?

eso significa que al expandir el objeto, la consola captura los valores reales la primera vez que se expande. lo que ves en la primera linea (antes de la i azul) es un snippet de los valores al momento de imprimirse en la consola y no necesariamente refleja el valor real de la propiedad.

Italico76 · #4 (**permalink**) 24/06/2014, 17:55

Gracias amigos...... lo que me parece confuso o errado....es que cuando expando aparece una informacion que introduje en los campos (REAL) pero los estados que muestra en el objeto Ajax son aparentemente errados ya que no se condicen con el flujo del programa.

...en cambio.. en la version sin expandir ... dice que el status es 0 (algo si se condice con el flujo) pero que no hay nada en los campos (response y responseText) lo cual no tiene sentido.

Entonces... estan AMBOS SNAPS mal ?? ninguno es real ?

FIJENSE que imprimo previamente el valor del status y readyState desde el mismo programa (tampoco es confiable?) y me dice "readyState: 0 y status: 0" y luego el objeto expandido (segun uds real) dice que el status es 200 (?!?!?!)

Y un alert() tambien da valores ficticios ?

Código Javascript:

Ver originalalert ('readyState: '+aR.readyState+' y status: '+aR.status);

<< eso me dice "readyState: 0 y status: 0" y segun Uds el objeto expandido da informacion REAL pero dice que el status es 200

Italico76 · #5 (**permalink**) 24/06/2014, 18:33

He actualizado mi respuesta y la hice mas completa.....

zerokilled · #6 (**permalink**) 24/06/2014, 18:56

los valores que muestras en el console.log y alert no son erroneos. son los reales, pero reales para ese momento que se hizo el log o alert. luego cuando depuras en la consola, puede que los valores no coincidan. esto por dos cosas principales: primero porque estas trabajando sobre el mismo objeto, y segundo porque el estado de las propiedades han ido cambiando. en este caso, el estado cambia cada vez que se dispara el evento readystatechange. la consola, aunque muestre varias veces el mismo objeto en distintas circunstancias, todos ellos hacen referencia al mismo objeto. si se diera la situación donde tienes que expandir el log, la consola muestra el estado actual de ese objeto. si luego haces un cambio al objeto y vuelves a expandir el mismo log anterior, no va reflejar el nuevo cambio. tal como dice el tooltip del icono azul, el estado del objeto es capturado en la primera expansión. si por el contrario, tienes varios logs del mismo objeto (ninguno sin expandir), realizas algún cambio al objeto, al expandir los logs se mostrará el nuevo cambio. tu mismo puedes hacer la prueba con cualquier objeto que sea suficientemente largo que no se pueda mostrar en una sola línea de la consola. en definitiva, no es un bug.

Italico76 · #7 (**permalink**) 24/06/2014, 19:28

@zerokilled : "perfecto" ... llegue a imaginar algo asi (el titulo es amarillista) pero entonces no voy a poder separar la definicion de la funcion para onreadystatechange del resto de la funcion para manejo de Ajax ?

Dicho de otra forma...... debo chequear si el objeto esta listo..... pero sino lo esta.. simplemente pasa de largo y ya...... no se ejecuta nada.

No hay otra forma de manejar eso con handlers como he tratado o bien de disparar un evento cuando este listo el request en vez de estar preguntando si lo esta ?

zerokilled · #8 (**permalink**) 24/06/2014, 21:10

quizas, y solo quizas, lo que estés buscando es el evento onloadend. se dispara cuando el request ha finalizado. pero ojo, el evento se dispara tanto el request sea exitoso o fallido. por otro lado, dicho evento se incorpora en XMLHttpRequest2, el cual aún está en fase de borrador.

Italico76 · #9 (**permalink**) 24/06/2014, 21:14

Muchas gracias @zerokilled, entonces nada que hacer......... me pregunto como lo hara jQuery por ejemplo....... deberia ponerme a leer la libreria

Italico76 · #10 (**permalink**) 25/06/2014, 09:44

Código Javascript:

Ver original$.ajax({
                url: 'turul.php',
                type: 'POST'.
                data: 'cBar=' + $(this).val(),
                success: function(data){
                    $('resultado').val(data);
                }
            });

Viendo otro hilo confirmo que jQuery de alguna forma se las arregla para aceptar un Handler para onreadystatechange aunque ni idea como superan el problema que yo tengo.

... el consuelo que tengo.. es que perdi algo "generalidad" pero me quedo mas simple:

Código Javascript:

Ver originalajaxByPost('consulta',fieldsForm1,'outputfieldsForm1');

o lo mismo para GET:

Código Javascript:

Ver originalajaxByGet('consulta',fieldsForm1,'outputfieldsForm1');

http://www.forosdelweb.com/f13/ajax-...1/#post4612237

Alexis88 · #11 (**permalink**) 25/06/2014, 11:26

Lee esto, creo que es lo que buscas.

Saludos

Italico76 · #12 (**permalink**) 25/06/2014, 12:25

Cita:

Iniciado por Alexis88

Lee esto, creo que es lo que buscas.

Si Alexis gracias... buenisimo pero lo necesito en JS nativo

zerokilled · #13 (**permalink**) 25/06/2014, 12:48

no creo que sea tan complicado... se me ocurre que puedes crear una función que asigne eventos para un estado en particular. en realidad no es tan así... mas bien te enfocas en el aspecto del qué hacer para dicho estado mientras la función se encarga de invocar el argumento para el estado en particular. obviando la parte de un contenedor general para ajax.

Código:

var req = new XMLHttpRequest();
req.sucess = function(handler){
this.addEventListener('readystatechange', function(){
if(this.readyState == 4 && this.status == 200) handler.apply(this, arguments);
}, true);
};

req.sucess(function(){ console.log(arguments, this); });