Autor
|
Tema: [SOLUCIONADO] Problema para procesar datos en AJAX !! (Leído 5,386 veces)
|
Diabliyo
Desconectado
Mensajes: 1.441
shell# _
|
Cambiando un poco, estuve replanteando un pequeno ejemplo para aprender un poco mas sobre el manejo y la logica de AJAX, porfavor alguien puede explicarme el porque del siguiente problema: Porque al pusar cualquier opcion del menu horizontal se queda escrito en la pagina los mensajes de: " Estamos procesando su peticion..." y " Cargando..." y jamas se muestra la informacion que quiero :S ??... Codigo de index.php: <html> <head> <title>Carter System :: Sistema para Control de Cliente</title> <link rel="stylesheet" type="text/css" href="css/estilos.css"> <script language="javascript" type="text/javascript" src="js/script.js"></script> </head> <body> <?php //division principal de toda la hoja echo "<div id=\"principal\">"; echo "<div id=\"tag_sistema\">"; echo ":: Carte v1.0 - Sistema para Control de Clientes."; echo "</div>"; echo "<div id=\"menu_controles\">"; echo "<a href=\"javascript:cargar_datos( '". $_SERVER['HTTP_HOST']. "/~diabliyo/index.php?id=inicio', 'area_work', 'menu_controles' );\">Inicio</a> | "; echo "<a href=\"javascript:cargar_datos();\">Clientes</a> | "; echo "Deudores | "; echo "Acredores | "; echo "Salir"; echo "</div>"; echo "<div id=\"recuadro_mensajes\"></div>"; echo "<div id=\"area_work\">"; switch( $_GET["id"] ) { case 'inicio'; echo "Hola que onda"; break; } echo "</div>"; echo "</div>"; ?> </body> </html>
Codigo del script.jsfunction ajax() { var pagina=false; //conector ajax if( window.XMLHttpRequest ) //Navegador Firefox pagina= new XMLHttpRequest(); //creamos objeto para el navegador else if( window.ActiveXObject ) //Navegador Internet Explorer { try //Version Actual { pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador } catch(e) //version Antigua { try { pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador } catch(e) { } } } return pagina; } function cargar_datos( url, capadatos, capaconsola ) { var control, msg_datos, msg_consola; msg_datos= document.getElementById(capadatos); msg_consola= document.getElementById(capaconsola); control= ajax(); //creamos conector control.open( "GET", url ); control.onreadystatechange= function() { if( control.readyState==1 ) { msg_consola.innerHTML= "Estamos procesando su peticion..."; msg_datos.innerHTML= "Cargando..."; } else if( control.readyState==4 ) { if( control.status==200 ) msg_datos.innerHTML= control.responseText; } } control.send(url); }
|
|
« Última modificación: 14 Agosto 2008, 01:00 am por Diabliyo »
|
En línea
|
|
|
|
jguillen
Desconectado
Mensajes: 23
Cada dia aprendo algo nuevo...
|
mira.. y tu no kieres usar prototype.js es muy util para manejar AJAX ..!
|
|
|
En línea
|
|
|
|
alone-in-the-chat
Desconectado
Mensajes: 587
|
Disculpa la demora. En esta parte \"javascript:cargar_datos( '". $_SERVER['HTTP_HOST']. "/~diabliyo/index.php?id=inicio' estas generando una ruta la ruta que generas es de este tipo localhost/~diabliyo/index.php?id=inicio la ruta deberia de ser asi http://localhost/~diabliyo/index.php?id=inicioo en su defecto /index.php?id=inicio se queda en estado cargando por el hecho de que nunca llega a encontrar la ruta que le pasas como parametro. Saludos¡¡
|
|
|
En línea
|
Because maybe You're gonna be the one that saves me And after all You're my wonderwall d[n_n]b
|
|
|
Diabliyo
Desconectado
Mensajes: 1.441
shell# _
|
Disculpa la demora. En esta parte \"javascript:cargar_datos( '". $_SERVER['HTTP_HOST']. "/~diabliyo/index.php?id=inicio' estas generando una ruta la ruta que generas es de este tipo localhost/~diabliyo/index.php?id=inicio la ruta deberia de ser asi http://localhost/~diabliyo/index.php?id=inicioo en su defecto /index.php?id=inicio se queda en estado cargando por el hecho de que nunca llega a encontrar la ruta que le pasas como parametro. Saludos¡¡ Asi es tienes toda la razon, ya he avanzado un poco en el codigo, pero me queda una duda que si me encantaria me pudieran contestar, no es tanto de codigo, sino para comprencion del uso de AJAX. La pregunta es la siguiente: Por lo genera en ejemplos de internet siempre he visto que utilizan ajax con la particularidad que en la parte de ajax.open();, el segundo parametro (de los tres que debe llevar), siempre es una hoja/pagina dierente a la hoja/pagina desde donde se esta procesando o activando la funcion ajax, a caso ajax no puede no se puede implementar para que se use la misma hoja/pagina ???... Un poco mas explicado seria: estamos en la pagina index.php, y en esta tenermos 3 botones y una area donde mostraremos "algo" por cada boton pulsado, en esta parte tenemos una DIV ID=CONTENIDO, asi que a cada boton le ponemos algo asi onclick=mi_funcion_cargar_datos( vars ), pero esta funcion por lo general en muchos ejemplos de internet hacen esto en cierta parte del codigo: function mi_funcion_cargar_datos( vars ) { var conector, capa;
capa.getElementById('contenido'); //capa conector= ajax(); //obtenemos objeto conector.open( "GET", 'contenidos.php?'+vars, true ); //a caso, no se puede interactuar con la misma INDEX.php ?? conector.onreadystatechange= function() { if( conector.readyState==1 ) capa.innerHTML= "Cargando..."; else if( conector.readyState==4 ) { if( conector.status==200 ) capa.innerHTML= conector.responseText; else if( conector.status==404 ) capa.innerHTML= "Pagina no encontrada..."; else capa.innerHTML= "ERROR: ".conector.status; } } conector.send(null); } Oviamente si en la parte de conector.open() pusiese la hoja index.php, entonces se volveria a cargar todo el contenido nuevamente dentro del DIV CONETENIDO, pero, no se puede hacer algo, o alguna solucion para no usar siempre forosamente una segunda hoja/pagina ??.. Porque, si lo comparamos con el sistema de Gmail, los enlaces (links, <a>), no aparecen con la etiqueta de javascript:funcion(), ni mucho menos con eventos onclick=algo().... Aparte me intriga como poder siempre estar checando cierta hoja o archivo, ya que si volvemos a compararlo con el sistema de Gmail cuando nos llega un mail nuevo, o nos responden a un correo que estamos leyendo, en ese mismo instante el sistema de correo nos avisa de un correo nuevo, aparte, si estamos observando la bandeja de correo y en ese instante llega un mail, inmediatamente se posiciona y podemos ver el nuevo correo sin necesidad de actualizar la bandeja de correos :S !!... Alguien tiene alguna explicacion o respuesta para mi ?? Gracias de antemano !!....
|
|
|
En línea
|
|
|
|
alone-in-the-chat
Desconectado
Mensajes: 587
|
De poder usar el mismo achivo puedes. Osea desde index.php puedes llamar mediante ajax a index.php
Lo que debes de controlar es la salida que envias al explorador , ajax regresa en
responseText
toda lo que se le envia al explorador .
te carga todo nuevamente por que en tu ejemplo el archivo index.php envia al browser sin ningun tipo de validacion , contenido html , pero si tu validaras que se enviara ese contenido solamente cuando no es una peticion ajax , no tendria por que regresarte lo demas .
Por ejemplo
si no es peticion ajax muestra todo sino si es ajax muestra solamente esto.
Algo por el estilo , como ve si es una peticion ajax o no , pues enviando parametros por post o get , ya queda en el metodo que quieras usar.
Por otro lado , creo que gmail usa las funciones settimeout y setinterval , no puedo asegurar eso , pero creo que es lo mas seguro , ejecutan la consulta al servidor cada cierto lapso de tiempo.
Saludos¡¡
|
|
|
En línea
|
Because maybe You're gonna be the one that saves me And after all You're my wonderwall d[n_n]b
|
|
|
Diabliyo
Desconectado
Mensajes: 1.441
shell# _
|
De poder usar el mismo achivo puedes. Osea desde index.php puedes llamar mediante ajax a index.php
Lo que debes de controlar es la salida que envias al explorador , ajax regresa en
responseText
toda lo que se le envia al explorador .
te carga todo nuevamente por que en tu ejemplo el archivo index.php envia al browser sin ningun tipo de validacion , contenido html , pero si tu validaras que se enviara ese contenido solamente cuando no es una peticion ajax , no tendria por que regresarte lo demas .
Por ejemplo
si no es peticion ajax muestra todo sino si es ajax muestra solamente esto.
Algo por el estilo , como ve si es una peticion ajax o no , pues enviando parametros por post o get , ya queda en el metodo que quieras usar. Bueno, sera que no la capto bien yo, o no me explique adecuadamente :S, en fin, voy a poner un pequenito ejemplo: <html> <head> <title>Test javascript</title> <script language="javascript" type="text/javascript"> function saludo() { alert('hola'); } function ajax() { var pagina=false; //conector ajax if( window.XMLHttpRequest ) //Navegador Firefox pagina= new XMLHttpRequest(); //creamos objeto para el navegador else if( window.ActiveXObject ) //Navegador Internet Explorer { try //Version Actual { pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador } catch(e) //version Antigua { try { pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador } catch(e) { } } } return pagina; }
function enviar_datos( url, vars, capaview ) { var conector, capa;
capa= document.getElementById(capaview); conector= ajax(); conector.open( "GET", url+'?'+vars, true ); conector.onreadystatechange= function() { if( conector.readyState==1 ) capa.innerHTML= "<center><img src='admin/imagenes/loading_04.gif'></center>"; else if( conector.readyState==4 ) { if( conector.status==200 ) { capa.innerHTML= conector.responseText; } else if( conector.status==404 ) { capa.innerHTML= "<h1>Pagina no encontrada...</h1>"; } } } conector.send(null); } </script> <style typ="text/css" rel="stylesheet"> #contenedor_upload { margin:5px;padding:10px; border:solid gray 1px; width:250px; font-family:"sans-serif";font-size:10px; } #miboton { margin:5px; } </style> </head> <body> <?php echo "<a href=\"#\" onclick=\"enviar_datos( '123.php', 'muestra=1', 'contenedor_upload' );\">Click ME</a>"; echo "<br>"; echo "<div id=\"contenedor_upload\">"; if( isset($_GET["muestra"]) && $_GET["muestra"]=1 ) echo "Mostrandome"; echo "</div>"; ?> </body> </html> Si le doy click en: CLICK ME, me aparece todo el contenido de la hoja 123.php dentro del DIV CONTENEDOR_UPLOAD, y eso es lo que no quiero, porque aparti de aqui me siento forzado a usar una segunda pagina para poder tratar las respuesras de la hoja 123.php, seria posible mostrar el mensaje de "Mostrandome" dentro de la DIV din imprimirse otra vez CLICK ME ??? Por otro lado , creo que gmail usa las funciones settimeout y setinterval , no puedo asegurar eso , pero creo que es lo mas seguro , ejecutan la consulta al servidor cada cierto lapso de tiempo. Pues talvez, pero una ves resuelva la duda de arriba, buscare como hacerlo como google, pero... las funciones settimeout y setinterval son funciones que se utilizan en javascript ???, porque solo las conozco para PHP !!...
|
|
« Última modificación: 31 Julio 2008, 03:39 am por Diabliyo »
|
En línea
|
|
|
|
alone-in-the-chat
Desconectado
Mensajes: 587
|
X) Disculpa d nuevo la demora bueno me tome la libertad de modificar tu codigo solo un poquito para que haga lo que tu quieres y creo que un ejemplo explica mejor las cosas asi que estoy seguro que una vez lo veas comprenderas como debe ir la cosa. <?php if( isset($_GET["muestra"]) && $_GET["muestra"]=1 ) { echo "Mostrandome"; }else{ ?> <script language="javascript" type="text/javascript"> function saludo() { alert('hola'); } function ajax() { var pagina=false; //conector ajax if( window.XMLHttpRequest ) //Navegador Firefox pagina= new XMLHttpRequest(); //creamos objeto para el navegador else if( window.ActiveXObject ) //Navegador Internet Explorer { try //Version Actual { pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador } catch(e) //version Antigua { try { pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador } catch(e) { } } } return pagina; } function enviar_datos( url, vars, capaview ) { var conector, capa; capa= document.getElementById(capaview); conector= ajax(); conector.open( "GET", url+'?'+vars, true ); conector.onreadystatechange= function() { if( conector.readyState==1 ) capa.innerHTML= " <center><img src='admin/imagenes/loading_04.gif'></center>"; else if( conector.readyState==4 ) { if( conector.status==200 ) { capa.innerHTML= conector.responseText; } else if( conector.status==404 ) { capa.innerHTML= " <h1>Pagina no encontrada... </h1>"; } } } conector.send(null); } <style typ="text/css" rel="stylesheet"> #contenedor_upload { margin:5px;padding:10px; border:solid gray 1px; width:250px; font-family:"sans-serif";font-size:10px; } #miboton { margin:5px; } <?php echo "<a href=\"#\" onclick=\"enviar_datos( '123.php', 'muestra=1', 'contenedor_upload' );\">Click ME </a>"; echo " <div id=\"contenedor_upload\">"; ?> <?php } ?>
Y si las funciones esas son de javascript X) lo que si no sabia es fuesen propias de php. Saludos¡¡¡
|
|
|
En línea
|
Because maybe You're gonna be the one that saves me And after all You're my wonderwall d[n_n]b
|
|
|
Diabliyo
Desconectado
Mensajes: 1.441
shell# _
|
Hola: Como solucion, opte mejor por usar un archivo PHP especiamente para procesar todas las peticiones de AJAX, el cual llame AJAX.PHP, de manera que todas las peticiones las envio a ese archivo y hago todo !!... Como consejo, ya si no quieren hacer muy grande el archivo, solamente incluyan otros archivos para que AJAX.PHP sea solo como la estructura.... gracias por todo...
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
AJAX control toolkit en ASP.NET
.NET (C#, VB.NET, ASP)
|
Sauruxum
|
5
|
10,304
|
24 Diciembre 2010, 17:41 pm
por [D4N93R]
|
|
|
Re: Problema con Ajax e Internet Explorer (sólo en el servidor) [Solucionado]
PHP
|
KateLibby
|
9
|
9,474
|
25 Mayo 2011, 17:28 pm
por KateLibby
|
|
|
Problema con actualización de datos [Solucionado]
.NET (C#, VB.NET, ASP)
|
darknlee
|
1
|
2,095
|
22 Enero 2014, 19:26 pm
por darknlee
|
|
|
No puedo procesar datos recibidos de socket como un bloque
Programación C/C++
|
harry_the_blogger
|
2
|
2,398
|
4 Diciembre 2014, 22:36 pm
por harry_the_blogger
|
|
|
(Solucionado) Problema con data de Ajax
Desarrollo Web
|
AlbertoBSD
|
2
|
1,683
|
8 Diciembre 2018, 18:23 pm
por AlbertoBSD
|
|