Eventos en AJAX

flpms · #1 (**permalink**) 25/03/2010, 07:41

Bien yo voy poner esta pregunta aka y en lo topico del Javascript.

Bien en javscript tenemos addEventLsitner. En navegador Firefox la version 3.6 tiene addEventListener para AJAX. Pero en outros navegadores no hay.

Entonces lo que me gustaria hacer crear lo evento. Pero yo no se como puedo crear lo evento. ex:
AJAX.addEventLsitener('load',function(){//hacealgo}),false);

esto és nativo en firefox la version 3.6 pero en todos los otros no entonces yo pense en utilizar-se de createEvent. Ahora viene la question es posible hacer esto y como yo hago???

ps: Yo utilizo Javascript Orientado a Objetos entonces tengo una classe en javascript para hacer Ajax. Estoy poniendo la classe caso desen utilizar y mirar. Quando la classe esta toda pronto yo tengo que hacer captura de los eventos es por isso la duvida.

Código Javascript:

Ver originalfunction ajaxClass(URL,method,codePage,data,typeHeader){
    var xmlhttp = "";
    var contentType = new Array();
    contentType[0] = 'text/xml';
    contentType[1] = 'text/html';
    contentType[2] = 'application/x-www-form-urlencoded';
 
    if(xmlHttpRequest){
        xmlhttp = new xmlHttpRequest();
    }else if(ActiveXObject("Microsoft.XMLHTTP")){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(ActiveXObject("MSXML2.XMLHTTP.3.0")){
        xmlhttp = new new ActiveXObject("MSXML2.XMLHTTP");
    }else{
        alert("Your Browser Don't offer suport to AJAX");
    }
 
    if(method == "GET"){
        URL = URL+"?"+escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.send(null);
    }else if(method == "POST"){
        data = escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.setRequestHeader('Content-Type',contentType[2]);
        xmlhttp.setRequestHeader('Content-length',data.length);
        xmlhttp.send(data);
    }else{
        alert("Method not Defined.");
    }
}

Despues és solo utilizar-se de la classe como abajo

Código Javascript:

Ver originalvar AJAX = new ajaxClass("direcion.php","POST","UTF-8","lasvariables = las Informaciones&lasvariables2 = las Informaciones2",1);
/*Ahora seria la parte que yo tengo que utilizar de listeners.*/

flpms · #2 (**permalink**) 25/03/2010, 11:20

Cita:

Iniciado por flpms

Bien yo voy poner esta pregunta aka y en lo topico del Javascript.

Bien en javscript tenemos addEventLsitner. En navegador Firefox la version 3.6 tiene addEventListener para AJAX. Pero en outros navegadores no hay.

Entonces lo que me gustaria hacer crear lo evento. Pero yo no se como puedo crear lo evento. ex:
AJAX.addEventLsitener('load',function(){//hacealgo}),false);

esto és nativo en firefox la version 3.6 pero en todos los otros no entonces yo pense en utilizar-se de createEvent. Ahora viene la question es posible hacer esto y como yo hago???

ps: Yo utilizo Javascript Orientado a Objetos entonces tengo una classe en javascript para hacer Ajax. Estoy poniendo la classe caso desen utilizar y mirar. Quando la classe esta toda pronto yo tengo que hacer captura de los eventos es por isso la duvida.

Código Javascript:

Ver originalfunction ajaxClass(URL,method,codePage,data,typeHeader){
    var xmlhttp = "";
    var contentType = new Array();
    contentType[0] = 'text/xml';
    contentType[1] = 'text/html';
    contentType[2] = 'application/x-www-form-urlencoded';
 
    if(xmlHttpRequest){
        xmlhttp = new xmlHttpRequest();
    }else if(ActiveXObject("Microsoft.XMLHTTP")){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(ActiveXObject("MSXML2.XMLHTTP.3.0")){
        xmlhttp = new new ActiveXObject("MSXML2.XMLHTTP");
    }else{
        alert("Your Browser Don't offer suport to AJAX");
    }
 
    if(method == "GET"){
        URL = URL+"?"+escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.send(null);
    }else if(method == "POST"){
        data = escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.setRequestHeader('Content-Type',contentType[2]);
        xmlhttp.setRequestHeader('Content-length',data.length);
        xmlhttp.send(data);
    }else{
        alert("Method not Defined.");
    }
}

Despues és solo utilizar-se de la classe como abajo

Código Javascript:

Ver originalvar AJAX = new ajaxClass("direcion.php","POST","UTF-8","lasvariables = las Informaciones&lasvariables2 = las Informaciones2",1);
/*Ahora seria la parte que yo tengo que utilizar de listeners.*/

Bein yo creo que es demasiado dificil. Pero tambien yo no festoy haciendo la pregunta de la manera correcta.

Pero tambien buscando en la web. Para ser más exacto en la fuente de las documentaciones de cada navegador yo encontré las respuestas.

En navegadores con motores -webkit- no hay problemas com lo addEventListener para lo objeto XMLhttpRequest. Para los navegadores baseado en -Gecko tambien haga lo mismo. Pero en internet explorer tiene que utilizar-se del attachEvent. Yo solo mire los articulos pero no hizo ninguno teste entonces no es conclusivo.

Panino5001 · #3 (**permalink**) 26/03/2010, 09:19

La verdad no es la manera más ortodoxa, pero podrías intentar algo como esto:

Código:

<script>
function ajaxClass(URL,method,codePage,data,typeHeader){
    var xmlhttp ="";
    var contentType = new Array();
    contentType[0] = 'text/xml';
    contentType[1] = 'text/html';
    contentType[2] = 'application/x-www-form-urlencoded';
 
    if(typeof window.XMLHttpRequest!='undefined'){
        xmlhttp = new XMLHttpRequest();
    }else{ 
		try{
			
			 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}catch(e){
			alert('Su navegador no soporta AJAX');
			return false;
		}
    }
 
    if(method == "GET"){
        URL = URL+"?"+escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.send(null);
    }else if(method == "POST"){
        data = escape(data);
        xmlhttp.open(method,URL,true);
        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);
        xmlhttp.setRequestHeader('encoding',codePage);
        xmlhttp.setRequestHeader('Content-Type',contentType[2]);
        xmlhttp.setRequestHeader('Content-length',data.length);
        xmlhttp.send(data);
    }else{
        alert("Method not Defined.");
    }
	this.xhr=xmlhttp;
	this.addEventListener=function(e,fn,u){
		var _this=this;
		if(_this.xhr.addEventListener)
			_this.xhr.addEventListener(e,fn,u);
		else{
			_this.xhr['on'+e]=function(){fn.call(_this.xhr,window.event);};
			
		}
	}
}
var AJAX = new ajaxClass("t.php","POST","UTF-8","&lasvariables=las Informaciones&lasvariables2=las Informaciones2",1);
AJAX.addEventListener('readystatechange',function(){if(this.readyState==4)document.body.innerHTML=this.responseText;},false);
</script>

flpms · #4 (**permalink**) 03/04/2010, 08:16

Lo Listener no Funciona.

Panino5001 · #5 (**permalink**) 03/04/2010, 08:22

El ejemplo funciona. Lo que tendrías que modificar (yo lo dejé tal como lo tenías) es esta línea: URL = URL+"?"+escape(data);
Porque debes escapar sólo los valores, no los nombres de variable y sus separadores.

Panino5001 · #6 (**permalink**) 03/04/2010, 08:41

Lo del escapado puedes resolverlo así:

Código PHP:

  <script>

function ajaxClass(URL,method,codePage,data,typeHeader){

    var xmlhttp ="";

    var contentType = new Array();

    contentType[0] = 'text/xml';

    contentType[1] = 'text/html';

    contentType[2] = 'application/x-www-form-urlencoded';

 

    if(typeof window.XMLHttpRequest!='undefined'){

        xmlhttp = new XMLHttpRequest();

    }else{ 

        try{

            

             xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            alert('Su navegador no soporta AJAX');

            return false;

        }

    }

 

    if(method == "GET"){

        var t=data.split('&');

        var p='';

        for(var i=0,l=t.length;i<l;i++){

            var t2=t[i].split('=');

            p+='&'+t2[0]+'='+escape(t2[1]);    

        }

        URL = URL+"?"+p;

        xmlhttp.open(method,URL,true);

        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);

        xmlhttp.setRequestHeader('encoding',codePage);

        xmlhttp.send(null);

    }else if(method == "POST"){

        var t=data.split('&');

        var p='';

        for(var i=0,l=t.length;i<l;i++){

            var t2=t[i].split('=');

            p+='&'+t2[0]+'='+escape(t2[1]);    

        }

        URL = URL+"?"+p;

        xmlhttp.open(method,URL,true);

        xmlhttp.setRequestHeader('Content-Type',contentType[typeHeader]);

        xmlhttp.setRequestHeader('encoding',codePage);

        xmlhttp.setRequestHeader('Content-Type',contentType[2]);

        xmlhttp.setRequestHeader('Content-length',data.length);

        xmlhttp.send(data);

    }else{

        alert("Method not Defined.");

    }

    this.xhr=xmlhttp;

    this.addEventListener=function(e,fn,u){

        var _this=this;

        if(_this.xhr.addEventListener)

            _this.xhr.addEventListener(e,fn,u);

        else{

            _this.xhr['on'+e]=function(){fn.call(_this.xhr,window.event);};

            

        }

    }

}

var AJAX = new ajaxClass("t.php","GET","UTF-8","&lasvariables=las Informaciones&lasvariables2=las Informaciones2",1);

AJAX.addEventListener('readystatechange',function(){if(this.readyState==4)document.body.innerHTML=this.responseText;},false);

 
</script>

De todas maneras no me parece buena idea el generar esos falsos listeners. Lo mejor es usar callbacks, de esta manera:

Código PHP:

  <script>

function http(){

    if(typeof window.XMLHttpRequest!='undefined'){

        return new XMLHttpRequest();    

    }else{

        try{

            return new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            alert('Su navegador no soporta AJAX');

            return false;

        }    

    }    

}

function requestCallbackParam(url,callback,params){

    var H=new http();

    if(!H)return;

    H.open('post',url+'?'+Math.random(),true);

    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    H.onreadystatechange=function(){

        if(H.readyState==4){

            callback(H.responseText);

            H.onreadystatechange=function(){}

            H.abort();

            H=null;

        }

    }

    var p='';

    for(var i in params){

        p+='&'+i+'='+escape(params[i]);    

    }

    H.send(p);

}

 
requestCallbackParam('t.php',function(r){document.body.innerHTML=r;},{'var1':1,'var2':'hola'});

</script>