elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  [SOLUCIONADO] Problema para procesar datos en AJAX !!		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [SOLUCIONADO] Problema para procesar datos en AJAX !!  (Leído 5,423 veces)
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
[SOLUCIONADO] Problema para procesar datos en AJAX !!
« en: 26 Julio 2008, 04:21 am »
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:

Código
  1. <html>
  2. 	<head>
  3. 	<title>Carter System :: Sistema para Control de Cliente</title>
  4. 	<link rel="stylesheet" type="text/css" href="css/estilos.css">
  5. 	<script language="javascript" type="text/javascript" src="js/script.js"></script>
  6. 	</head>
  7.  
  8. 	<body>
  9. 	<?php
  10. 	//division principal de toda la hoja
  11. 	echo "<div id=\"principal\">";
  12. 		echo "<div id=\"tag_sistema\">";
  13. 		echo ":: Carte v1.0 - Sistema para Control de Clientes.";
  14. 		echo "</div>";
  15. 		echo "<div id=\"menu_controles\">";
  16. 			echo "<a href=\"javascript:cargar_datos( '". $_SERVER['HTTP_HOST']. "/~diabliyo/index.php?id=inicio', 'area_work', 'menu_controles' );\">Inicio</a> | ";
  17. 			echo "<a href=\"javascript:cargar_datos();\">Clientes</a> | ";
  18. 			echo "Deudores | ";
  19. 			echo "Acredores | ";
  20. 			echo "Salir";
  21. 		echo "</div>";
  22. 		echo "<div id=\"recuadro_mensajes\"></div>";
  23.  
  24. 		echo "<div id=\"area_work\">";
  25. 		switch( $_GET["id"] )
  26. 			{
  27. 			case 'inicio';
  28. 				echo "Hola que onda";
  29. 				break;
  30. 			}
  31. 		echo "</div>";
  32. 	echo "</div>";
  33. 	?>
  34. 	</body>
  35. </html>

Codigo del script.js

Código
  1. function ajax()
  2. 	{
  3. 	var pagina=false; //conector ajax
  4.  
  5. 	if( window.XMLHttpRequest ) //Navegador Firefox
  6. 		pagina= new XMLHttpRequest(); //creamos objeto para el navegador
  7. 	else if( window.ActiveXObject ) //Navegador Internet Explorer
  8. 		{
  9. 		try //Version Actual
  10. 			{
  11. 			pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador
  12. 			}
  13. 		catch(e) //version Antigua
  14. 			{
  15. 			try
  16. 				{
  17. 				pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador
  18. 				}
  19. 			catch(e)
  20. 				{
  21. 				}
  22. 			}
  23. 		}
  24.  
  25. 	return pagina;
  26. 	}
  27.  
  28. function cargar_datos( url, capadatos, capaconsola )
  29. 	{
  30. 	var control, msg_datos, msg_consola;
  31.  
  32. 	msg_datos= document.getElementById(capadatos);
  33. 	msg_consola= document.getElementById(capaconsola);
  34.  
  35. 	control= ajax(); //creamos conector
  36. 	control.open( "GET", url );
  37. 	control.onreadystatechange= function()
  38. 		{
  39. 		if( control.readyState==1 )
  40. 			{
  41. 			msg_consola.innerHTML= "Estamos procesando su peticion...";
  42. 			msg_datos.innerHTML= "Cargando...";
  43. 			}
  44. 		else if( control.readyState==4 )
  45. 			{
  46. 			if( control.status==200 )
  47. 				msg_datos.innerHTML= control.responseText;
  48. 			}
  49. 		}
  50.  
  51. 	control.send(url);
  52. 	}
« Última modificación: 14 Agosto 2008, 01:00 am por Diabliyo » En línea
jguillen

Desconectado Desconectado

Mensajes: 23

Cada dia aprendo algo nuevo...


Ver Perfil
Re: Problema para procesar datos en AJAX !!
« Respuesta #1 en: 26 Julio 2008, 18:11 pm »
mira.. y tu no kieres usar prototype.js es muy util para manejar AJAX ..!
En línea
alone-in-the-chat


Desconectado Desconectado

Mensajes: 587


Ver Perfil
Re: Problema para procesar datos en AJAX !!
« Respuesta #2 en: 30 Julio 2008, 17:01 pm »
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=inicio

o 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 Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Problema para procesar datos en AJAX !!
« Respuesta #3 en: 31 Julio 2008, 02:46 am »
Cita de: alone-in-the-chat en 30 Julio 2008, 17:01 pm
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=inicio

o 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:

Código:
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 Desconectado

Mensajes: 587


