Resultados 1 al 6 de 6

Problema con Ajax

  1. #1 Problema con Ajax 
    Avanzado
    Fecha de ingreso
    Jun 2006
    Ubicación
    Valhala
    Mensajes
    1.167
    Descargas
    4
    Uploads
    0
    Buenos dias, a ver si alguien por aqui alguna vez se ha tenido que enfrentar a ajax y le ha surgido un problema parecido al mio.
    Estoy haciendo una aplicacion web y decidií hacerla con ajax, una tecnologia que no he usado nunca hasta hace dos semanas. Hasta el momento he estado haciendo las pruebas usando Opera, y ahora que la tengo montada casi entera, me doy cuenta que no funciona con otro navegador (he probado iexplorer, firefox y safari). Y no tengo ni idea de porque es, os pongo las partes del codigo mas interesantes:

    Estas son las funciones principales, la que carga elobjeto XMHTTP y la funcion general de peticion de contenidos.
    Código:
    function start_xhr(){
    	if(window.XMLHttpRequest) {
    		return new XMLHttpRequest();
    	}
    	else if ( window.ActiveXObject){
    		return new ActiveXObject("Microsoft.XMLHTTP");
    	}
    }
    
    function loadContent(url,method,funcion,param){
    
    	peticion = start_xhr();
    	if(peticion){
    	peticion.overrideMimeType('text/xml');
    
    		peticion.onreadystatechange=funcion;
    		peticion.open(method,url,false);
    		
    		peticion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		peticion.send(param);
    
    	}
    }
    Este seria el par de funciones, la primera es la encargada de montar la peticion y la siguiente de mostrar los resultados:

    Código:
    function llenaConsejeria(){
    tabla="Consejeria";
    campo="consejeria";
     query="Buscar=Buscar&tabla="+tabla+"&campo="+campo;
     lista=document.getElementById('area');
     area=document.getElementById('area').options[lista.selectedIndex].value;
     alert(area);
     if(area!=null && area!='' && area!='NA') query+="&area="+area;
     loadContent("http://localhost/apli/consulta.php","POST",muestraConsejeria,query);
    }
    
    function muestraConsejeria(){
    	var cad=peticion.responseText;
    	capa='consejeria';
    	rellenaCombo(cad,capa);
    }
    En la segunda funcion, se llama para rellenar a la funcion rellenaCombo, pero funciona perfectamente. Tras investigar, parece que el fallo esta en que la funcion de muestra nunca se llega a ejecutar. Vamos la funcion que le pasamos a peticion.onreadystatechange nunca llega a ejecutarse.
    A que podria ser debido? En todos los manuales que he visto, esa parte se hace asi, hay distinción entre navegadores para esa parte??
    Gracias y un saludo.
    http://www.project-longinus.es
    Citar  
     

  2. #2  
    Avanzado
    Fecha de ingreso
    Jun 2006
    Mensajes
    538
    Descargas
    3
    Uploads
    0
    Wenas.

    Ahora mismo no te se decir que es lo que te falla exactamente. Podrian ser varias cosas:

    * La llamada peticion.open la haces despues de peticion.onreadystatechange.
    * Instancias peticion cada vez que llamas a loadContent, pero luego llamas a esa variable desde otra funcion (variable global ?)
    * No se que es "funcion", que se llama en el onreadystatechange;
    * No preguntas por el estado del cambio de estado;

    Te pongo como lo tengo yo en una aplicacion que tengo por aquí tanto para metodos POST como GET, a ver si te vale de ejemplo ( me funciona tanto en ie como en firefox)

    Código:
    var req = createXMLHttpRequest(); 
    
    function createXMLHttpRequest() { 
        var ua; 
        if(window.XMLHttpRequest) { 
            try { 
                ua = new XMLHttpRequest(); 
            } catch(e) { 
                ua = false; 
            } 
        } else if(window.ActiveXObject) { 
            try { 
                ua = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch(e) { 
                ua = false; 
            } 
        } 
        return ua; 
    } 
    
    function cargaPage(url,ndiv) {
        document.getElementById(ndiv).innerHTML = "<img src='./img/progress.gif'>";
        req.open("GET",url);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.setRequestHeader("Connection", "close");
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                resp = req.responseText;
                document.getElementById(ndiv).innerHTML = resp;
            }
        }
        req.send("");
    }
    function accionPOST(url,ndiv,form) {
        document.getElementById(ndiv).innerHTML = "<img src='./img/progress.gif'>"
        var param="";
        if(form=="frmPassChange") {
            accion = "doPassChange";
        }else if(form=="frmResetAuras"){
            accion = "doResetAuras";
        }
        param = "&accion="+accion;
        for(i=0;i < document.getElementById(form).elements.length;i++) {
            param = param+"&"+document.getElementById(form).elements[i].name+"="+document.getElementById(form).elements[i].value;
        }
        param = encodeURI(Right(param,param.length - 1));
        req.open("POST",url);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.setRequestHeader("Content-length", param.length);
        req.setRequestHeader("Connection", "close");
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                resp = req.responseText;
                document.getElementById(ndiv).innerHTML = req.responseText;
            }
        }
        req.send(param);
    }
    Lo de :
    Código:
    document.getElementById(ndiv).innerHTML = "<img src='./img/progress.gif'>"
    Lo unico que hace es mostrar una imagen desde que se inicia la accion, hasta que el servidor devuelve la respuesta

    Espero te sirva.

    Un saludo
    Última edición por Ktorce; 09-07-2008 a las 13:45
    Citar  
     

  3. #3  
    Avanzado
    Fecha de ingreso
    Jun 2006
    Ubicación
    Valhala
    Mensajes
    1.167
    Descargas
    4
    Uploads
    0
    Gracias por contestar Ktorce, y siento la tardanza, estaba de vacaciones, y sin internet (que mono tenia! )
    Conseguí solucionar el problema, todo se debia a que no terminaba de entender la filosofia de Ajax.

    Comento la solucion por si alguien vuelve a tener problemas.

    Las peticiones se pueden hacer de dos formas, sincronas o asincronas.
    En caso de ser asincronas, hace todas las peticiones a la vez, y las suele ir tratando segun venga. Por ello, en peticion.onreadystatechange, le asignamos la funcion encargada de tratar el resultado de la peticion. Y dentro de esta peticion, tenemos que controlar que el contenido este listo.
    Un ejemplo de peticion asincrona sería:
    Código:
    function loadContent(url,method,funcion,param){
    
    	peticion = start_xhr();
    	if(peticion){
    	peticion.overrideMimeType('text/xml');
    
    		peticion.onreadystatechange=funcion;
    		peticion.open(method,url,true);
    		
    		peticion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		peticion.send(param);
    
    	}
    }
    function unaFuncion(){
     if (req.readyState == 4) {
                resp = req.responseText;
                document.getElementById(ndiv).innerHTML = resp;
            }
    }
    
    loadContent("http://url.es","GET","unaFuncion",null);
    En cambio, las llamadas sincronas se resuelven una por una. Hasta que una no esta terminada, no sigue con la otra, de esta forma, no nos hace falta comprobar los estados y la funcion que pasamos a peticion.onreadystatechange nunca se ejecuta, sino que tenemos que ejecutarla a mano. A continuacion, un ejemplo de una llamada sincrona.
    Código:
    function loadContent(url,method,funcion,param){
    
    	peticion = start_xhr();
    	if(peticion){
    	peticion.overrideMimeType('text/xml');
    		peticion.open(method,url,false);		
           peticion.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		peticion.send(param);
           funcion();
    
    	}
    }
    function unaFuncion(){
                resp = req.responseText;
                document.getElementById(ndiv).innerHTML = resp;
    }
    
    loadContent("http://url.es","GET","unaFuncion",null);
    He puesto en negrita los cambios fundamentales. Para elegir entre sincrona y asincrona, tendremos que pasar como tercer parametro a la funcion open false o true respectivamente.
    Y para la llamada a la funcion, dependiendo del modo se hara asignando el nombre de la funcion al atributo onreadystatechange o llamandola implicitamente dentro de la funcion.
    http://www.project-longinus.es
    Citar  
     

  4. #4  
    Moderador HH
    Fecha de ingreso
    Dec 2001
    Ubicación
    España
    Mensajes
    836
    Descargas
    2
    Uploads
    0
    Muy buenas smaug_, ya que lo has solucionado te quería sugerir que para los próximos proyectos, ya que has entendido como funciona y has implementado AJAX desde 0 una vez utilices alguna librería (YUI, Dojo, Ext, Prototype, Jquery, Motools, ...) que suelen estar testeadas en todos los navegadores y funcionan perfectamente, te ahorrará tiempo y quebraderos de cabeza. Además muchísimas son de código abierto por lo que no tendrás ningún problema y además de Ajax tendrás implementadas 1000 funciones más que te serán muy útiles.

    Saludos!
    Normas Del Foro | En la comunidad ayudamos a resolver problemas, solo pedimos paciencia y cabeza.
    Más información sobre mi: Raúl Jiménez
    Citar  
     

  5. #5  
    Iniciado
    Fecha de ingreso
    Dec 2008
    Mensajes
    1
    Descargas
    0
    Uploads
    0
    ktorce, esta parte no la entiendo:

    var param="";
    if(form=="frmPassChange") {
    accion = "doPassChange";
    }else if(form=="frmResetAuras"){
    accion = "doResetAuras";
    }
    param = "&accion="+accion;

    y, tampoco por que se establece:
    req.setRequestHeader("Content-length", param.length);
    req.setRequestHeader("Connection", "close");

    he llegado a este post buscando una solución al siguiente problema, cuando envío un formulario mediante post cuando recibo el formulario se inserta un nuevo campo:
    undefined='undefined,undefined'

    que no tengo idea de que se trata,

    gracias, un saludo, jc
    Citar  
     

  6. #6  
    Avanzado
    Fecha de ingreso
    Jun 2006
    Mensajes
    538
    Descargas
    3
    Uploads
    0
    mmm, pues sin ver el codigo, no te se decir por que se mete ese parámetro.

    Lo de los if, no le hagas mucho caso, hice un copy-paste de un codigo concreto que tengo, y hay partes que sobran sin el contexto general.

    Desde hace tiempo uso la librería prototype ( http://www.prototypejs.org/ ) y la verdad es que me ahorra mucho tiempo, y tal y como dice Kaos, ya esta testeada en los navegadores más populares (IE, Firefox, Safari..)

    Un saludo
    Citar  
     

Marcadores

Marcadores