[SOLUCIONADO] Problema para procesar datos en AJAX !!

Diabliyo · 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 (php) [Seleccionar]

<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.js

Código (javascript) [Seleccionar]

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

jguillen · 26 Julio 2008, 18:11 PM

mira.. y tu no kieres usar prototype.js es muy util para manejar AJAX ..!

alone-in-the-chat · 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¡¡

Diabliyo · 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 [Seleccionar]

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 !!....

alone-in-the-chat · 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¡¡

Diabliyo · 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 [Seleccionar]

<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 AMPor 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 !!...

alone-in-the-chat · 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 (html4strict) [Seleccionar]


<?php
	if( isset($_GET["muestra"]) && $_GET["muestra"]=1 )
	{
			echo "Mostrandome";
	}else{
?>
<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\">";
		
	echo "</div>";
	?>
	</body>
</html>
<?php
	}
?>

Y si las funciones esas son de javascript X) lo que si no sabia es fuesen propias de php.

Saludos¡¡¡

Diabliyo · 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

!!...

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...