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.js
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);
}
mira.. y tu no kieres usar prototype.js es muy util para manejar AJAX ..!
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¡¡
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:
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 !!....
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¡¡
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:
<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 !!...
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{
?>
<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¡¡¡
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...