Propiedad responseText AJAX

AJAX

Siguiendo con el estudio de AJAX en esta entrada hablaremos de la propiedad responseText o responseXML del objeto XMLHttpRequest , dicha propiedad es utilizada para obtener la respuesta emitida por el servidor, cuando hablamos de respuesta hacemos referencia a los datos devueltos por este así que si utilizamos:

responseText: Obtenemos la respuesta de nuestro servidor en formato cadena de texto o String.

responseXML: Obtenemos la respuesta de nuestro servidor en formato XML

Los datos recibidos podemos asignarlos a cualquier componente o etiqueta HTML, lo único que necesitamos para tal fin es un identificador “id”, veamos un ejemplo asignando valores obtenidos a un div cuando la respuesta es en texto plano:

1
document.getElementById("div").innerHTML=xmlhttp.responseText;

Si nuestro servidor envía una respuesta en formáto XML podemos procesarla de la siguiente manera:
Asumamos que tenemos un archivo xml en nuestro servidor con el listado de jugadores de la seleccion colombia así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
< ?xml version="1.0" encoding="ISO-8859-1"?>
<colombia>
   <jugador>
    <nombre>DAVID OSPINA</nombre>
    <posicion>ARQUERO</posicion>
   </jugador>
   <jugador>
    <nombre>CAMILO VARGAS</nombre>
    <posicion>ARQUERO</posicion>
   </jugador>
   <jugador>
    <nombre>CRISTIAN BONILLA</nombre>
    <posicion>ARQUERO</posicion>
   </jugador>
   <jugador>
    <nombre>CAMILO ZUÑIGA</nombre>
    <posicion>DEFENSA</posicion>
   </jugador>
   <jugador>
    <nombre>SANTIAGO ARIAS</nombre>
    <posicion>DEFENSA</posicion>
   </jugador>
   <jugador>
    <nombre>CARLOS SANCHEZ</nombre>
    <posicion>VOLANTE</posicion>
   </jugador>
  <jugador>
    <nombre>CRISTIAN ZAPATA</nombre>
    <posicion>DEFENSA</posicion>
   </jugador>
  <jugador>
    <nombre>PABLO ARMERO</nombre>
    <posicion>DEFENSA</posicion>
   </jugador>
  <jugador>
    <nombre>EDWIN VALENCIA</nombre>
    <posicion>VOLANTE</posicion>
   </jugador>
  <jugador>
    <nombre>JAMES RODRIGUEZ</nombre>
    <posicion>VOLANTE</posicion>
   </jugador>
  <jugador>
    <nombre>JUAN GUILLERMO CUADRADO</nombre>
    <posicion>VOLANTE</posicion>
   </jugador>
  <jugador>
    <nombre>RADAMEL FALCAO</nombre>
    <posicion>DELANTERO</posicion>
   </jugador>
  <jugador>
    <nombre>TEOFILO GUTIERREZ</nombre>
    <posicion>DELANTERO</posicion>
   </jugador>
  <jugador>
    <nombre>CARLOS BACCA</nombre>
    <posicion>DELANTERO</posicion>
   </jugador>
  <jugador>
    <nombre>VICTOR IBARBO</nombre>
    <posicion>VOLANTE</posicion>
   </jugador>
 </colombia>

Lo llamaremos jugadores.xml, y tenemos otro archivo index.html donde procesaremos nuestro archivo para mostrar los datos sin recargar la página, ya que esa es la finalidad principal de AJAX como ya lo hemos visto en entradas anteriores.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
< !DOCTYPE html>
<html>
<head>
<script>
function loadXML()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("NOMBRE");
   
    for (i=0;i<x .length;i++)
     {
     txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
    document.getElementById("resultado").innerHTML=txt;
    }
  }
xmlhttp.open("GET","jugadores.xml",true);
xmlhttp.send();
}
</x></script>
</head>
<body>
<h2>SELECCION COLOMBIA:</h2>
<div id="resultado"></div>
<button type="button" onclick="loadXML()">Ver Jugadores</button>
</body>

En la carpeta de nuestro servidor tendríamos dos archivos:
directorio

Al ejecutar nuestro index.html y dar clic en el botón Ver Jugadores cargaría nuestro listado de jugadores.
ajax listo

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *