Tutorial 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

<!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">
  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

addEventListener('load',inicializarEventos,false);

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

function enviarDatos(e)
{
  e.preventDefault();
  enviarFormulario();
}

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

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...';
    }
}

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
header('Content-Type: text/html; charset=utf-8');
$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 .

Problema resuelto.

Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado, luego ejecutar.

Seguidamente modificar la función procesarEventos con esta otra y volver a ejecutar:

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...';
    }
}

Por último llamar a la página pagina1.php en lugar de paginax.php:

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

pagina1.html

Ejecutar ejemplo

funciones.js

pagina1.php

11 - Propiedades status y statusText.

Problema resuelto.

Retornar