Foros del Web » Programando para Internet » Javascript » Frameworks JS »

libreria para ajax

 Estas en el tema de libreria para ajax en el foro de Frameworks JS en Foros del Web. Aupa aspaldikos, hace tiempo que no escribo en este sub-foro en concreto y quiero postear la clase / libreria o como querais llamarle que he ...
  #1 (permalink)  
Antiguo 04/12/2008, 07:59
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 1 mes
Puntos: 62
De acuerdo libreria para ajax
Aupa aspaldikos, hace tiempo que no escribo en este sub-foro en concreto y quiero postear la clase / libreria o como querais llamarle que he estado haciendo durante estos 2 dias:

ajax.js

Código javascript: 
Ver original
  1. var ajax = function()
  2. {
  3.     this.page; // page to request the petition, default: the same page (window.location)
  4.     this.method; // ajax method: post or get, post by default
  5.     this.charset; // charset utf-8 by default
  6.     this.response; // response method, XML or Text, Text by default
  7.     this.query; // GET or POST query separated by & blank for default
  8.     this.async; // ajax connection method, true by default (firefox needs true to work)
  9.     this.getSeparator; // pagename and parameters separator ? by default
  10.     
  11.     // request public method
  12.     ajax.prototype.request = function()
  13.     {               
  14.         var a = new xmlhttp(); // get xmlhttp object
  15.         if(a) // if browser support ajax
  16.         {
  17.             var t = this;
  18.             setDefault.call(this); // set default properties
  19.             var b = headers(t.method, t.charset); // set get/post different headers
  20.             petitionConstruct.call(this); // construct get/post different properties
  21.             
  22.             t.loading(); // Loading method ON
  23.             a.open(t.method,t.page,t.async); // open ajax petition
  24.             a.setRequestHeader('Content-Type', b); // set headers ALWAYS after OPEN
  25.             a.onreadystatechange = function() // get petition changestates
  26.             {
  27.                 switch(a.readyState)
  28.                 {
  29.                     case 4: // if changestate is 4 the request is complete
  30.                         if(a.status==200) // if status is 200 petition OK
  31.                         {
  32.                             if(t.response.toLowerCase()=='xml') // if XML response get XML
  33.                                 t.complete(a.responseXML);  // execute complete method                      
  34.                             else // else get plain text
  35.                                 t.complete(a.responseText); // execute complete method
  36.                         }
  37.                         else
  38.                             t.error(); // if error occurred execute error method
  39.                         break;          
  40.                 }
  41.             };
  42.             a.send(t.query);    // send get/post query  
  43.         }
  44.         else
  45.             alert('Your browser doesn\'t support ajax');
  46.     };                  
  47.  
  48.     // public methods to redefine
  49.     ajax.prototype.loading = function(){};      
  50.     ajax.prototype.complete = function(t){};
  51.     ajax.prototype.error = function(){};                        
  52.     
  53.     // private method to set default properties
  54.     var setDefault = function()
  55.     {
  56.         if(!this.method) this.method='post';                
  57.         if(!this.page) this.page=window.location;
  58.         if(!this.async) this.async=true;                    
  59.         if(!this.charset) this.charset='utf-8';
  60.         if(!this.response) this.response='txt';                             
  61.         if(!this.query) this.query='';
  62.         if(!this.getSeparator) this.getSeparator='?';
  63.     };  
  64.     
  65.     // private method to set get/post headers
  66.     var headers = function(m, c)
  67.     {
  68.         var a = '';
  69.         if(m.toLowerCase()=='post')
  70.             a = a + "application/x-www-form-urlencoded;"; // post Header
  71.         a = a + "charset="+c;
  72.         return a;
  73.     };                              
  74.  
  75.     // private method set get/post petition properties
  76.     var petitionConstruct = function()
  77.     {
  78.         // DEFAULT POST example page = index.php and query = a=hello, php -> $_POST['hello']
  79.         if(this.method!='post')// GET example page = index.php?a=hello and query = '', php -> $_GET['hello']
  80.         {
  81.             this.page = this.page+this.getSeparator+this.query;
  82.             this.query = '';
  83.         }
  84.     };
  85.     
  86.     // private method get xmlhttp object
  87.     var xmlhttp = function()
  88.     {
  89.         var a;try{a = new XMLHttpRequest();}
  90.         catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
  91.         catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
  92.         catch(e){a=false;}}}return a;
  93.     };      
  94. };

