PHP-Hispano.net Comunidad hispana de desarrollo web

Contacto | #php_para_torpes | Enlázanos | ¿Quiénes somos?

12 usuarios Online (0)

Darse de alta en la web | Recuperar password   
Inicio / Foros / Ajax / Unir dos aplicaciones de ajax en un sola pagina

Unir dos aplicaciones de ajax en un sola pagina

11 respuestas 2209 visitas Categoría Ajax

Unir dos aplicaciones de ajax en un sola pagina

Avatar de wilrocaul

Nivel 1 (24 posts)

* * * * * * *

0 Agradecimientos

#0 Offline wilrocaul 05 dic 08
Que tal amigos, anteriormente había posteado sobre un tema de select dependientes del cual ya pude hacerlo funcionar correctamente.....

Realize dos aplicaciones similares diferentes de select dependientes por separado pero necesariamente debo colocarlas ambas dentro de una página php..

Me salió un problema que al ejecutar el script una de las dos aplicaciones no funciona...(la primera que coloco dentro del script)

Al hacerlas funcionar por separado funciona ambas perfectamente pero al unirlas una deja de funcionar...ojala me puedan ayudar...

El codigo para la primera aplicacion es algo asi:



//1.----INSTANCIAR REQUEST--------------------------------------------
function inicializa_xhr() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); 
  } else if (window.ActiveXObject) {
    return new ActiveXObject(\"Microsoft.XMLHTTP\"); 
  } 
}
//MOSTRAR MENUS_SECCIONES-----------------------------------
function muestraSecciones() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var lista = document.getElementById(\"seccion\");
      var secciones = eval(\'(\' + peticion.responseText + \')\');
      lista.options[0] = new Option(\"- Información General -\");
      var i=1;
      for(var codigo in secciones) {
        lista.options[i] = new Option(secciones[codigo], codigo);
        i++;
      }
    }
  }
}

