Autor
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:
<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>
En línea