Un ejemplo de uso sería:

index.php
Código PHP:
<?php
        if($_GET['a']=='a')
        {
            echo "GET: AAAAAAAAAAAAAAAAAAAAAAAAAAA";
            exit();
        }
        elseif($_POST['a']=='a')
        {
            echo "POST: AAAAAAAAAAAAAAAAAAAAAAAAAAA";
            exit();
        }        
?>
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>YEAH</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div id="post">post content</div>
	<div id="get">get content</div>		
</body>
</html>
main.js

Código javascript: 
Ver original
  1. window.onload = function()
  2.     {
  3.         // simple EXAMPLE: POST
  4.         var b = new ajax();
  5.         b.query = 'a=a';
  6.         
  7.         b.loading = function()
  8.         {
  9.             var a = document.getElementById('post').innerHTML='loading...';
  10.         };
  11.         b.complete = function(t)
  12.         {
  13.             window.setTimeout(function()
  14.                 {   
  15.                     var a = document.getElementById('post').innerHTML=t;            
  16.                 }, 1500
  17.             );
  18.         };
  19.         b.error = function()
  20.         {
  21.             alert('Error POST petition');
  22.         };      
  23.         b.request();
  24.         
  25.         // advance example GET
  26.         var c = new ajax();
  27.         c.page = 'index.php';
  28.         c.method = 'get';
  29.         c.charset = 'utf-8';
  30.         c.response = 'txt';
  31.         c.query = 'a=a';
  32.         c.async = true;
  33.         c.getSeparator = '?';
  34.         
  35.         c.loading = function()
  36.         {
  37.             var a = document.getElementById('get').innerHTML='loading...';
  38.         };
  39.         c.complete = function(t)
  40.         {
  41.             window.setTimeout(function()
  42.                 {   
  43.                     var a = document.getElementById('get').innerHTML=t;         
  44.                 }, 3000
  45.             );
  46.         };
  47.         c.error = function()
  48.         {
  49.             alert('Error GET petition');
  50.         };              
  51.         c.request();        
  52.     };
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #2 (permalink)  
Antiguo 04/12/2008, 16:09
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 1 mes
Puntos: 62
Respuesta: libreria para ajax
Código javascript: 
Ver original
  1. var ajax = function()
  2. {
  3.     this.page; // page to request the petition, default: the same page (window.location)
  4.     this.method; // ajax method: post or get, post by default
  5.     this.charset; // charset utf-8 by default
  6.     this.response; // response method, XML or Text, Text by default
  7.     this.query; // GET or POST query separated by & blank for default
  8.     this.async; // ajax connection method, true by default (firefox needs true to work)
  9.     this.getSeparator; // pagename and parameters separator ? by default
  10.     
  11.     // request public method
  12.     ajax.prototype.request = function()
  13.     {               
  14.         var a = new xmlhttp(); // get xmlhttp object
  15.         if(a) // if browser support ajax
  16.         {
  17.             var t = this;
  18.             setDefault.call(this); // set default properties
  19.             var b = headers(t.method, t.charset); // set get/post different headers
  20.             petitionConstruct.call(this); // construct get/post different properties
  21.             
  22.             t.loading(); // Loading method ON
  23.             a.open(t.method,t.page,t.async); // open ajax petition
  24.             a.setRequestHeader('Content-Type', b); // set headers ALWAYS after OPEN
  25.             a.onreadystatechange = function() // get petition changestates
  26.             {
  27.                 state(t, a);
  28.             };
  29.             a.send(t.query);    // send get/post query  
  30.         }
  31.         else
  32.             alert('Your browser doesn\'t support ajax');
  33.     };                  
  34.  
  35.     // public methods to redefine
  36.     ajax.prototype.loading = function(){};      
  37.     ajax.prototype.complete = function(t){};
  38.     ajax.prototype.error = function(){};                        
  39.     
  40.     // private method to set default properties
  41.     var setDefault = function()
  42.     {
  43.         if(!this.method) this.method='post';                
  44.         if(!this.page) this.page=window.location;
  45.         if(!this.async) this.async=true;                    
  46.         if(!this.charset) this.charset='utf-8';
  47.         if(!this.response) this.response='txt';                             
  48.         if(!this.query) this.query='';
  49.         if(!this.getSeparator) this.getSeparator='?';
  50.     };  
  51.     
  52.     // private method to set get/post headers
  53.     var headers = function(m, c)
  54.     {
  55.         var a = '';
  56.         if(m.toLowerCase()=='post')
  57.             a = a + "application/x-www-form-urlencoded;"; // post Header
  58.         a = a + "charset="+c;
  59.         return a;
  60.     };                              
  61.  
  62.     // private method set get/post petition properties
  63.     var petitionConstruct = function()
  64.     {
  65.         // DEFAULT POST example page = index.php and query = a=hello, php -> $_POST['hello']
  66.         if(this.method!='post')// GET example page = index.php?a=hello and query = '', php -> $_GET['hello']
  67.         {
  68.             this.page = this.page+this.getSeparator+this.query;
  69.             this.query = '';
  70.         }
  71.     };
  72.     
  73.     var state = function(t, a)
  74.     {
  75.         switch(a.readyState)
  76.         {
  77.             case 4: // if changestate is 4 the request is complete
  78.                 if(a.status==200) // if status is 200 petition OK
  79.                 {
  80.                     if(t.response.toLowerCase()=='xml') // if XML response get XML
  81.                         t.complete(a.responseXML);  // execute complete method                      
  82.                     else // else get plain text
  83.                         t.complete(a.responseText); // execute complete method
  84.                 }
  85.                 else
  86.                     t.error(); // if error occurred execute error method
  87.                 break;          
  88.         }   
  89.     };
  90.     
  91.     // private method get xmlhttp object
  92.     var xmlhttp = function()
  93.     {
  94.         var a;try{a = new XMLHttpRequest();}
  95.         catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
  96.         catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
  97.         catch(e){a=false;}}}return a;
  98.     };      
  99. };

