Conceptos de Ajax

Estas dos propiedades todavía no las habíamos utilizado. Veremos que las mismas nos permiten hacer un código más correcto.

status Esta propiedad almacena el código del estado de la petición HTTP. Entre otros valores que puede retornar el servidor: 200 es el valor para una conexión exitosa, 404 página inexistente. Esta propiedad de solo lectura esta disponible cuando readyState toma los valores 3 o 4.
statusText Almacena el texto de la petición HTTP enviado por el servidor.

Con estas nuevas propiedades veremos que lo más correcto cuando readyState contiene el valor 4 debemos además verificar si la propiedad status almacena el valor 200 (es decir el servidor procesó correctamente la petición)

Para probar estas propiedades confeccionaremos el problema del concepto anterior (retornar del servidor el cuadrado de un número que ingresamos por teclado), introduciremos un error (el método open llamará a una página php inexistente) y veremos cual es el mensaje en pantalla, luego agregaremos la verificación de la propiedad status.

pagina1.html

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro" 
size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
<div id="resultados"></div>
</form>
</body>
</html>

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();
}

var conexion1;
function enviarFormulario() 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  var num=document.getElementById('nro').value;
  conexion1.open('GET','paginax.php?numero='+num, true);
  conexion1.send(null);  
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
  } 
  else
    if (conexion1.readyState==1 || conexion1.readyState==2 || conexion1.readyState==3)
    {
      resultados.innerHTML = 'Procesando...';
    }
}



//***************************************
//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;
}

En este archivo podemos ver el error que hemos introducido:

  conexion1.open('GET','paginax.php?numero='+num, true);

Hemos pasado como nombre de página: paginax.php donde debíamos disponer pagina1.php.

pagina1.php

<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>

Cuando ejecute estas páginas deberá ver un mensaje parecido a: "Page Not Found".

Luego modifique el archivo funciones.js verificando el estado de la propipedad status:

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    if (conexion1.status==200)
    {
      resultados.innerHTML = conexion1.responseText;
    }
    else
    {
      resultados.innerHTML=''; 
      alert(conexion1.statusText);
    }
  } 
  else
    if (conexion1.readyState==1 || conexion1.readyState==2 || conexion1.readyState==3)
    {
      resultados.innerHTML = 'Procesando...';
    }
}

Es decir que no solo debemos verificar que la propiedad readyState tenga almacenado un 4, sino que la propiedad status retorne un 200. En este caso por el else solamente borramos el div donde aparece el texto 'Procesando...' y mostramos en un alert el texto del error devuelto por el servidor .

11 - Propiedades status y statusText.