Conceptos de Ajax

Hasta ahora mientras se actualiza la página mostramos un texto: 'Procesando...', es muy común utilizar un gif animado que represente tal operación.

Haremos una serie de páginas que nos permitan enviar los datos cargados en un formulario al servidor en forma asincrónica y mostraremos un gif animado mientras dura el envío de datos. El formulario solicitará que ingrese el nombre y sus comentarios.

pagina1.html

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Nombre:<input type="text" name="nombre" id="nombre" 
size="20"><br>
Comentarios:<br>
<textarea name="comentarios" id="comentarios" rows="10" 
cols="50"></textarea><br>
<input type="submit" value="Enviar" id="enviar">
<span id="resultados"></span><br>
<a href="comentarios.txt">Ver resultados</a>
</form>
</body>
</html>

Hemos dispuesto un elemento span donde insertaremos el gif animado. Utilizamos un span para que aparezca la imagen al lado del botón submit.

funciones.js

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ref=document.getElementById('formulario');
  addEvent(ref,'submit',enviarDatos,false);
}

function enviarDatos(e)
{
  if (window.event)
    window.event.returnValue=false;
  else
    if (e)
      e.preventDefault();
  enviarFormulario();
}


function retornarDatos()
{
  var cad='';
  var nom=document.getElementById('nombre').value;
  var com=document.getElementById('comentarios').value;
  cad='nombre='+encodeURIComponent(nom)+'&comentarios='+encodeURIComponent(com);
  return cad;
}

var conexion1;
function enviarFormulario() 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','pagina1.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos());  
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    if (conexion1.status==200)
      resultados.innerHTML = 'Gracias.';
    else
      alert(conexion1.statusText);
  } 
  else 
  {
    resultados.innerHTML = '<img src="../cargando.gif">';
  }
}



//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

Lo nuevo en este problema es:

    resultados.innerHTML = '<img src="../cargando.gif">';

Es decir insertamos una imagen dentro del elemento span. La imagen se encuentra en el directorio inmediatamente superior a donde se encuentra esta página (por eso disponemos ../ previo al nombre del archivo)

pagina1.html

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$ar=fopen("comentarios.txt","a") or
  die("No se pudo abrir el archivo");
fputs($ar,"Nombre:".$_REQUEST['nombre']."\n");
fputs($ar,"Comentarios:".$_REQUEST['comentarios']."\n\n");
fclose($ar);
sleep(1);
?>

En la página PHP grabamos en un archivo de texto los datos y mediante la función sleep detenemos la ejecución del programa en el servidor una determinada cantidad de segundos (esto para poder apreciar en el navegador el gif, en la realidad no hay que llamar a sleep)

13 - Mostrar un gif animado mientras se envían y reciben los datos del servidor.