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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></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

addEventListener('load',inicializarEventos,false);

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

function enviarDatos(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=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','pagina1.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
  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">';
  }
}

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=utf-8');
$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)

Problema resuelto.

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

pagina1.html

Ejecutar ejemplo

funciones.js

addEventListener('load',inicializarEventos,false);

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

function enviarDatos(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=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','pagina1.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
  conexion1.send(retornarDatos());  
}

pagina1.php

WEB TRANSLATOR

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

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

Problema resuelto.

Retornar

COMPÁRTELO:

Síguenos por RSS

Síguenos en las redes sociales

Mis cuentas sociales


Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías