Ejemplo Básico de Ajax (usando GET)

Es es un ejemplo bastante básico de Ajax, en donde vamos a obtener una breve descripción de los meses con solo darle el valor numero del mes, este ejemplo se pudo haber hecho con base de datos pero para efectos de tutorial usaré un archivo que responderá con un simple mensaje.

para Ajax solo se necesitan 2 Funciones, una que inicia el proceso y/o envía la solicitud y otra que cuando se recepcione los datos haga una acción especifica, siempre la función de «acción» será indicada en la función que «inicia». si deseas saber como hacerlo con jQuery este mismo tutorial aquí el enlace

Lo primero que necesitamos es una pagina que nos responda, para el tutorial será meses.php?num=x  donde X será el numero del mes que queremos consultar:

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_GET['num']==1)
  echo "<strong>Enero </strong>se deriva de <strong>Ianuarius</strong>, es decir, mes dedicado al viejo dios <em>Jano </em>(posiblemente de origen etrusco), símbolo del Sol y de la Luna y que tenía dos caras.";
if ($_GET['num']==2)
  echo "<strong>Febrero </strong>era el mes de la purificación, <em>Februus</em>, de <em>Februarius. </em>En su segunda quincena se celebraban las fiestas Lupercales, con solemnes purificaciones de los vivos y conmemoraciones de los difuntos.";
if ($_GET['num']==3)
  echo "<strong>Marzo </strong>estaba dedicado a <em>Marte</em>, el dios de la guerra (el antiguo Ares de los griegos), y en la primitiva Roma el año comenzaba precisamente este mes. No debe olvidarse que, según la tradición, Marte era el padre de Rómulo, fundador de la ciudad.";
if ($_GET['num']==4)
  echo "<strong>Abril </strong>es el mes en que se abre <em>Aprillis</em>, las fuerzas de la naturaleza para la evolución de los vegetales. Es el mes de la primavera, en la que la potencia genérica se abre con mayor intensidad en los hombres y mujeres.";
if ($_GET['num']==5)
  echo "<strong>Mayo </strong>conmemora a <em>Maia</em>, hija de Allante, madre de Mercurio y símbolo de la festividad de los cereales.";
if ($_GET['num']==6)
  echo "<strong>Junio</strong> es el mes al que se le atribuyen dos orígenes distintos, según unos descendía de <em>Juno</em>, la reina del Olimpo, espsa de Júpiter (de rotundas formas inmortalizadas por Rubens). Pero según otros el nombre procede de <em>Lucius Iunius Brutus</em>, quien capitaneó la revolución que destronó al último rey de Roma e instauró la República.";
if ($_GET['num']==7)
  echo "<strong>Julio</strong> está dedicado a <em>Iulius Caesar</em>, nacido de un parto difícil provocado por una operación, que aún se practica y por eso lleva su nombre (aunque debo advertir que esto es falso, pues la palabra cesárea viene del verbo <em>caedare</em>, cortar, y se ignora cómo nació Julio Cesar).";
if ($_GET['num']==8)
  echo "<strong>Agosto </strong>estaba dedicado a Cesar Octavio <em>Augusto</em>, primer emperador de Roma.";
if ($_GET['num']==9)
  echo "<strong>Septiembre </strong>procede de <em>septem</em>, es decir, siete porque era el séptimo mes cuando, como he comentado, el año empezaba en marzo.";
if ($_GET['num']==10)
  echo "<strong>Octubre, </strong>de <em>octo</em>, ocho.";
if ($_GET['num']==11)
  echo "<strong>Noviembre</strong>, de <em>novem</em>, o sea nueve.";
if ($_GET['num']==12)
  echo "<strong>Diciembre</strong>, de <em>decem</em>, diez, por las mismas razones apuntadas.";
?>

Ahora el Archivo AJAX que hará la consulta puede ser un simple HTML, pero si debe tener las 2 funciones de JavaScript que mencioné al inicio, puede ir dentro del mismo HTML o en un .js aparte, en mi caso haré una tercera función para que en caso el ActiveXObject para el Ajax no esté disponible, se usará el de JavaScript.

Antes de pasar al HTML principal voy a explicar las líneas de las funciones JavaScript que se usarán para nuestro ejemplo de AJAX

var conexion; //variable que manejará la conexión AJAX

function crearXMLHttpRequest()  //función que crea la conexión Ajax ya sea el ActiveXObject o el nativo de JavaScript si el primero no está disponible
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //creamos la conexión usando el ActiveXObject
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest(); //Creamos la conexión nativa de JavaScript 
  return xmlHttp;
}

function consultar(valor)
{
    conexion=crearXMLHttpRequest(); //Creamos el Objeto para manejar Ajax
    conexion.onreadystatechange = procesarEventos; //Indicamos que función ejecutar cuando se obtiene respuesta del servidor
    conexion.open('GET', 'meses.php?num=' + valor, true); //indicamos como vamos a enviar los datos, en este caso con el metodo GET al archivo meses.php?num= el valor que le indiquemos en el textbox
    conexion.send(null); //Enviamos los datos y esperamos respuesta
}

function procesarEventos()
{
  var detalles = document.getElementById("resultado"); //Obtenemos el control del TAG que contendrá la respuesta
  if(conexion.readyState == 4) //cuando ya obtenemos respuesta = 4
  {
    detalles.innerHTML = conexion.responseText; //ponemos lo que nos respondió meses.php dentro del TAG don el id resultado
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...'; //Mensaje que se mostrará mientras se espera una respuesta
  }
}

esas serian las funciones que ya debemos conoces y HTML que va a manera y armar todo seria:

<html>
<head>
<title>Problema</title>

<script type="text/JavaScript">

var conexion;
function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}
function consultar(valor)
{
    conexion=crearXMLHttpRequest();
    conexion.onreadystatechange = procesarEventos;
    conexion.open('GET', 'meses.php?num=' + valor, true);
    conexion.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("resultado");
  if(conexion.readyState == 4)
  {
    detalles.innerHTML = conexion.responseText;
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...';
  }
}
</script>
</head>
<body>
    <input type="text" id="valor" name="valor"> <input type="button" value="Consultar" onclick="javascript: consultar(valor.value);">
<div id="resultado"></div>
</body>
</html>

Hecho esto podemos poner un numero del 1 al 12 en el cuadro de texto y al pulsar el botón «Consultar», llamará a la función que «inicia» el Ajax dándole como parámetro el numero del mes, esta función ya se encarga de llamar a la segunda función cuando se recibe una respuesta que llenará el contenido del div resultado

Puedes verlo en funcionamiento aqui: http://www.elcodigofuente.com/ejemplos/ajax.php y descargar el archivo ejemplo aquí:

Archivos adjuntos

Ejemplo de Ajax Básico (3801 downloads )