//CARGAR MENUS----------------------------------
function cargaMenus() {
  var lista = document.getElementById(\"seccion\");
  var seccion = lista.options[lista.selectedIndex].value;
  peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraMenus;
      peticion.open(\"POST\", \"http://localhost/www.dominio.com/menu_vertical/servidor/menus_menusJSON.php?nocache=\" + Math.random(), true);
      peticion.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");
      peticion.send(\"seccion=\" + seccion);
    }
  
}
//MOSTRAR MENUS--------------------------------
function muestraMenus() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
     var lista = document.getElementById(\"menu\");
     var menus= eval(\'(\' + peticion.responseText + \')\');
     lista.options.length = 0;
      var i=0;
      for(var codigo in menus) {
        lista.options[i] = new Option(menus[codigo], codigo);
        i++;
      }
    }
  }
}

//CARGAR ITEMS----------------------------------
function cargaItems(){
  var lista = document.getElementById(\"menu\");
  var menu = lista.options[lista.selectedIndex].value;
  peticion = inicializa_xhr();
    if (peticion) {
      peticion.onreadystatechange = muestraItems;
      peticion.open(\"POST\", \"http://localhost/www.dominio.com/menu_vertical/servidor/menus_itemsJSON.php?nocache=\" + Math.random(), true);
      peticion.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");
      peticion.send(\"menu=\" + menu);
    }
}
//MOSTRAR ITEMS--------------------------------
function muestraItems() {
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
     var lista = document.getElementById(\"item\");
     var items= eval(\'(\' + peticion.responseText + \')\');
     lista.options.length = 0;
      var i=0;
      for(var codigo in items) {
        lista.options[i] = new Option(items[codigo], codigo);
        i++;
      }
    }
  }
}
/ /ONLOAD-------------------------------------
window.onload = function() {
  peticion = inicializa_xhr();
  if(peticion) {
    peticion.onreadystatechange = muestraSecciones;
    peticion.open(\"GET\", \"http://localhost/www.dominio.com/menu_vertical/servidor/menus_seccionesJSON.php?nocache=\"+Math.random(), true);
    peticion.send(null);
  }
  document.getElementById(\"seccion\").onchange = cargaMenus;
  document.getElementById(\"menu\").onchange = cargaItems;
}

</script>
</head>
<body>
<form>
<select name=\"seccion\" id=\"seccion\">
  <option>Cargando...</option>
</select>
<select id=\"menu\" class=\"cambio1\">
    <option>- menu -</option>
  </select>
  <select id=\"item\" class=\"cambio2\" >
    <option>- item -</option>
  </select>
  
</form>



Al hacer la segunda aplicacion utilize el objeto accion para llamar a la funcion inicializa_xhr();



window.onload = function() {
  accion = inicializa_xhr();
  if(accion) {
    accion.onreadystatechange = muestraSecciones;
    accion.open(\"GET\", \"http://localhost/www.dominio.com/menu_vertical/servidor/carga_regionesJSON.php?nocache=\"+Math.random(), true);
    accion.send(null);
  }
  document.getElementById(\"region\").onchange = cargaProvincias;
  document.getElementById(\"provincia\").onchange = cargaCiudades;
}



Uní las dos aplicaciones en un solo archivo pero igual funciona solo la segunda aplicación..

Gracias por su ayuda

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de panino

Nivel 6 (1498 posts)

* * * * * * *

34 Agradecimientos

#1 Offline panino 05 dic 08 0 personas consideran útil este post.
En principio te digo que tu código es un poco desordenado y que abusás del uso de variables globales, lo que puede traerte más de un dolor de cabeza. No obstante, tendrías que colocar tu código completo para ver dónde estás equivocándote, evidentemente no colocás la parte html donde tenés los ids region y provincia, ni la declaración de los handlers asociados al evento onchange, y si estás usando el onload de window de esa manera, en realidad la segunda vez sobreescribís la primera.

www.disegnocentell.com.ar

Prototype: una alternativa

Avatar de Chokolate

Nivel 3 (209 posts)

* * * * * * *

25 Agradecimientos

#2 Offline Chokolate 06 dic 08 0 personas consideran útil este post.
Aunque muchos digan que el utilizar prototype vuelve lenta la aplicacion, la verdad es que en lo personal, me ha servido mucho y simplifica bastante el trabajo en Javascript para el desarrollo de aplicaciones, ademas que ha integrado funciones muy potentes para el uso de Ajax, el metodo mas notable tal vez sea el Ajax.Updater, te recomiendo que te des una vuelta por la pagina oficial de este framework, posteriormete hare un ejemplo sencillo de lo que quieres hacer, utilizando claro prototype.js

Saludos

SirChokolate.
Software Engineer Mr.
Sr. Datawarehouse & DataIntegration
Business Intelligence Consultant

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de panino

Nivel 6 (1498 posts)

* * * * * * *

34 Agradecimientos

#3 Offline panino 06 dic 08 0 personas consideran útil este post.
Si vas a usar todas las funcionalidades de una librería y la conocés bien y sabés javascript, entonces está bien usarla, porque el peso extra que le agregás a tu página seguramente se verá recompensado por la velocidad de desarrollo, pero para hacer 2 ó 3 intercambios con AJAX, definitivamente no es necesario ni aconsejable.

www.disegnocentell.com.ar

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de Chokolate

Nivel 3 (209 posts)

* * * * * * *

25 Agradecimientos

#4 Offline Chokolate 06 dic 08 0 personas consideran útil este post.
En efecto, como bien dice panino, y como yo lo menciono en mi post, es un framework, que implica que sabes algo de javascript o de cualquier lenguaje que el framework utilice, son en muchos casos funciones optimizadas para tareas rutinarias.

Pero igual no es necesario ser un erudito en la libreria o framework a utilizar, es solo cosa de documentarse un poco, y mria que la mayoria de los frameworks, tanto de Javascript y PHP, traen una muy buena documentación.

En efecto no es encesaria para hacer un par de cambios, pero no hay por que utilizarla solo para un par de cambios, es como aquel dilema entre ver un vaso medio lleno o medio vacio.

Saludos.

SirChokolate.
Software Engineer Mr.
Sr. Datawarehouse & DataIntegration
Business Intelligence Consultant

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de Chokolate

Nivel 3 (209 posts)

* * * * * * *

25 Agradecimientos

#5 Offline Chokolate 06 dic 08 0 personas consideran útil este post.
//clase para el manejo de peticiones asincronas(Ajax)
var net=new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;

net.ContentLoader = function (url,onload,onerror,method,params,contentType,headers,secure)
{
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.secure=secure;
this.loadXMLDoc(url,method,params,contentType,headers);
}

net.ContentLoader.prototype =
{
loadXMLDoc: function(url,method,params,contentType,headers)
{
if (!method)
{
method=”GET”;
}
if (!contentType && method==”POST”)
{
contentType=’application/x-www-form-urlencoded’;
}
if (window.XMLHttpRequest)
{
this.req=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
this.req=new ActiveXObject(”Microsoft.XMLHTTP”);
}
if (this.req)
{
try
{
try
{
if (this.secure && netscape && netscape.security.PrivilegeManager.enablePrivilege)
{
netscape.security.PrivilegeManager.enablePrivilege(’UniversalBrowserRead’);
}
}
catch (err){}
this.req.open(method,url,true);
if (contentType)
{
this.req.setRequestHeader(’Content-Type’, contentType);
}
if (headers)
{
for (var h in headers)
{
this.req.setRequestHeader(h,headers[h]);
}
}
var loader=this;
this.req.onreadystatechange = function()
{
loader.onReadyState.call(loader);
}
this.req.send(params);
}
catch (err)
{
this.onerror.call(this);
}
}
},

onReadyState: function()
{
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE)
{
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0)
{
try
{
if (this.secure && netscape && netscape.security.PrivilegeManager.enablePrivilege)
{
netscape.security.PrivilegeManager.enablePrivilege(’UniversalBrowserRead’);
}
}
catch (err){}
this.onload.call(this);
}
else
{
this.onerror.call(this);
}
}
},

defaultError: function()
{
alert(”Error al obtener los datos!\\nIntente generar de nuevo su busqueda.”);
/*alert( ”Error al obtener los datos!”
+”\\n\\nreadyState:”+this.req.readyState
+”\\nstatus: “+this.req.status
+”\\nheaders: “+this.req.getAllResponseHeaders()
);
*/
}
}


Ejemplo de uso:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8&<a class=\"numPost\" href=\"/foros/Ajax/33101-unir-dos-aplicaciones-de-ajax-en-un-sola-pagina#8243\">#8243</a>; />
<title>Peticiones ajax</title>
<script type=”text/javascript” src=”ajax.js”></script>
<script type=”text/javascript”>   
function getInformation()   
{      
 document.getElementById(’response’).innerHTML = “<div align=’center’>Cargando datos…</div>”;      
 var url = ‘myOtherPage.html’;      
 var agentes = new net.ContentLoader(url,CreateScript,null,”GET”,null);   
}   
function CreateScript()   
{         
 document.getElementById(’response’).innerHTML = this.req.responseText;   
}
</script>
</head>

<body>
<input type=”button” name=”button” id=”button” value=”Obtener pagina” onclick=”getInformation();” />
<div id=”response”>   </div>
</body>
</html>


Igual puedes hacer peticiones utilizando el metodo POST y enviando los parametros en la variable params de la clase, algo asi:

function getInformation()
{
document.getElementById(’response’).innerHTML = “<div align=’center’>Cargando datos…</div>”;
var url = ‘myOtherPage.html’;
var params = “id=”+id+”&othervar=”+othervar;
var agentes = new net.ContentLoader(url,CreateScript,params,”POST”,null);
}

SirChokolate.
Software Engineer Mr.
Sr. Datawarehouse & DataIntegration
Business Intelligence Consultant

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de panino

Nivel 6 (1498 posts)

* * * * * * *

34 Agradecimientos

#6 Offline panino 07 dic 08 0 personas consideran útil este post.
Chokolate, un par de críticas constructivas. En javascript no existen las clases sino las simulaciones de clases, ya que javascript no está basado en clases sino en prototipos. Por otro lado, para controlar el nivel de visibilidad, creo que es mejor usar un modelo como este cuando quiere simularse una clase:
var obj=(function(){
//métodos privados
var metodosPrivados={
//definición de métodos privados
}
return {
//definición de métodos públicos
}
})()

Otra cosa, al no nulificar onreadystatechange es muy frecuente producir memory leaks.
Finalmente, en el caso planteado por wilrocaul, bastan 2 simples funciones para hacer todo el trabajo de ajax:
Una para crear el objeto:

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;
        }    
    }    
}


Otra para hacer las peticiones y entregar el resultado:

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 ii in params){
        p+=\'&\'+ii+\'=\'+escape(params[ii]);    
    }
    H.send(p);
}


Con esas dos simples funciones, podría gestionar toda sus peticiones así:

document.getElementById(\'capa\').innerHTML=\'loading...\';
requestCallbackParam(\'algo.php\',function(t){document.getElementById(\'capa\').innerHTML=t;},{\'var1\':\'aa\',\'var2\':123});

www.disegnocentell.com.ar

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de Chokolate

Nivel 3 (209 posts)

* * * * * * *

25 Agradecimientos

#7 Offline Chokolate 07 dic 08 0 personas consideran útil este post.
Gracias, pequeño \"leak\" de mi parte con lo del onreadystatechange, se me fue desapercibido. Y con lo de las clases en Javascript, fue una manera de describirlo pude haber dicho objeto, instancia, prototipo, pseudoclase, etc. eleji clase y te doy toda la razón son prototipos en efecto, eso no tiene discusión alguna.

Sobre lo de la visibilidad lo maneje de esa manera por que aun no domino muy bien JSON, pero estoy en proceso.

Saludos.

SirChokolate.
Software Engineer Mr.
Sr. Datawarehouse & DataIntegration
Business Intelligence Consultant

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de wilrocaul

Nivel 1 (24 posts)

* * * * * * *

0 Agradecimientos

#8 Offline wilrocaul 09 dic 08 0 personas consideran útil este post.
Gracias por la ayuda aunque se fueron por otros lados.....Solucione colocando cada una de las aplicaciones dentro de otra funcion y las llamé finalmente dentro del evento windows.onload


window.onload = function() {
cargar_busqueda();
cargar_informacion();
}

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de panino

Nivel 6 (1498 posts)

* * * * * * *

34 Agradecimientos

#9 Offline panino 09 dic 08 0 personas consideran útil este post.
Bueno, me cito:
"... y si estás usando el onload de window de esa manera, en realidad la segunda vez sobreescribís la primera."

En realidad, te sugiero que en vez de eso que terminaste haciendo te acostumbres a usar la función de Simon Willison:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != \'function\') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(cargar_busqueda);
addLoadEvent(cargar_informacion);

www.disegnocentell.com.ar

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de wilrocaul

Nivel 1 (24 posts)

* * * * * * *

0 Agradecimientos

#10 Offline wilrocaul 09 dic 08 0 personas consideran útil este post.
Gracias por la sugerencia la coloque en el código también pero porfavor me podrías ayudar con más información referente a esta función que no entiendo muy bien sus bondades.....O algún enlace para revisar más información

Muchas gracias

Re: Unir dos aplicaciones de ajax en un sola pagina

Avatar de panino

Nivel 6 (1498 posts)

* * * * * * *

34 Agradecimientos

#11 Offline panino 09 dic 08 0 personas consideran útil este post.
Este es uno de los enlaces: http://simonwillison.net/2004/May/26/addLoadEvent/
También está considerada una de las mejores 10 funciones creadas en javascript: http://www.dustindiaz.com/top-ten-javascript/
La ventaja que tiene es que hace más escalable tu proyecto, ya que si en alguna oportunidad ya usaste un window.onload, como ya pudiste ver, en varios navegadores sucede que el último escrito sobreescribe al primero produciendo resultados inesperados. En cambio, si en tu core javascript declarás esa función, siempre que necesites que algo suceda en el onload de tus páginas, podés llamarla sin preocuparte si ya existe un onload o no. En proyectos pequeños puede ser innecesario, pero a medidad que tu proyecto crece siempre hay que usar ayudas o mecanismos que hagan que todo funcione sin revisar lo que ya está hecho (lo que normalmente se llama trabajo modular). Es por eso que conviene usar esta función, y, como te decía antes, empezar a olvidarse de las variables globales, ya que no es posible recordarlas a todas y estar seguro de no generar conflictos de funcionamiento, más allá de cosas que no deberían pasar pero pasan, como que para explorer el valor de ciertos atributos html se convierten por defecto en variables globales.

www.disegnocentell.com.ar

Responder mensaje

Para poder participar debes ser un usuario registrado de PHP-Hispano. :: Deseo darme de alta en esta comunidad ::
Login / Password   

php-hispano.net 2002 - 2013 | XHTML 1.0
Datos Legales | Webmaster