Aprendiendo AJAX con PHP!!

Diabliyo · 25 Julio 2008, 20:25 PM

Hola:

Pues tengo solo unas 3 o 4 horas leyendo y testeando con AJAX para implementarlo en un sistema personal web, de entrada para probar mis conocimientos me platie un objetivo muy simple:

1- Crear una pagina con un formulario, que contenga un INPUT TEXT y un INPUT SUBMIT
2- Escribir algo en el INPUT TEXT y pulsar el INPUT SUBMIT.
3- Que ajax lo procese y escriba algo
4- Si el INPUT TEXT esta vacio que escriba "Escribe algo en la cajita";
5- Si el INPUT TEXT tiene algo, pues que escriba en la pagina lo que el usuario escribio.

Es todo, para esto escribi el code y no me funciona del todo :S, vaya, aun me siento un poco revuelto y no comprendo porque lo unico que hace es poner el texto "Cargando..." y desaparece, pero esto sucede en cuestion de segundos (1 segundos para ser exacto), como quien dice, muy apenas alcanzo a ver el texto de "Cargando", pero jamas logro que se escriba el texto que se introdujo en la cajita INPUT TEXT :S !!...

Por favor ayudenme a re-acomodar mis conocimientos y resolver mis errores que tenga el codigo... Aqui dejo el code:

Utilizo Firefox 3.0

Código [Seleccionar]

<html>
	<head>
	<title>Test javascript</title>
	<script language="javascript" type="text/javascript">
	<!--
	function saludos()
		{
		alert( "hola" );
		}
		
	function ajax()
		{
		var pagina=false; //conector ajax
		var contenedor_style;
	
		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()
		{
		var conector, capa;
		
		conector= ajax();
		capa= document.getElementById('contenedor_upload');
		
		conector.open( "POST", document.forms.miformulario.dato, true );
		conector.onreadystatechange= function()
			{
			if( conector.readyState==1 )
				capa.innerHTML= "Cargando...";
			else if( conector.readyState==4 )
				{
				if( conector.state==200 )
					capa.innerHTML= "listo...";
				}
			}
		if(document.forms.miformulario.dato)
			{
			conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
			conector.send(document.forms.miformulario.dato);
			}
		else
			conector.send(null);
		}
	//-->
	</script>
	
	<style typ="text/css" rel="stylesheet">
	<!--
	#contenedor_upload
		{
		margin:auto;
		//margin-bottom:4px;
		//padding:3px;
		width:250px;
		//background-color:lightblue;
		//border:solid #33ccff 1px;
		font-family:"sans-serif";font-size:10px;
		}
	//-->
	</style>
	</head>
	
	<body>
	<?php
	echo "Hola";
	echo "<p>";
		echo "<form method=\"POST\"  name=\"miformulario\">";
			echo "<input type=\"text\" name=\"dato\">";
			echo "<input type=\"submit\" value=\"Enviar\" onclick=\"enviar_datos();\">";
		echo "</form>";
	
	echo "<p>";
	echo "<div id=\"contenedor_upload\">";
		//echo "sección de Carga";
	echo "</div>";	
	echo "</p>";
	?>
	</body>
</html>

alone-in-the-chat · 25 Julio 2008, 23:54 PM

conector.open( "POST", document.forms.miformulario.dato, true );

la funcion open recibe como segundo parametro una URL .

por ejemplo

conector.open( "POST", "/procesar.php", true );

if( conector.readyState==1 )
eso indica que esta intentando conectar

conector.state==200

El estado llega a 200 cuando ah terminado de ejecutar satisfactoriamente.

Hay un error de concepto en este caso , ajax se usa para dar mayor dinamismo a una pagina , digamos que tengo un formulario de ingreso de clientes donde debo elegir una ciudad para el cliente , para ello primero eliges el pais , en base a ese pais debes mostrarle el combo con las ciudades , con ajax no tendrias por que recargar la pagina para generar ese combo con las ciudades , lo que tendrias que hacer es coger el id del pais que eliges en el combo , usando ajax enviarselo al script que desees que procese ese dato (ese es el segundo parametro del metodo open), y este(el script) debe darte una respuesta o salida , que deben ser las ciudades para ese pais .

Ademas veo que intentas ejecutar el ajax al momento de enviar el formulario con el boton submit , no creo que eso llegue a funcionar (nunca lo eh probado).

Si no quieres liarte mucho puedes usar unas librerias javascript que te pueden aligerar el trabajo , la que mas me gusta es Jquery.

Aqui tienes una pagina con la documentacion .

http://visualjquery.com/index.xml

Aqui te coloco un pequeño codigo de ejemplo de uso de ajax simple , mas o menos asi deberia ir el ejemplo de las ciudades.

Código (javascript) [Seleccionar]


function getCity()
{
    var obj = document.getElementById("paises");
    var valor = obj.options[obj.selectedIndex].value;
    var ajax;
    ajax = new objetus();//creo el objeto XhtmlHttp
    var _values_send = "idpais=" + valor;
    var _URL_ =  "estados.php";
    ajax.open("POST", _URL_, true);
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 1) {
        }
        else 
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    alert(ajax.responseText);
                }
            }
    }
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send(_values_send);
    delete (ajax);
}