Ver Perfil
Re: Problema para procesar datos en AJAX !!
« Respuesta #4 en: 31 Julio 2008, 03:07 am »
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 Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Problema para procesar datos en AJAX !!
« Respuesta #5 en: 31 Julio 2008, 03:34 am »
Cita de: alone-in-the-chat en 31 Julio 2008, 03:07 am
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:

Código:
<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 ???



Cita de: alone-in-the-chat en 31 Julio 2008, 03:07 am
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 Desconectado

Mensajes: 587


Ver Perfil
Re: Problema para procesar datos en AJAX !!
« Respuesta #6 en: 31 Julio 2008, 17:04 pm »
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.

Código
  1. <?php
  2. 	if( isset($_GET["muestra"]) && $_GET["muestra"]=1 )
  3. 	{
  4. 			echo "Mostrandome";
  5. 	}else{
  6. ?>
  8. 	<head>
  9. 	<title>Test javascript</title>
  10. 	<script language="javascript" type="text/javascript">
  11. 	function saludo()
  12. 		{
  13. 		alert('hola');
  14. 		}
  15.  
  16. 	function ajax()
  17. 		{
  18. 		var pagina=false; //conector ajax
  19.  
  20. 		if( window.XMLHttpRequest ) //Navegador Firefox
  21. 			pagina= new XMLHttpRequest(); //creamos objeto para el navegador
  22. 		else if( window.ActiveXObject ) //Navegador Internet Explorer
  23. 			{
  24. 			try //Version Actual
  25. 				{
  26. 				pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador
  27. 				}
  28. 			catch(e) //version Antigua
  29. 				{
  30. 				try
  31. 					{
  32. 					pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador
  33. 					}
  34. 				catch(e)
  35. 					{
  36. 					}
  37. 				}
  38. 			}
  39. 		return pagina;
  40. 		}
  41.  
  42. 	function enviar_datos( url, vars, capaview )
  43. 		{
  44. 		var conector, capa;
  45.  
  46. 		capa= document.getElementById(capaview);
  47. 		conector= ajax();
  48.  
  49. 		conector.open( "GET", url+'?'+vars, true );
  50. 		conector.onreadystatechange= function()
  51. 			{
  52. 			if( conector.readyState==1 )
  53. 				capa.innerHTML= "<center><img src='admin/imagenes/loading_04.gif'></center>";
  54. 			else if( conector.readyState==4 )
  55. 				{
  56. 				if( conector.status==200 )
  57. 					{
  58. 					capa.innerHTML= conector.responseText;
  59. 					}
  60. 				else if( conector.status==404 )
  61. 					{
  62. 					capa.innerHTML= "<h1>Pagina no encontrada...</h1>";
  63. 					}
  64. 				}
  65. 			}
  66. 		conector.send(null);
  67. 		}
  68. 	</script>
  69.  
  70. 	<style typ="text/css" rel="stylesheet">
  71. 	#contenedor_upload
  72. 		{
  73. 		margin:5px;padding:10px;
  74. 		border:solid gray 1px;
  75. 		width:250px;
  76. 		font-family:"sans-serif";font-size:10px;
  77. 		}
  78.  
  79. 	#miboton
  80. 		{
  81. 		margin:5px;
  82. 		}
  83. 	</style>
  84. 	</head>
  85.  
  86. 	<body>
  87. 	<?php
  88. 	echo "<a href=\"#\" onclick=\"enviar_datos( '123.php', 'muestra=1', 'contenedor_upload' );\">Click ME</a>";
  89.  
  90. 	echo "<br>";
  91. 	echo "<div id=\"contenedor_upload\">";
  92.  
  93. 	echo "</div>";
  94. 	?>
  95. 	</body>
  96. </html>
  97. <?php
  98. 	}
  99. ?>
  100.  


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 Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Problema para procesar datos en AJAX !!
« Respuesta #7 en: 14 Agosto 2008, 01:02 am »
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 :D !!...

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
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
AJAX control toolkit en ASP.NET
.NET (C#, VB.NET, ASP) 		Sauruxum 5 10,346 Último mensaje 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,521 Último mensaje 25 Mayo 2011, 17:28 pm
por KateLibby
Problema con actualización de datos [Solucionado]
.NET (C#, VB.NET, ASP) 		darknlee 1 2,117 Último mensaje 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,434 Último mensaje 4 Diciembre 2014, 22:36 pm
por harry_the_blogger
(Solucionado) Problema con data de Ajax
Desarrollo Web 		AlbertoBSD 2 1,740 Último mensaje 8 Diciembre 2018, 18:23 pm
por AlbertoBSD
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines