Formulario ajax y php en tiempo real

Actualizado el domingo, 19 junio, 2016

Ajax no es una tecnología en sí, más bien es un conjunto combinado con las cuales podemos obtener efectos muy potentes para nuestras aplicaciones web. Ajax a pesar de ser una tecnología muy fácil de aprender requiere de un amplio conocimiento en los lenguajes de programación web básica como son php, javaScript,xml,Dhtml entre otros. Vamos a crear un formulario con ajax y php que nos envié una información y dicha información la vamos a manipular a nuestro gusto para obtenerla del servidor en tiempo real o sea al mismo tiempo que presiones el botón para enviar la información y lo mejor de todo sin recargar la pagina.

Index.php

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Formulario con ajax</title>
<script language="javascript" src="ajax.js">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>Formulario con ajax</h1><br />
    <div id="texto"></div><br /><a href="#" onClick="pasarNumeros()">Ver comentarios</a></div>
    <br />
    <br />
    <form name="form1">
    <textarea name="contenido" cols="30" rows="4" ></textarea><br /><br />
    <input type="button" value="Procesar" onClick="pasarNumeros()" />
    </form>   
</body>
</html>

Hemos creado una estructura en html y enlazado un documento llamado ajax.js y una hoja de estilo llamada style.css. También creamos un formulario y lo controlamos con un evento a lanzar cuando se presione el botón.
Ajax.js
function pasarNumeros(){
        var conexion;
        if(window.XMLHttpRequest){
        conexion = new XMLHttpRequest();
        }else{
            conexion = new ActiveXOject("Microsoft.XMLHTTP");
            }           
            conexion.onreadystatechange = function(){
            if(conexion.readyState==3 && conexion.status==200){
            document.getElementById("texto").innerHTML=conexion.responseText;           
            }               
            }
            var datos= document.form1.contenido.value;
            conexion.open("GET",'datos.php?variable='+datos, true);
            conexion.send();
           
    }

Datos.php

<?php
$archivo = fopen('datos.txt', 'a');
fwrite($archivo, '<div id="comentarios">'
.$_GET['variable'].'<br /></div>');
include('datos.txt');
?>

Lo que hacemos ahora es crear un archivo txt que nos permita ir almacenando los datos que nos va a enviar el ,b>archivo ajax.js esta parte es opcional, también lo podemos ir guardando en una base de datos mysql.
Style.css
textarea{
border:solid 1px #999;
border-radius:5px;
resize:none;
padding:10px;
width:250px;
height:30px;
transition:all 1s;   
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
}
textarea:focus{
width:300px;
height:50px;
box-shadow:0 0 15px #999;
-moz-box-shadow:0 0 15px #999;
-o-box-shadow:0 0 15px #999;
-ms-box-shadow:0 0 15px #999;
-webkit-box-shadow:0 0 15px #999;
}
input{
width:100px;
padding:5px;
background:-moz-linear-gradient(#dadada 0%, #fff 100%);
background:-o-linear-gradient(#dadada 0%, #fff 100%);
background:-ms-linear-gradient(#dadada 0%, #fff 100%);
background:-webkit-linear-gradient(#dadada 0%, #fff 100%);
color:blue;
border:solid 1px #DADADA;
border-radius:5px;   
}
input:focus{
background:-moz-linear-gradient(#fff 0%,#dadada 100%);
background:-o-linear-gradient(#fff 0%, #dadada  100%);
background:-ms-linear-gradient(#fff 0%, #dadada  100%);
background:-webkit-linear-gradient(#fff 0%, #dadada  100%);   
color:red;
}
#comentarios{
width:300px;
border:solid 1px #DADADA;
border-radius:5px;
background:#f9f9f9;
color:#999;
padding:5px;
margin:5px auto;
text-align:justify;   
}
#texto{
width:350px;
border:solid 1px #DADADA;
border-radius:5px;   
margin:5px;
padding:5px;
}

Agregar comentario