Usando jquery eso seria mucho mas sencillo.

Saludos¡¡¡

Diabliyo · 26 Julio 2008, 00:09 AM

Gracias por contestar alone-in-the-chat, crei que nadie hiva a decir algo jejeje...

Pero bueno, lo que sucede es que talvez el ejemplo que use al principio fue un poco malo para ti, pero la finalidad de todo esto es poder realizarme un Uploader, para subir archivos a mi servidor, ya que usando puro PHP esto es un poco tedioso debido a las restricciones en el tiempo de ejecucion de scripts que se permite, vaya, si el archivo pesa mucho y el script lleva a su tiempo de ejecucion limite, pues el proceso no se termina (no se sube el archivo). Este haciendolo cambiando los tiempo de restriccion con algunas funciones, pero la vdd no me parecio muy transparente y mucho menos factible.

La idea es esa, hacer un Uploader simple con AJAX, asi que te pongo un codigo que estoy haciendo de EJEMPLO, pero la verdad no doy una, ni si quiera consigo que se escriba algo en la pagina, ni mucho menos subir el file :S, porfavor echale un ojo a esto:

Código (php) [Seleccionar]

<html>
	<head>
	<title>Test javascript</title>
	<script language="javascript" type="text/javascript">
	<!--
	function ajax()
		{
		var pagina=false; //conector ajax
		var contenedor_style;
	
		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()
		{
		var conector, capa, archivo;
		
		conector= ajax();
		capa= document.getElementById('contenedor_upload');
		archivo= document.getElementById('miarchivo');
		
		conector.open( "POST", "123.php?subir=1", true );
		conector.onreadystatechange= function()
			{
			if( conector.readyState==1 )
				capa.innerHTML= "Cargando...";
			else if( conector.readyState==4 )
				{
				if( conector.status==200 )
					capa.innerHTML= "listo...";
				}
			}
		conector.send(null); //como aun no se tratar el archivo, envio NULL porque no se que enviar jejeje
		//conector.setRequestHeader( "Content-type", "multipart/form-data" );
		//conector.setRequestHeader( "Connection", "close" );
		//conector.setRequestHeader( "Content-length", buffer.length );
		}
	//-->
	</script>
	
	<style typ="text/css" rel="stylesheet">
	<!--
	#contenedor_upload
		{
		margin:auto;
		//margin-bottom:4px;
		//padding:3px;
		width:250px;
		//background-color:lightblue;
		//border:solid #33ccff 1px;
		font-family:"sans-serif";font-size:10px;
		}
		
	#miboton
		{
		margin:5px;
		}
	//-->
	</style>
	</head>
	
	<body>
	<?php
	echo "Hola";
	echo "<p>";
		echo "<form method=\"POST\"  id=\"miformulario\" enctype=\"multipart/form-data\">";
			echo "<input type=\"file\" id=\"miarchivo\"><br>";
			echo "<input type=\"submit\" value=\"Enviar\" id=\"miboton\" onclick=\"enviar_datos();\">";
		echo "</form>";
	
	echo "<p>";
	echo "<div id=\"contenedor_upload\">";
		//echo "sección de Carga";
	echo "</div>";
		
	if( $_GET["subir"]==1 )
		echo "<p>Ya podemos llegar aqui xD, aleluya !!..</p>";
	echo "</p>";
	?>
	</body>
</html>

alone-in-the-chat · 26 Julio 2008, 00:20 AM

Ok
segun entiendo intentas hacer como gmail para adjuntar archivos al correo.

La vdd no se si usaran ellos ajax pero una vez me vi en la necesidad de hacer eso, al final no use ajax , lo que hice fue apuntar el atributo target del formulario aun iframe oculto , y este se encargo de subir el archivo sin necesidad .

El problema es que al enviar el formulario debes necesariamente recargar la pagina si es que no has seteado el atributo target del formulario , ello hace que ajax no tenga sentido en estos casos por que justamente ajax se usa para evitar la recarga de la pagina.

Por eso me decidi ah emplear lo que te dije lineas arriba.

En esta misma sección se pregunto sobre eso no hace mucho , me parece.

Saludos¡¡

Diabliyo · 26 Julio 2008, 04:22 AM

Bueno en fin, entonces usare la manera anterior, cambiando los tiempo de ejecucion de script mediante funciones hasta subir el archivo jejeje...

Porfavor puedes leer el siguiente post que es sobre el procesamiento de datos en AJAX:

POST: http://foro.elhacker.net/php/problema_para_procesar_datos_en_ajax-t221917.0.html

Test Foro de elhacker.net SMF 2.1

Aprendiendo AJAX con PHP!!

Diabliyo

alone-in-the-chat

Diabliyo

alone-in-the-chat

Diabliyo