he cambiado el:
Código javascript: 
Ver original
  1. a.onreadystatechange = function() // get petition changestates
y le he añadido dentro una funcion privada para que este un poco mas organizado:
Código javascript: 
Ver original
  1. a.onreadystatechange = function() // get petition changestates
  2.     {
  3.         state(t, a);
  4.     };
  5. ...
  6.     var state = function(t, a)
  7.     {
  8.         switch(a.readyState)
  9.         {
  10.             case 4: // if changestate is 4 the request is complete
  11.                 if(a.status==200) // if status is 200 petition OK
  12.                 {
  13.                     if(t.response.toLowerCase()=='xml') // if XML response get XML
  14.                         t.complete(a.responseXML);  // execute complete method                      
  15.                     else // else get plain text
  16.                         t.complete(a.responseText); // execute complete method
  17.                 }
  18.                 else
  19.                     t.error(); // if error occurred execute error method
  20.                 break;          
  21.         }   
  22.     };
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #3 (permalink)  
Antiguo 05/12/2008, 02:04
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 1 mes
Puntos: 62
Respuesta: libreria para ajax
aupa le he añadido más metodos:
Código javascript: 
Ver original
  1. var ajax = function()
  2. {
  3.     this.page; // page to request the petition, default: the same page (window.location)
  4.     this.method; // ajax method: post or get, post by default
  5.     this.charset; // charset utf-8 by default
  6.     this.response; // response method, XML or Text, Text by default
  7.     this.query; // GET or POST query separated by & blank for default
  8.     this.async; // ajax connection method, true by default (firefox needs true to work)
  9.     this.getSeparator; // pagename and parameters separator ? by default
  10.     
  11.     // request public method
  12.     ajax.prototype.request = function()
  13.     {               
  14.         var a = new xmlhttp(); // get xmlhttp object
  15.         if(a) // if browser support ajax
  16.         {
  17.             var t = this;
  18.             setDefault.call(this); // set default properties
  19.  
  20.             var b = headers(t.method, t.charset); // set get/post different headers
  21.             petitionConstruct.call(this); // construct get/post different properties
  22.             
  23.             t.beforeReq(); // Method to do before all process
  24.             
  25.             a.open(t.method,t.page,t.async); // open ajax petition
  26.             a.setRequestHeader('Content-Type', b); // set headers ALWAYS after OPEN
  27.             a.onreadystatechange = function() // get petition changestates
  28.             {
  29.                 state(t, a);
  30.             };
  31.             a.send(t.query);    // send get/post query  
  32.         }
  33.     };                  
  34.  
  35.     // public methods to redefine: w3schools.com
  36.     ajax.prototype.beforeReq = function(){}; // method to do before all process
  37.     ajax.prototype.reqSetUp = function(){};  // method to do when The request has been set up
  38.     ajax.prototype.reqSend = function(){};  // method to do when The request has been sent  
  39.     ajax.prototype.reqInProcess = function(){}; // method to do when The request is in process              
  40.     ajax.prototype.reqComplete = function(t){}; // method to do when The request is complete
  41.     ajax.prototype.reqError = function(){}; // method to do when The request return error                   
  42.     
  43.     // private method to set default properties
  44.     var setDefault = function()
  45.     {
  46.         if(!this.method || this.method.toLowerCase()!='get') this.method='post';                
  47.         if(!this.page) this.page=window.location;
  48.         if(!this.async || this.async!=false) this.async=true;                   
  49.         if(!this.charset) this.charset='utf-8';
  50.         if(!this.response || this.response.toLowerCase()!='xml') this.response='txt';                               
  51.         if(!this.query) this.query='';
  52.         if(typeof(this.getSeparator)=='undefined') this.getSeparator='?';
  53.     };  
  54.     
  55.     // private method to set get/post headers
  56.     var headers = function(m, c)
  57.     {
  58.         var a = '';
  59.         if(m.toLowerCase()=='post')
  60.             a = a + "application/x-www-form-urlencoded;"; // post Header
  61.         a = a + "charset="+c;
  62.         return a;
  63.     };                              
  64.  
  65.     // private method set get/post petition properties
  66.     var petitionConstruct = function()
  67.     {
  68.         // DEFAULT POST example page = index.php and query = a=hello, php -> $_POST['hello']
  69.         if(this.method!='post')// GET example page = index.php?a=hello and query = '', php -> $_GET['hello']
  70.         {
  71.             this.page = this.page+this.getSeparator+this.query;
  72.             this.query = '';
  73.         }
  74.     };
  75.     
  76.     // private method to get ajax petition state
  77.     var state = function(t, a)
  78.     {
  79.         switch(a.readyState)
  80.         {
  81.             case 1: // if readystate is 1 The request has been set up
  82.                 t.reqSetUp();
  83.                 break;
  84.             case 2: // if readystate is 2 The request has been sent
  85.                 t.reqSend();        
  86.                 break;
  87.             case 3: // if readystate is 3 The request is in process
  88.                 t.reqInProcess();           
  89.                 break;
  90.             case 4:  // if readystate is 4 the request is complete
  91.                 if(a.status==200) // if status is 200 petition OK
  92.                 {
  93.                     if (t.response == 'txt') // if get plain text
  94.                         t.reqComplete(a.responseText); // execute complete method                       
  95.                     else // else get XML
  96.                         t.reqComplete(a.responseXML); // execute complete method
  97.                 }
  98.                 else
  99.                     t.reqError(); // if error occurred execute error method             
  100.                 break;
  101.         }
  102.     };
  103.     
  104.     // private method get xmlhttp object
  105.     var xmlhttp = function()
  106.     {
  107.         var a;try{a = new XMLHttpRequest();}
  108.         catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
  109.         catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
  110.         catch(e){alert('Your browser doesn\'t support ajax');a=false;}
  111.         }}return a;
  112.     };      
  113. };
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #4 (permalink)  
Antiguo 08/12/2008, 07:40
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: libreria para ajax
puedo preguntar por q esta en ingles???
  #5 (permalink)  
Antiguo 08/12/2008, 08:06
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años, 1 mes
Puntos: 62
Respuesta: libreria para ajax
ya que el chat que lo usa esta en ingles pues lo he puesto en ingles, pero si quieres te lo traduzco. O si quieres lo pongo en euskera.
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:35.