Ahora nos concentraremos en la propiedad responseText del objeto XMLHttpRequest. Esta propiedad almacena el valor devuelto por el servidor.
Normalmente accederemos a la propiedad responseText cuando el objeto XMLHttpRequest nos informa que toda la información fue remitida por el servidor, esto ocurre cuando la propiedad readyState del objeto XMLHttpRequest almacena el valor 4.
Lo más común es que tengamos un código similar al siguiente:
function procesarEventos()
{
var detalles = document.getElementById("comentarios");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
Confeccionaremos un ejemplo para identifiar donde utilizar la propiedad responseText. El problema consiste en mostrar una lista de hipervínculos que representan los comentarios de distintas fecha. El objetivo es rescatar todos los comentarios para la fecha seleccionada por el visitante y su posterior visualización sin tener que recargar nuevamente la página.
El archivo pagina1.html es:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h2>Seleccione la fecha:</h2>
<div id="fecha">
<a href="pagina1.php?fecha=21/01/2016">ver comentarios del 21/01/2016</a><br>
<a href="pagina1.php?fecha=22/01/2016">ver comentarios del 22/01/2016</a><br>
<a href="pagina1.php?fecha=23/01/2016">ver comentarios del 23/01/2016</a><br>
</div>
<div class="recuadro" id="comentarios">Comentarios:</div>
</body>
</html>
Cada hipervínculo dispone como parámetro la fecha de la cual queremos recuperar los comentarios.
Disponemos un div donde visualizaremos los comentarios de la fecha seleccionada.
La hoja de estilo estilos.css es:
.recuadro {
background-color:#ffffcc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #ffaa00;
}
Luego el archivo funciones.js es:
addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ref;
ref=document.getElementById('fecha');
var vec=ref.getElementsByTagName('a');
for(f=0;f<vec.length;f++)
{
vec[f].addEventListener('click',presionEnlace,false);
}
}
function presionEnlace(e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
verComentarios(url);
}
var conexion1;
function verComentarios(url)
{
if(url=='')
{
return;
}
conexion1=new XMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send();
}
function procesarEventos()
{
var detalles = document.getElementById("comentarios");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
La función inicializarEventos:
function inicializarEventos()
{
var ref;
ref=document.getElementById('fecha');
var vec=ref.getElementsByTagName('a');
for(f=0;f<vec.length;f++)
{
vec[f].addEventListener('click',presionEnlace,false);
}
}
Obtiene la referencia a todas las a (anchor) contenidas en el div 'fecha', luego mediante un for inicializa el evento click para cada hipervínculo.
La función presionEnlace se dispara cuando se presiona alguno de los hipervínculos:
function presionEnlace(e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
verComentarios(url);
}
Primero desactivamos el evento por defecto y llamamos a la función verComentarios pasando como referencia el parámetro del hipervínculo.
La función verComentarios :
function verComentarios(url)
{
if(url=='')
{
return;
}
conexion1=new XMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send();
}
Creamos un objeto de tipo XMLHttpRequest y procede a almacenarlo en la variable conexion1 (que al ser una variable global podrá utilizarse y accederse desde otra función)
Las siguientes tres líneas son similares a problemas que hemos realizado anteriormente. Primero inicializamos la propiedad onreadystatechange con el nombre de la función que procesará los eventos del objeto XMLHttpRequest.
Como segundo paso llamamos al método open indicando que enviaremos la fecha mediante el método GET, el siguiente parámetro el nombre de la página a llamar junto con la fecha a enviar y por último pasamos el valor true indicando que emplearemos comunicación asincrónica.
El tercer paso es llamar al método send. (ej. pagina1.php?fecha=22/01/2016)
La función procesarEventos es donde accedemos a la propiedad responseText:
function procesarEventos()
{
var detalles = document.getElementById("comentarios");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
En esta función mientras la propiedad readyState del objeto XMLHttpRequest almacene un valor distinto a 4 significa que el proceso no a finalizado. Cuando identificamos que tiene el valor 4 procedemos a modificar el div con el valor devuelto por el servidor:
detalles.innerHTML = conexion1.responseText;
Para simplificar el problema en el servidor evitamos rescatarlos de una base de datos (como ocurre en la realidad), luego el contenido de esta página es (pagina1.php):
<?php
header('Content-Type: text/html; charset=utf-8');
if ($_REQUEST['fecha']=='21/01/2016')
{
echo "Estos comentarios corresponden a la fecha 21/01/2016<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
echo "xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx.<br>";
}
if ($_REQUEST['fecha']=='22/01/2016')
{
echo "Estos comentarios corresponden a la fecha 22/01/2016<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
echo "yyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyy.<br>";
}
if ($_REQUEST['fecha']=='23/01/2016')
{
echo "Estos comentarios corresponden a la fecha 23/01/2016<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
echo "zzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzz zzzzzzzzzzzzzz zzzzzz.<br>";
}
?>
Confeccionar una página que muestre una lista de hipervínculos que representan los comentarios de distintas fecha. El objetivo es rescatar todos los comentarios para la fecha seleccionada por el visitante y su posterior visualización sin tener que recargar nuevamente la página.