Programacin con AJAX

Programacin con AJAX Programacin con AJAX

Reconocimiento No comercial
Jos Antonio Muoz Jimnez
jamj2000 at gmail dot com
Marzo 2010
Pg. 1 de 24
Programacin con AJAX
Introduccin.
Qu es AJAX?
Dnde se utiliza?
Ventajas y desventajas
El ormato XML
!once"tos de Javascript
Varia#les
$rrays
Diccionarios
%unciones y Eventos
El o#jet o XMLHttpReqest
&todos del o#jeto '&()tt"Re*uest "ara o#tener inormacin
o"en
setRe*uest)eader
send
+ro"iedades de mtodo '&()tt"Re*uest
onreadystatec,an-e
ready.tate
res"onse/e0t
res"onse'&(
El o#jeto docment
&todos "ara -estionar la inormacin
-etElements1y/a-Name
-etElement1yId
-et$ttri#ute
(a "ro"iedad inner)/&(
!om"ati#ilidad con distintos nave-adores
Pg. 2 de 24
Programacin con AJAX
!ntrodccin
$2$' es una tcnica de desarrollo 3e# "ara crear a"licaciones interactivas *ue se ejecutan en el
cliente4 es decir4 en el nave-ador de los usuarios mientras se mantiene la comunicacin
as"ncrona con el servidor en se-undo "lano. De esta orma es "osi#le realizar cam#ios so#re
las "5-inas sin necesidad de recar-arlas4 lo *ue si-niica aumentar la interactividad4 velocidad y
usa#ilidad en las a"licaciones. Dic,a tcnica es am"liamente utilizada en la 6e# 7.8.
$2$' si-ni9ca
$sync,ronous
2avascri"t
$nd
'&(
+ueden verse ejem"los de a"licaciones 3e# *ue ,acen uso de $2$' en:
;oo-le <;mail4 ;oo-le ma"s4 ;oo-le docs4 ;oo-le su--est4 ...=
%lic>r
/3itter
Di-- y Reddit
&ee#o
En este mini?tutorial encontraras diversos ejem"los *ue tratan distintos as"ectos de $2$'.
Actividades propuestas
)acer un listado de al menos @8 sitios de internet *ue ,acen uso de $2$'.
)acer un resumen de la ,istoria de la tecnolo-Aa $2$'.
Pg. # de 24
Programacin con AJAX
$% &ormato XML
(a mayorAa de la comunicacin de datos en $2$' entre un servidor y un cliente 3e# suele
realizarse en ormato '&(. +or ello es aconseja#le ad*uirir un conocimiento #5sico de este
ormato. Este conocimiento "odrAa resumirse de orma muy escueta en *ue todo documento
'&(:
tiene uno y slo un nodo raAz.
todas las eti*uetas de#en de tener su eti*ueta de cierre corres"ondiente.
+or ejem"lo4 teniendo en cuenta esto4 "odemos crear un arc,ivo datos.'m%:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="estilo.css" ?>
<alumnos>
<alumno>Jos Antonio</alumno>
<alumno>Susana</alumno>
<alumno>Ana</alumno>
</alumnos>
$ un arc,ivo '&( "uede asociarsele una ,oja de estilo !..4 si lo indicamos en su ca#ecera
mediante
<?xml-stylesheet type="text/css" href="estilo.css" ?>
Pg. 4 de 24
Programacin con AJAX
+or ejem"lo4 la ,oja esti%o.css(
// Etiquetas XML
* { margin: 0px; padding: 0px; }
alumnos { font-size: 14pt; }
alumno { display: block; background-color: Wheat; }
alumno:before {
content: "Alumno/a: ";
padding-left: 10px;
padding-right: 10px;
margin-right: 20px;
background-color: Tan;
}
// Etiquetas HTML
* { margin: 0px; padding: 0px; }
#resultado {
overflow: auto;
width: 500px; height: 200px;
background-color: LightGrey;
border: 1px solid Black;
padding: 10px;
}
!on lo cual se verAa de la si-uiente orma en el nave-ador:
Pg. ) de 24
Programacin con AJAX
Actividades propuestas
&odiicar el arc,ivo datos.0ml "ara *ue a"arezcan al menos @8 alumnos.
$Badir al arc,ivo datos.0ml al menos C "roesores.
&odiicar estilo.css "ara *ue se muestren adecuadamente los "roesores.
Ela#orar un nuevo arc,ivo '&( *ue muestre otro ti"o de inormacin4 con su estilo !..
asociado.
Proporcionando datos desde e% servidor
$ menudo no se accede a los datos '&( de orma directa sino *ue estos son -enerados de
orma din5mica en el servidor4 normalmente mediante un scri"t +)+. +or ejem"lo esa
inormacin "odrAa o#tenerse de una #ase datos cuya inormacin cam#ia con el tiem"o.
$ modo de sim"liicacin mostramos un sencillo scri"t datos.p*p:
<?php
sleep (2); // Simulamos un retardo de 2 seg.
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" ?>
<alumnos>
<alumno>Jos Antonio</alumno>
<alumno>Susana</alumno>
<alumno>Ana</alumno>
</alumnos>
';
?>
Actividades propuestas
&odiicar el scri"t datos."," "ara *ue a"arezcan al menos @8 alumnos.
Realizar una llamada a datos."," desde el nave-ador.
Pg. + de 24
Programacin con AJAX
,-teniendo datos desde e% c%iente
En el lado del cliente estos datos "ueden o#tenerse de dos ormas:
(a orma tradicional
&ediante $2$'
La &orma tradiciona%
!reamos un arc,ivo ver.*tm% y ,acemos la "eticin mediante un su#mit.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<form action="datos.php" method="get" enctype="text/plain">
<input type="submit" value="Obtener datos">
</form>
</body>
</html>
Pg. . de 24
Programacin con AJAX
Mediante AJAX
!reamos un arc,ivo ver/a0a'.*tm% y ,acemos la "eticin en javascri"t.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var datos;
function pedir_datos (url) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url, true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send(null);
}
function mostrar_datos () {
if (datos.readyState == 4)
document.getElementById('resultado').innerHTML = datos.responseText;
}
</script>
</head>
<body>
<form action="javascript:pedir_datos('datos.php');">
<input type="submit" value="Obtener datos">
</form>
<div id='resultado'> </div>
</body>
</html>
Pg. 1 de 24
Programacin con AJAX
,-servaciones
$un*ue en "rinci"io "ueda "arecer *ue ,ay "oca dierencia entre am#as ormas de o#tener y
mostrar la inormacin y *ue incluso el uso de $2$' es al-o m5s com"licado4 e0isten dierencias
im"ortantes.
Estas son:
En la orma tradicional e0iste un cam#io de "5-ina <o#serva *ue en DR( a"arece
,tt":EElocal,ostEaja0Edatos.","=. Esto elimina de la vista del usuario toda la inormacin
*ue tuviramos "reviamente.
&ediante $2$'4 la inormacin se muestra en la misma "5-ina ori-inal < o#serva *ue en
DR( si-ue a"areciendo ,tt":EElocal,ostEaja0EverFaja0.,tml=. Esto nos "ermite tra#ajar en
la misma "5-ina como si nada ,u#iera sucedido actualiz5ndose sta con nueva
inormacin cuando sea necesario. Normalmente el Gcuando sea necesarioH si-niica
cuando ocurra al-In evento *ue deseemos tener en cuenta.
Jtras cuestiones a tener en cuenta:
!uando usamos $2$' de#emos tener una divisin o ca"a <DIV= en la cual mostraremos
los datos. +or ejem"lo:
<div id='resultado'> </div>
+odemos acceder a dic,a ca"a y mostrar el resultado mediante:
document.getElementById('resultado').innerHTML = "<b>Aqu va el resultado</b>";
Res%tado
El uso de $2$' nos "ermitir5 *ue el usuario ten-a una e0"eriencia m5s luida en la interaccin
con nuestro servidor 3e# y dar5 a nuestras "5-inas un diseBo m5s "roesional.
$,ora slo nos alta aBadir una ,oja de estilo a la "5-ina verFaja0.,tml y tendremos nuestra
"rimera a"licacin $2$' medianamente decente.
<link rel="stylesheet" type="text/css" href="estilo.css" />
El resultado "uede verse a continuacin.
Pg. 2 de 24
Programacin con AJAX
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript">
var datos;
function pedir_datos (url) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url, true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send(null);
}
function mostrar_datos () {
if (datos.readyState == 4)
document.getElementById('resultado').innerHTML = datos.responseText;
}
</script>
</head>
<body>
<form action="javascript:pedir_datos('datos.php');">
<input type="submit" value="Obtener datos">
</form>
<div id='resultado'> </div>
</body>
</html>
Pg. 13 de 24
Programacin con AJAX
Actividades propuestas
&odiicar verFaja0.,tml "ara *ue los datos se muestren en 7 ca"as distintas a la vez.
&odiicar verFaja0.,tml "ara *ue los datos se muestren en K ca"as distintas a la vez.
4onceptos de Javascript
Variables
En 2avascri"t las varia#les no tienen ti"o.
var dato;
dato = 123; // ahora dato es un entero
dato = "Hola que tal!"; // ahora dato es una cadena de texto
dato = new Array (); // ahora dato es un array
dato = {}; // ahora dato es un diccionario
2avascri"t realiza las conversiones im"lAcitas necesarias.
+ara dar valores a un arra5(
var direccion = new Array ();
direccion[0] = "Avda. ";
direccion[1] = "Estudiantes ";
direccion[2] = 99;
alert (direccion[0] + direccion[1] + direccion[2]);
+ara dar valores a un diccionario(
var nota = {};
nota["Rocio"] = "Sobresaliente";
nota["Eva"] = "Notable";
nota["Jairo"] = "Suficiente";
alert (nota["Rocio"] + "\n" + nota["Eva"] + "\n" + nota["Jairo"]);
Pg. 11 de 24
Programacin con AJAX
Actividades propuestas
.i tenemos la si-uiente uncin mostrarFdatos<= y el si-uiente #ody4 cual ser5 el
resultado. Qu ti"o de dato es la varia#le d?
function mostrar_datos () {
if (datos.readyState == 4) {
var d = document.getElementsByTagName('div');
d[0].innerHTML = datos.responseText;
d[1].innerHTML = datos.responseText;
d[2].innerHTML = datos.responseText;
d[3].innerHTML = datos.responseText;
}
}
<body>
<form>
<input type="button" value="Obtener datos" onclick='pedir_datos("datos.php")'>
</form>
<div> </div><br/>
<div> </div><br/>
<div> </div><br/>
<div> </div><br/>
</body>
Escri#e una "5-ina con el si-uiente contenido. )az una ca"tura de "antalla de cada
mensaje de alerta *ue a"arezca.
<html>
<head>
<script type="text/javascript">
var direccion = new Array();
var nota = {};
direccion[0] = "Avda. ";
direccion[1] = "Estudiantes ";
direccion[2] = 99;
nota["Rocio"] = "Sobresaliente";
nota["Eva"] = "Notable";
nota["Jairo"] = "Suficiente";
alert (direccion[0] + direccion[1] + direccion[2]);

alert (nota["Rocio"] + " <--> Rocio \n"
+ nota["Eva"] + " <--> Eva \n"
+ nota["Jairo"] + " <--> Jairo \n" );

</script>
</head>
<body></body>
</html>
&odiicar el ejercicio anterior "ara *ue a"arezca la direccin del alumnoEa y su nota en el
mismo cuadro de alerta. De#e ,acerse C veces <C alumnos=.
Pg. 12 de 24
Programacin con AJAX
Funciones y Eventos
El cdi-o 2avascri"t "uede a-ru"arse dentro de unciones. +or ejem"lo mediante
function pedir_datos (url) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url, true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send(null);
}
,emos a-ru"ado varias sentencias dentro de la uncin pedir_datos (url).
$ menudo es Itil asociar la ejecucin del cdi-o de una uncin al dis"aro de un evento. Es decir
cuando se "roduce determinado evento <"ulsacin del ratn4 "ulsacin de una tecla4 movimiento
del ratn4 car-a de la "5-ina4 L=
No todos los elementos de una "5-ina so"ortan todos los eventos. $ continuacin se muestra
una #reve lista:
Mane0ador de evento ,-0etos para %os qe est de&inido
on$#ort Ima-e
on1lur 1utton4 !,ec>#o04 %ileD"load4 (ayer4 +ass3ord4 Radio4
Reset4 .elect4 .u#mit4 /e0t4 /e0tarea4 3indo3
on!,an-e %ileD"load4 .elect4 /e0t4 /e0tarea
on!lic> 1utton4 document4 !,ec>#o04 (in>4 Radio4 Reset4 .u#mit
onD#l!lic> document4 (in>
onDra-Dro"4 on(oad4 onDnload 3indo3
onError Ima-e4 3indo3
on%ocus 1utton4 !,ec>#o04 %ileD"load4 (ayer4 +ass3ord4 Radio4
Reset4 .elect4 .u#mit4 /e0t4 /e0tarea4 3indo3
onMeyDo3n document4 Ima-e4 (in>4 /e0tarea
onMey+ress document4 Ima-e4 (in>4 /e0tarea
onMeyD" document4 Ima-e4 (in>4 /e0tarea
on(oad Ima-e4 (ayer4 3indo3
on&ouseDo3n 1utton4 document4 (in>
on&ouse&ove Nin-uno <de#e asociarse a uno=
on&ouseJut (ayer4 (in>
on&ouseJver (ayer4 (in>
on&ouseD" 1utton4 document4 (in>
on&ove 3indo3
Pg. 1# de 24
Programacin con AJAX
onReset4 on.u#mit %orm
onResize 3indo3
on.elect /e0t4 /e0tarea
Nosotros4 en nuestro ejem"lo4 ,emos asociado4 de &orma imp%"cita6 la uncin pedir/datos7r%8
al dis"aro del evento on9-mit en el ormulario.
<form action= "javascript:pedir_datos('datos.php');" >
<input type="submit" value="Obtener datos">
</form>
De &orma e'p%"cita serAa:
<form action="#" onsubmit= "pedir_datos('datos.php'); return false;" >
<input type="submit" value="Obtener datos">
</form>
$ continuacin se muestran otros "osi#les eventos de dis"aro.
$l "ulsar un #otn normal
<body>
<input type="button" value="Obtener datos" onclick= "pedir_datos('datos.php')" >
<div id='resultado'> </div>
</body>
$l car-ar la "5-ina
<body onload= "pedir_datos('datos.php')" >
<div id='resultado'> </div>
</body>
$l "asar "or encima de la ca"a <DIV= del resultado
<body>
<div id='resultado' onmouseover= "pedir_datos('datos.php')" > </div>
</body>
$l cam#iar el valor de un cuadro de seleccin
<body>
<select onchange= "pedir_datos('datos.php')" >
<option> Pedir datos </option>
<option> Pedir otra vez </option>
<option> Volver a pedir </option>
</select>
<div id='resultado'> </div>
</body>
Actividades propuestas
&odiica verFaja0.,tml de modo *ue "rue#es el uncionamiento de los K casos anteriores.
Pg. 14 de 24
Programacin con AJAX
$% o-0eto XMLHttpReqest
Obteniendo los datos desde el servidor
+ara o#tener los datos desde el servidor utilizamos la &ncin pedir_datos().
var datos;
function pedir_datos (url) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url, true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send(null);
}
(a uncin "edirFdatos <= la asociaremos a un evento4 de modo *ue se ejecute cuando a
nosotros nos interese. Este evento "odrAa ser la car-a de la "5-ina4 la "ulsacin de un #otn del
ratn4 el cam#io en un select4 L
(a uncin "edirFdatos <= ,ace lo si-uiente:
!rea un o#jeto '&()tt"Re*uest
datos = new XMLHttpRequest();
$socia la uncin mostrarFdatos <= "ara se ejecute cuando se "roduzca un cam#io de
estado en dic,o o#jeto.
datos.onreadystatechange = mostrar_datos;
$#re la "eticin de DR(.
datos.open("GET", url, true);
EnvAa las ca#eceras.
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
EnvAa los "ar5metros.
datos.send(null);
,-servaciones
J#serva *ue necesitamos una varia-%e g%o-a% datos donde se almacenar5 la inormacin *ue
reci#amos. Dic,a varia#le ser5 utilizada des"us "or la uncin mostrarFdatos<=. +odrAa ser
necesaria asimismo "ara otras unciones.
Pg. 1) de 24
Programacin con AJAX
Pasando datos al servidor
.uele ser ,a#itual cuando se ,ace una "eticin4 *ue en dic,a "eticin se envAe inormacin al
servidor desde el cliente. Esto suele ,acerse en la orma variable1=valor1&variable2=valor2...
(a orma de "asar "ar5metros de"ende de si utilizamos el mtodo ;E/ o el mtodo +J./.
$m#os mtodos son m5s o menos e*uivalentes4 aun*ue el mtodo +J./ es es"ecialmente Itil
cuando se tra#aja con ormularios.
M:todo ;$<
!on el mtodo ;E/ los "ar5metros se "asan en la misma DR(.
datos.open("GET", "datos.php?curso=SMR2&tutor=Jos+Antonio", true);
datos.send(null);
M:todo P,9<
!on el mtodo +J./ los "ar5metros se "asan con la uncin datos.send<=.
datos.open("POST", "datos.php", true);
datos.send("curso=SMR2&tutor=Jos+Antonio");
Pg. 1+ de 24
Programacin con AJAX
Ejem"los:
718 ;$< tradiciona%
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<form method="get" action="get.php">
<label>Curso: </label>
<select name="curso">
<option value="SMR1" > SMR1 </option>
<option value="SMR2" selected> SMR2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Jos Antonio" />
<input type="submit" name="submit" value="OK" />
</form>
</html>
<?php
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" ?>
<mensaje>El tutor del curso '.$_GET[curso].' es '.$_GET[tutor].'</mensaje>';
?>
%Ajate en la =RL resultante:
,tt":EElocal,ostEaja0Eget.p*p?crso>9MR2?ttor>Jos:@Antonio?s-mit>,A
<7= +J./ tradicional
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<form method="post" action="post.php">
<label>Curso: </label>
<select name="curso">
<option value="SMR1" > SMR1 </option>
<option value="SMR2" selected> SMR2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Jos Antonio" />
<input type="submit" name="submit" value="OK" />
</form>
</html>
<?php
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" ?>
<mensaje>El tutor del curso '.$_POST[curso].' es '.$_POST[tutor].'</mensaje>';
?>
Pg. 1. de 24
g
e
t
.
p
h
p
g
e
t
.
h
t
m
l
p
o
s
t
.
p
h
p
p
o
s
t
.
h
t
m
l
Programacin con AJAX
7#8 ;$< con AJAX
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript">
var datos;

function pedir_datos (url, params) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url+ '?' +params , true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send(null);
}
function mostrar_datos () {
if (datos.readyState == 4)
document.getElementById('resultado').innerHTML = datos.responseText;
}
function iniciar() {
var url = 'get.php';
var params = f.curso.name +'='+ f.curso.value +'&'+
f.tutor.name +'='+ f.tutor.value;
pedir_datos(url, params);
}
</script>
</head>
<body>
<form name="f" method="get" action="javascript: iniciar ()">
<label>Curso: </label>
<select name="curso">
<option value="SMR1" > SMR1 </option>
<option value="SMR2" selected> SMR2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Jos Antonio" />
<input type="submit" name="submit" value="OK" />
</form>
<div id="resultado"> </div>
</html>
Pg. 11 de 24
g
e
t
_
a
j
a
x
.
h
t
m
l
Programacin con AJAX
748 P,9< con AJAX
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript">
var datos;
function pedir_datos (url, params) {
datos = new XMLHttpRequest();
datos.onreadystatechange = mostrar_datos;
datos.open("POST", url, true);
datos.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//datos.setRequestHeader("Content-length", params.length);
datos.setRequestHeader("Connection", "close");
datos.send(params);
}
function mostrar_datos () {
if (datos.readyState == 4)
document.getElementById('resultado').innerHTML = datos.responseText;
}
function iniciar() {
var url = 'post.php';
var params = f.curso.name +'='+ f.curso.value +'&'+
f.tutor.name +'='+ f.tutor.value;
pedir_datos(url, params);
}
</script>
</head>
<body>
<form name="f" method="post" action="javascript: iniciar()">
<label>Curso: </label>
<select name="curso">
<option value="SMR1" > SMR1 </option>
<option value="SMR2" selected> SMR2 </option>
</select>
<label>Tutor: </label>
<input type="text" name="tutor" value="Jos Antonio" />
<input type="submit" name="submit" value="OK" />
</form>
<div id="resultado"> </div>
</html>
Actividades propuestas
Editar los K ejem"los anteriores y com"ro#ar su correcto uncionamiento.
&odiica el Iltimo ejem"lo "ara *ue devuelva una lista de alumnos distinta de"endiendo
del curso.
Pg. 12 de 24
p
o
s
t
_
a
j
a
x
.
h
t
m
l
Programacin con AJAX
$% o-0eto docment
Visualizando los datos dentro del cliente
+ara mostrar los datos en el cliente utilizamos la &ncin mostrar_datos().
function mostrar_datos () {
if (datos.readyState == 4)
document.getElementById('resultado').innerHTML = datos.responseText;
}
Jtra orma al-o m5s detallada es
function mostrar_datos () {
if (datos.readyState == 4 && datos.status == 200)
document.getElementById('resultado').innerHTML = datos.responseText;
}
(a condicin
if (datos.readyState == 4 && datos.status == 200)
com"rue#a *ue e0iste una res"uesta com"leta del servidor <datos.ready.tate NN K= y *ue dic,a
res"uesta es satisactoria <datos.status NN 788=.
(os valores "ara datos.read59tate son:
3. Indica *ue el o#jeto e0iste "ero no ,a sido aIn inicializado.
1. El o#jeto ,a sido inicializado tras la llamada al mtodo o"en<=.
2. (a "eticin ,a sido enviada.
#. .e ,a reci#ido una res"uesta "arcial a la "eticin.
4. .e ,a reci#ido una res"uesta com"leta y la cone0in ,a sido cerrada.
(os valores "ara datos.stats m5s recuentes suelen ser:
233. Indica *ue la "eticin )//+ se llev a ca#o satisactoriamente.
43#. Indica *ue el servidor entendi la "eticin )//+4 "ero no "uede llevarla a ca#o.
+or ejem"lo4 de#ido a un "ro#lema de "ermisos.
434. Indica *ue el recurso solicitado no e0iste.
)33. Indica *ue se ,a "roducido un error interno en el servidor al intentar res"onder a
la "eticin.
(a sentencia
document.getElementById('resultado').innerHTML = datos.responseText;
co-e los datos en ormato te0to <datos.res"onse/e0t= y vuelca <inner)/&(= su contenido en el
elemento identiicado como OresultadoO.
Pg. 23 de 24
Programacin con AJAX
Tratando los datos en el cliente
Ima-inemos *ue deseamos mostrar los datos en orden inverso a como los o#tenemos4 o mostrar
slo las lAneas "ares4 o mostrar slo las *ue cum"lan cierta condicin. +ara ,acer esto
necesitamos o#tener los datos en ormato '&( y no en ormato /e0to como ,asta a,ora.
&ediante datos.responseXML o#tendremos un o#jeto '&( listo "ara "oder ser inter"retado.
(a si-uiente uncin nos muestra los datos en el orden reci#ido.
function mostrar_datos () {
var a = new Array ();
if (datos.readyState == 4) {
a = datos.responseXML.getElementsByTagName ("alumno");
for (i = 0; i < a.length; i++)
document.getElementById('resultado').innerHTML
+= a[i].firstChild.data + "<br/>";
}
}
(a si-uiente uncin nos muestra los datos en orden inverso.
function mostrar_datos () {
var a = new Array ();
if (datos.readyState == 4) {
a = datos.responseXML.getElementsByTagName ("alumno");
for (i = a.length-1; i >= 0; i--)
document.getElementById('resultado').innerHTML
+= a[i].firstChild.data + "<br/>";
}
}
(os datos de cada alumno se -uardan en la varia#le local a[i]. +ara acceder a los datos entre la
eti*ueta de inicio y la de cierre se utiliza
a[i].firstChild.data
En el caso de dis"oner de atri#utos4 tam#in es "osi#le acceder a ellos. .u"on-amos *ue
tenemos el si-uiente contenido '&(:
<alumnos>
<alumno edad="18" sexo="V">Jos Antonio</alumno>
<alumno edad="17" sexo="M">Susana</alumno>
<alumno edad="19" sexo="M">Ana</alumno>
</alumnos>
Pg. 21 de 24
Programacin con AJAX
(a si-uiente uncin nos mostrar5 los datos entre las eti*uetas de inicio y cierre y el valor de los
atri#utos edad y sexo.
function mostrar_datos () {
var a = new Array ();
if (datos.readyState == 4) {
a = datos.responseXML.getElementsByTagName ("alumno");
for (i = 0; i < a.length; i++)
document.getElementById('resultado').innerHTML
+= a[i].firstChild.data
+ " edad = " + a[i].getAttribute ('edad')
+ " sexo = " + a[i].getAttribute ('sexo')
+ " <br/>";
}
}
+ara acceder al valor del atri#uto edad se utiliza
a[i].getAttribute ('edad')
+ara acceder a cual*uier otro atri#uto se "rocede de idntica orma.
Actividades propuestas
&odiicar el arc,ivo datos."," "ara *ue a"arezcan al menos @8 alumnosEas con los
atri#utos de edad y se0o.
&odiicar el arc,ivo verFaja0.,tml "ara *ue se muestren slo las lAneas "ares.
&odiicar el arc,ivo verFaja0.,tml "ara *ue se muestren slo los alumnosEas mayores de
@P aBos.
&odiicar el arc,ivo verFaja0.,tml "ara *ue se muestren slo las alumnas.
Pg. 22 de 24
Programacin con AJAX
4ompati-i%idad con distintos navegadores
El o#jeto XMLHtttpReqest no se utiliza "or todos los nave-adores4 de ,ec,o Internet E0"lorer4
el nave-ador m5s utilizado en la actualidad4 utiliza el o#jeto ActiveX,-0ect.
+or lo tanto la uncin pedir/datos 7r%8 de#e ser modiicada de la orma *ue se muestra a
continuacin. Esta uncin tam#in realiza el tratamiento de las "osi#les e0ce"ciones en tiem"o
de ejecucin.
var datos;
function pedir_datos(url) {
datos = false;
// Navegadores Firefox, Safari, ... / XMLHttpRequest
if(window.XMLHttpRequest) {
try { datos = new XMLHttpRequest(); }
catch(e) { datos = false; }
}
// Navegador IE de Windows / ActiveXObject
else if(window.ActiveXObject){
try { datos = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e) {
try { datos = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) { datos = false; }
}
}
if(datos) {
datos.onreadystatechange = mostrar_datos;
datos.open("GET", url, true);
datos.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
datos.setRequestHeader("Connection", "close");
datos.send("");
}
}
Actividades propuestas
Ela#orar una a"licacin $2$' *ue sea com"ati#le con todos los nave-adores y *ue
em"lee los conocimientos vistos en este tema.
Pg. 2# de 24
Programacin con AJAX
Re&erencias
Javascript
*ttp(BBen.CiDipedia.orgBCiDiBJava9cript
*ttp(BBCCC.Ce-designtoo%s%ist.comB2332B34BCe-mastertoo%sB0avascriptEc*eatE
s*eetsEqicDEre&erenceEgidesE&orE0avascriptECe-mastersEcodersECe-Edeve%opersE
designersB
*ttp(BBes.CiDipedia.orgBCiDiBJava9cript
*ttp(BBCCC.e%codigo.netBcgiE-inBFGread.cgi?
ta-%a>*erramientas?campo>3?c%ave>42?in&o>1
AJAX
*ttp(BBen.CiDipedia.orgBCiDiBA0a'/7programming8
*ttp(BBCCC.nope.comBa0a'B*oCEa0a'ECorDs.*tm%
*ttp(BBes.CiDipedia.orgBCiDiBAJAX
CCC.*i-ertEaa%-ers.comB!</!nsig*tB9panis*BPFHB!<!33+9pEAJAX.pd&
*ttp(BBCCC.e%rincondea0a'.comBmana%Ea0a'B
*ttp(BBCCC.a0a'*ispano.comBqienEsaEa0a'.*tm%
*ttp(BBCCC.a0a'*ispano.comBa0a'EnevoEacercamientoEap%icacionesECe-.*tm%
Pg. 24 de 24