Manual El Mejor Ajax

"#$#%& '( ') *+,- .
/0/1- +2(%#3'(4&$ 5 /6)78#87&('$9:

;$8<74& = 02#( >#<7#(& +2'(4'$
?7<7@7%&= A'<@7& BC)D'E F&G#$

>#(2#) %' /0/1
H#$ '(4<#I#$ %' /0/1

2Ed 2009

nuice
J(4<&%2887K( 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 L
La Base ue la Web Actual................................................................................................................................ S
!" "$%&'()$ *+,- .*/0$1+$23 ,(14'0 -(%&'(&$566666666666666666666666666666666666666666666666666666666666666666666666666666 7
!" "$%&'()$ 8*+,- .$83$%9:;"$ *+,-5 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 7
8,- .$83$%9:;"$ ,(14'0 -(%&'(&$5 666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 7
<== .<(9>(?$ =3/"$ =@$$395A *B)(9 ?$ $93:"B666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 7
CD, .CB>'E$%3 D;)$>3 ,B?$"5 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 F
-$%&'()$9 ?$ <":$%3$A .G(H(=>1:035 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 F
-$%&'()$9 ?$ =$1H:?B1 .G=IA I*IA J';/A $3>65666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 F
K:9:L% $% <B%)'%3B 666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 F
Las RIA (Rich Inteinet Application Technologies).............................................................................. 7
<(1(>3$1M93:>(9 ?$ '%( (0":>(>:L% ?$ $9>1:3B1:B666666666666666666666666666666666666666666666666666666666666666666666666666666666666 N
<(1(>3$1M93:>(9 ?$ '%( (0":>(>:L% O$; <B%H$%>:B%(" 66666666666666666666666666666666666666666666666666666666666666666666666 N
I1B;"$E(9 ?$ '%( (0":>(>:L% P$; >B%H$%>:B%(" 6666666666666666666666666666666666666666666666666666666666666666666666666666666666 N
Algunos ejemplos ieales ue A}AX................................................................................................................ 9
Notas finales.......................................................................................................................................................1u
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 99999999999999999999999999999999999999999999999999999999999999999 NN
1.1 Besciipcion uel capitulo....................................................................................................................11
1.2 Razones paia utilizai una libieiia en el lauo cliente. ...........................................................12
1.S La uepenuencia ue los navegauoies. ...........................................................................................1S
1.4 Navegauoies compatibles. ...............................................................................................................1S
1.S Ntouos y piopieuaues uel objeto................................................................................................16
1.6 Constiuctoi uel objeto XNLBttpRequest...................................................................................18
1.7 Peticiones sincionas y asincionas. ...............................................................................................2u
1.8 La clase peticion A}AX. .......................................................................................................................24
1.9 Esciibii clases en }avaSciipt............................................................................................................29
Q6R6Q <"(9$9 K= I1B3B3:0B9666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 SR
Q6R6S I1B3B3/0$ K= $%>$11(1 "(9 T'%>:B%$96 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666 UV
Q6R6U K(1:(;"$9 0W;":>(9 K= H(1:(;"$9 01:H(?(9666666666666666666666666666666666666666666666666666666666666666666666666666666 US
,#6M42)& R= P'<<#37'(4#$ %' %'62<#87K(99999999999999999999999999999999999999999999999999999999999999 SS
2.1 Besciipcion uel capitulo. .......................................................................................................................SS
2.2 Instalacion. ..................................................................................................................................................SS
2.S La consola }avaSciipt. .............................................................................................................................SS
2.4 Bocument 0bject Nouel inspectoi (inspectoi uel B0N). .......................................................S6
2.S venkman(Bepuiauoi ue }avasciipt)................................................................................................S8
2.6 FiieBug (Touo lo anteiioi en uno)....................................................................................................42
S6F6Q I$93(X( ?$ >B%9B"(6 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 YU
S6F6S I$93(X( ?$ ?$;'&&$1 .?$0'1(?B156 666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 YF
S6F6U I$93(X( ?$" :%90$>3B16 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 YN
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K(999999999999999999999999999999999999999999999999999 WX
S.1 Besciipcion uel capitulo....................................................................................................................49
S.2 Inseitai couigo BTNL. .......................................................................................................................Su
S.S Inseitai imgenes usanuo el B0N................................................................................................S2
S.4 Inseitai couigo }avaSciipt. ...............................................................................................................S6
S.S B0N API. ..................................................................................................................................................S9
S.6 B0N API e inneiBTNL enfientauos. ...........................................................................................61
S.7 Encapsulacion uel objeto XNLBttpRequest. ............................................................................64

U6N6Q I$3:>:L% ?$ >L?:&B *+,- B 3$23B66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 FY
U6N6S I$3:>:L% ?$ "( ?:1$>>:L% ?$ '%( :E(&$% 666666666666666666666666666666666666666666666666666666666666666666666666666666666 FF
U6N6U I$3:>:L% ?$ >L?:&B G(H(=>1:03 / "(%Z(1"B6 666666666666666666666666666666666666666666666666666666666666666666666666666666 F[
S.8 Nanejo ue eiioies. ...............................................................................................................................69
S.9 Bai sopoite al usuaiio. ......................................................................................................................72
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 999999999999999999999999999999999999999999999999999999 YL
4.1 Besciipcion uel capitulo....................................................................................................................7S
4.2 La web actual. ........................................................................................................................................7S
4.S Ntouos uET, P0ST y caiacteies especiales en Inteinet. ...................................................76
Y6U6Q \%31B?'>>:L% ( "B9 E]3B?B9 ^!+ / ID=+6 6666666666666666666666666666666666666666666666666666666666666666666666666666666 NF
Y6U6S <(1(>3$1$9 $90$>:("$96 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 NN
Y6U6U <(E;:B9 $% "( ":;1$1M( 0(1( _'$ (>$03$ "B9 S E]3B?B96 666666666666666666666666666666666666666666666666666 N[
Y6U6Y !)$E0"B ?$ '9B ?$ "B9 E]3B?B9 ^!+ / ID=+6 666666666666666666666666666666666666666666666666666666666666666666666666 NR
4.4 Leei las cabeceias uel objeto XNLBttpRequest. ....................................................................81
4.S Auto veiificacion y ienuimiento en A}AX. .................................................................................8S
4.6 Piuienuo y analizanuo uocumentos XNL...................................................................................87
4.7 Refiescai la pantalla automticamente......................................................................................89
4.8 0na base ue uatos cieaua con el B0N y guaiuaua con A}AX. ...........................................92
Y6[6Q <1$(1 '%( 3(;"( ?:%`E:>(E$%3$6 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 RU
Y6[6S ^'(1?(1 :%TB1E(>:L% ?$ :%%$1*+,- '9(%?B aGa86 6666666666666666666666666666666666666666666666666666666666 R7
4.9 Bai infoimacion uinmicamente utilizanuo los eventos y el B0N. ...............................99
Y6R6Q !)$E0"B Q b +(;"( 1$"(3:H( ( B31( 3(;"(6 666666666666666666666666666666666666666666666666666666666666666666666666666666QVV
Y6R6S !)$E0"B S b +(;"( 1$"(3:H( (" 0'%3$1B ?$" 1(3L%66666666666666666666666666666666666666666666666666666666666666QVU
4.1u Auto completauo empleanuo A}AX. ........................................................................................ 1uS
"7O)7&@<#VM# 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999NNR
J(4<&%2887K( L

J(4<&%2887K(
Antes ue empienuei la lectuia ue este texto hay cieitas cosas que seiia bueno
conocei paia entenuei peifectamente que es A}AX y en qu lugai se ubica uentio
uel uesaiiollo ue aplicaciones web. Poi ello apiovechaiemos esta intiouuccion
paia hablai uel entoino que iouea A}AX, ue esta maneia, cuanuo se comience el
piimei capitulo, el lectoi estai mejoi piepaiauo.
H# "#$' %' )# Z'O /842#)
Piimeio sei bueno iepasai las tecnologias estnuai que ue las que uisponemos
en touos los navegauoies.
;) )'(@2#G' PT>H [P56'<T'\4 >#<]26 H#(@2#@'^
BTNL es el lenguaje bsico con el que pouemos cieai pginas web, con el paso
uel tiempo se han iuo aauienuo etiquetas a las que ya tenia auems ue uai
sopoite a otios lenguajes como CSS (Cascaue Style Sheets).

Las veisiones anteiioies a la S.2 uel lenguaje estn ya cauucauas y no son tiles
hoy uia; hoy en uia un nuevo pioyecto se uebeiia empienuei intentanuo seguii
el estnuai XBTNL que es la ltima veision, apiobaua en eneio 2uuu.
;) )'(@2#G' 1PT>H ['14'($7O)' PT>H^
Este lenguaje es el que ha supuesto el mayoi cambio uesue 1997 (BTNL S.2), ya
que busca piopoicionai pginas web iicas en conteniuo a un amplio abanico ue
uispositivos PC, Noviles y uispositivos con conexion inalmbiica.
1>H ['14'($7O)' >#<]26 H#(@2#@'^
XNL es un metalenguaje que fue iueauo paia "uesciibii" un conjunto ue uatos
como puuieia sei los campos ue una tabla paia inteicambiai infoimacion ue
foima ipiua y fcil. Tambin peimite especificai como tienen que sei los uatos,
poi lo que se ueciuio especificai el lenguaje BTNL con XNL y nacio XBTNL.
,AA [,#$8#%' A45)' A_''4$^- P&G#$ %' '$47)&
En los piimeios tiempos ue las pginas web, se tenia en un mismo uocumento
".html" tanto los piiafos ue texto e imgenes como su estilo, e inuicbamos el
tipo ue atiibutos uel texto uentio ue las etiquetas BTNL.

Ahoia que tenemos las CSS, asignamos a las etiquetas una clase uentio uel
uocumento ".html", y a esa clase conteniua en otio uocumento le especificamos el
foimato, ue esta foima tenemos uos uocumentos: uno con los uatos y otio que
uice como ueben iepiesentaise.

J(4<&%2887K( `

Si quisiiamos hacei un cambio en la iepiesentacion ue una web compuesta poi
1uu pginas y las 1uu leen el mismo CSS, con un solo cambio en el ".css"
habiiamos cambiauo toua la iepiesentacion automticamente.
?a> [?&823'(4 aOG'84 >&%')^
Cuanuo se caiga una pgina web en el navegauoi, ste ltimo ciea asociauo a la
pgina una seiie ue objetos, ue maneia que meuiante un lenguaje utilizable en la
paite uel navegauoi(el cliente), como }avaSciipt, pueuen mouificaise las
caiacteiisticas ue esos objetos y con ello la pgina en si.

Ya que la pgina se actualiza inmeuiatamente si iealizamos algn cambio con
}avaSciipt, se estamos hablauo uel timino BTNL uinmico: BBTNL (Bynamic
BTNL).
H'(@2#G'$ %' ,)7'(4'- [0#D#A8<764^
Cuanuo el usuaiio ve una pgina web en su navegauoi, sta pueue tenei, apaite
uel couigo BTNL, couigo esciito en un lenguaje ue sciipt que se utiliza
noimalmente paia uotai ue uinamismo a las pginas, obtenienuo BBTNL.

El piincipal lenguaje utilizauo hoy uia es }avaSciipt; nacio con Netscape 2.u y la
veision actual es la 1.9. Poi su paite Niciosoft tambin tiene otia
implementacion ue }avaSciipt llamaua }sciipt con su veision S.8.
H'(@2#G'$ %' A'<D7%&< [0A*- *P*- F2O5- '489^
A veces necesitamos enviai infoimacion al seiviuoi y que ste la piocese y nos
iesponua (poi ejemplo al conectaise a nuestia cuenta ue coiieo), o que guaiue
infoimacion (poi ejemplo en un foio). Paia este piocesamiento se utilizan los
lenguajes ue seiviuoi PBP, }SP (el que utiliza este texto), etc. Pueues elegii el que
ms te guste con sus pios y sus contias, y su uinmica ue funcionamiento es la
siguiente:

Tenemos una pgina esciita en alguno ue estos lenguajes guaiuaua en el
seiviuoi; cuanuo un usuaiio (cliente) acceue, el seiviuoi la ejecuta y le uevuelve
el iesultauo al cliente, que sei solo BTNL, no contenui lenguajes uel lauo uel
seiviuoi ya que el navegauoi no los compienue.
b7$7K( '( ,&(G2(4&
Tenuiemos un usuaiio que caiga en su navegauoi una pgina compuesta poi
XBTNL y }avaSciipt cuyo estilo est en un aichivo CSS si lo sepaiamos; el
navegauoi ciea el B0N asociauo a la pgina y el }avaSciipt lo mouifica paia
conseguii uinamismo.

Tenemos en el seiviuoi pginas hechas con }SP, cuanuo el usuaiio piue una ue
estas pginas, el seiviuoi la ejecuta y uevuelve el iesultauo al usuaiio ya sea una
pgina XBTNL u otio tipo ue infoimacion.

J(4<&%2887K( Y

H#$ FJ/ [F78_ J(4'<('4 /66)78#47&( T'8_(&)&@7'$^
Paia que entenuamos la necesiuau ue uso ue A}AX, vamos a vei una seiie ue
timinos, pioblemas y posibles soluciones y vei cul es el papel ue A}AX uentio
ue touo esto.
,#<#84'<M$478#$ %' 2(# #6)78#87K( %' '$8<74&<7&
Si le echamos un vistazo a una aplicacion tipica ue esciitoiio vemos que tiene las
siguientes cualiuaues.
Responue ue foima intuitiva y ipiua.
Ba iespuesta inmeuiata a los actos uel usuaiio.

,#<#84'<M$478#$ %' 2(# #6)78#87K( Z'O ,&(D'(87&(#)
Caua vez que pulsamos sobie un link, espeiamos y la pgina se iefiesca.
La pgina iefiesca touos los eventos, envios y uatos ue la navegacion.
El usuaiio uebe espeiai la iespuesta.
Nouelo ue peticioniespuesta ue comunicaciones sinciono.
El estauo uel tiabajo que estamos uesaiiollanuo se basa en qu pgina
estamos.
*<&O)'3#$ %' 2(# #6)78#87K( c'O 8&(D'(87&(#)
Respuesta lenta.
Piuiua uel contexto uuiante el iefiesco.
Peiuemos infoimacion en la pantalla que habiamos iellenauo.
Peiuemos la posicion uel scioll ue la pantalla.
No tenemos iespuesta inmeuiata a nuestios actos.
Tenemos que espeiai que llegue la siguiente pgina.

Poi estas iazones nacieion las (RIA), Rich Inteinet Application Technologies.
Applet
Auobe Flash
}ava WebStait
BBTNL
A}AX

Besglosemos caua una ue las RIA paia vei sus pios y sus contias.

!""#$%
Positivo
o Pueue hacei uso ue touas las APIS }ava.
o Su uesaiiollo tiene un pation ue tiabajo bien uefiniuo.
o Pueue manipulai gificos, uifeientes hebias y cieai Inteifaces
0suaiio avanzauas.
Negativo
o El navegauoi necesita un complemento.
o El tiempo ue bajaua uel APPLET pueue sei muy gianue.
J(4<&%2887K( d

!'()$ *#+,-
Fue uiseauo paia vei Peliculas Inteiactivas aunque ahoia se utiliza mucho paia
hacei juegos.
Positivo
o Es capaz ue uai un aspecto visual inigualable actualmente con
otias tecnologias paia una pgina web.
o Nuy bueno paia mostiai gificos vectoiiales SB.
Negativo
o ActionSciipt es una tecnologia piopietaiia.
o El tiempo ue bajaua uel viueo o piogiama suele sei muy gianue (lo
bonito se paga).
.+/+ 0$)1%+2%
Pouemos uecii que nos piopoiciona uesue Inteinet una aplicacion ue esciitoiio.
Positivo
o 0na vez caigauo, nos ua una expeiiencia similai a una aplicacion
ue esciitoiio.
o 0tiliza Tecnologia muy extenuiua como }ava.
o Las aplicaciones se pueuen fiimai uigitalmente.
o Se pueuen seguii utilizanuo una vez uesconectauo
Negativo
o Pioblema ue compatibiliuau con las aplicaciones viejas ya que se
han cambiauo algunas cosas.
o El tiempo que pueue taiuai en uescaigai una aplicacion ue
esciitoiio es uemasiauo gianue.
34567 8 4567 9 .+/+,:2;"% 9 3<6 9 =11
P0SITIv0
o Se utiliza paia cieai aplicaciones inteiactivas y ms ipiuas.
NEuATIv0
o La comunicacion es sinciona.
o Requieie el iefiesco completo ue la pgina, peiuienuo paite uel
contexto.
!.!> 8 34567 9 >674%%"?$@A$,%
Es un iefinamiento uel BBTNL, utiliza touas sus heiiamientas, sumnuole el
objeto XNLBttpRequest paia obtenei infoimacion ue maneia asinciona y
iefiescai solo la paite necesaiia ue la pgina sin peiuei naua uel contexto, se
teiminaion los pioblemas uel BBTNL.

Positivo
o La mejoi tecnologia RIA hasta el momento.
o Est en su mejoi momento paia la inuustiia.
o No necesitamos uescaigai un complemento.
Negativo
o Touavia existen incompatibiliuaues entie navegauoies (caua vez
menos).
J(4<&%2887K( X

o Besaiiollo con }avaSciipt, hace un pai ue aos no muy exploiauo
peio hoy en uia con cieita consistencia.

Con touo lo anteiioi, vemos que hoy en uia, una ue las mejoies posibiliuaues y
ms nueva paia ofiecei una expeiiencia iica al usuaiio es la utilizacion ue A}AX.
/)@2(&$ 'G'36)&$ <'#)'$ %' /0/1
Lo mejoi es vei algunas posibiliuaues uel uso ue A}AX, se va a hacei mencion
piimeio a la piimeia aplicacion A}AX conociua, Niciosoft invento el objeto que
ms taiue se conveitiiia en el XNLBttpRequest y lo uso en su veision web uel
0utlook (veision ue 1998).

!"#$%&'()*+ 1 0utlook Web Access, imagen encontiaua buscanuo en uoogle.

Como, es que no empezo su utilizacion masiva hasta el ao 2uuS. Solo Inteinet
Exploiei eia capaz ue geneiai el objeto XNLBttpRequest(llamauo ue otio
mouo).

Cuanuo Nozilla Fiiefox, el navegauoi ms gianue ue la competencia, implemento
un objeto compatible, y ms taiue el iesto ue navegauoies ue couigo abieito,
empezo el boom.

0tio gian ejemplo uel uso ue A}AX es uoogle Naps ( http:maps.google.com ),
que es ms conociuo y la veiuau llama muchisimo ms la atencion poi la
cantiuau ue zoom que se pueue hacei en los mapas, conviitinuose en una
veiuaueia guia paia no peiueinos poi la ciuuau.

J(4<&%2887K( Ne

!"#$%&'()*+ 2 uoogle Naps, vista ue Espaa.
f&4#$ V7(#)'$
La uocumentacion que sigue ha siuo uesaiiollaua basnuose en muchas fuentes,
se ha hecho intentanuo que la cuiva ue apienuizaje sea lo menos pionunciaua
posible poi si hay peisonas que se quieien iniciai en el uesaiiollo web con A}A
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NN

,#6M42)& N= ;) &OG'4&
1>HP446F'Q2'$4
N9N ?'$8<7687K( %') 8#6M42)&9
Paia comenzai se va a constiuii una pequea libieiia piogiamaua hacienuo uso
ue }avaSciipt, piimeio paia compienuei como funciona el objeto
XNLBttpRequest que se ha hecho muy famoso ya que constituye las entiaas ue
A}AX y segunuo poique es muy iecomenuable utilizai una libieiia en el lauo
cliente paia ahoiiainos no solo pioblemas, como veiemos seguiuamente, sino
tambin paia no iepetii el mismo couigo continuamente.

Es muy iecomenuable que si el lectoi piensa piobai y mouificai el couigo fuente
ue los ejemplos (la mejoi foima ue apienuei), instale Apache Tomcat, un
conteneuoi web capacitauo paia ejecutai pginas }SP que son las que se utilizan
en este libio.

Los apaitauos uel capitulo con su uesciipcion geneial son las siguientes:

1.2 Razones paia utilizai una libieiia en el lauo cliente
Enumeiaiemos las iazones paia hacei la libieiia ya que
sino no tiene mucho sentiuo haceila.
1.S La uepenuencia ue los navegauoies
veiemos las uifeiencias a la hoia ue cieai el objeto en los
uifeientes navegauoies, peio tambin veiemos que el mouo
ue empleo es igual.
1.4 Navegauoies compatibles
Aunque el objeto no es 1uu% compatible con touos los
navegauoies uebemos pensai que si, en touas las ltimas
veisiones ue los navegauoies actuales.
1.S Ntouos y piopieuaues uel objeto
En este apaitauo tenuiemos una vision geneial ue touas las
funciones y piopieuaues a las que pouemos acceuei y en
qu momento tiene sentiuo utilizailas.
1.6 Constiuctoi uel objeto XNLBttpRequest
Baiemos una funcion que constiuya el objeto compatible al
navegauoi con el que estamos usanuo.
1.7 Peticiones sincionas y asincionas
Compienuei qu uifeiencia hay entie ellas cuanuo se
utilizan hacienuo uso uel objeto XNLBttpRequest y poi qu
solo usaiemos las asincionas.
1.8 La clase peticion A}AX
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NR

Constiuiiemos una clase que nos libeie uel tiabajo
iepetitivo ue cieai cieitas funciones que son necesaiias en
caua peticion.
1.9 Esciibii clases en }avaSciipt
Compienuei el poi qu est constiuiua la clase peticion
A}AX ue la foima que est, asi como una vision ue como se
ciean los piototipos (clases ue }avaSciipt) y las uifeiencias
ue stos con las clases ue }ava que son mas conociuas paia
que se compienua bien tanto el couigo ue la clase peticion
A}AX como el siguiente couigo que esciibamos en
}avaSciipt.

N9R F#E&('$ 6#<# 247)7E#< 2(# )7O<'<M# '( ') )#%& 8)7'(4'9
-'&'(%.&/$%)('$ 01$)('$ 2#. 3.0. (#0&)& #+' ")0&.&/' .+ ." "'34 3." (").+%.5
La tecnologia que use el seiviuoi uebe sei inuifeiente, es uecii no uebe
actuai uiiectamente con tecnologias como PBP, }SP, ASP, etc.
Bebe sei accesible en cualquiei momento, localmente a sei posible.
Bebe manejai las incompatibiliuaues ue los navegauoies y hacei el couigo
compatible.
Bebe manejai la comunicacion asinciona ocultanuo las opeiaciones a bajo
nivel.
Bebe uai al uesaiiollauoi una foima fcil ue acceuei al B0N.
Bebe uai cieito manejo ante eiioies, piimeio paia que el piogiama no se
iompa y segunuo paia piopoicionai cieita infoimacion al uesaiiollauoi.
Bebeiia ue intentai seguii una piogiamacion oiientaua a objetos y que
stos fueian ieutilizables.

Como pueue veise las libieiias ahoiiain multituu ue pioblemas, ue otia
maneia intentai hacei una aplicacion Web meuianamente vistosa se convieite
en un tiabajo paia chinos, que auems sei casi imposible ue mantenei.

-'&'(%.&/$%)('$ '6'+7'3'$ 2#. 843&/' (#0&)& #+' ")0&.&/' .+ ." "'34 3."
(").+%.5
Piopoicionai uifeientes objetos gificamente agiauables uiiectamente,
como calenuaiios, botones, ventanas uesplegables, etc.
Piopoicionai inteifaces ue usuaiio avanzauas, con animaciones y
uifeientes efectos gificos que hagan la expeiiencia ms agiauable.

9'74+.$ 8'&' #%)")7'& #+' 3. "'$ ")0&.&/'$ '6'+7'3'$ :' .;)$%.+%.$ .+
!+%.&+.%5
Son mejoies que la tuya piopia ya que estn echas noimalmente poi
multituu ue uesaiiollauoies.
Establecen comuniuaues ue foima que la comuniuau le aaue
piestaciones y es fcil conseguii ayuua en sus foios.
Los entoinos IBE no taiuain mucho tiempo en uaile sopoite, al menos a
las ms impoitantes ue couigo abieito.

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NS

La libieiia que constiuiiemos cubiii las caiacteiisticas bsicas; paia cubiii las
caiacteiisticas avanzauas existen multituu ue libieiias ue couigo abieito y
comeiciales, auems no apoitan uemasiauo a la compiension uel pioblema que
iesuelve A}AX sino ms bien, como he uicho ya, mejoian la expeiiencia visual.
Auems muchas ue ellas pueuen sei uificiles ue utilizai paia el usuaiio no
expeito y las que pueuen sei mas fciles esconuen totalmente el pioblema, las
usaiemos paia tiabajai mas fcilmente una vez sepamos utilizai A}AX a bajo
nivel.

Si vamos a utilizai A}AX a bajo nivel lo piimeio que uebemos apienuei es como
cieai el objeto en los uifeientes navegauoies y las similituues y uifeiencias que
son minimas al tiatailo en uno y otio, auems ue solucionailas, asi que
empezaiemos poi aqui en el siguiente punto.

N9S H# %'6'(%'(87# %' )&$ (#D'@#%&<'$9
Antes ue empezai a tiabajai uebemos ue sabei que el objeto XNLBttpRequest no
es estnuai, fue oiiginaiiamente inventauo poi Niciosoft, usauo uesue Inteinet
Exploiei S.u como un objeto ActiveX, sienuo accesible meuiante }avaSciipt.
Nozilla Fiiefox en su veision 1.u implemento un objeto compatible.

Ya que estos uos son los navegauoies mas uifunuiuos y auems hay navegauoies
basauos en el couigo ue Nozilla Fiiefox, intentaiemos que lo que hagamos sea
compatible en ambos, ue esta maneia conseguiiemos que nuestio couigo
funcione mas uel 9u% ue las veces ya que estos navegauoies abaican el
meicauo.

<=.>8"4 ? .+ !+%.&+.% <;8"4&.&
Aichivo "ejemploIE.html
<html><head><title>Pgina de ejemplo</title>
<script language="JavaScript" type="text/javascript">
var peticion01 = null; //Creamos la variable
//Para Internet Explorer creamos un objeto ActiveX
peticion01 = new ActiveXObject("Microsoft.XMLHTTP");
function Coger(url) {//Funcin coger, en esta caso le entra
una direccin relativa al documento actual.
if(peticion01) { //Si tenemos el objeto peticion01
peticion01.open('GET', url, false); //Abrimos la
url, false=forma sncrona
peticion01.send(null); //No le enviamos datos al
servidor.
//Escribimos la respuesta en el campo con
ID=resultado
document.getElementById('resultado').innerHTML =
peticion01.responseText;
}
}
</script>

</head>
<body>

<button onclick="Coger('datos/videoclub.xml')">Coge un
documento</button>
<table border="4">
<tr>

<td><span id="resultado">Sin resultado</span></td>
</tr>
</table>
</body></html>
Aichivo "uatosviueoclub.xml"
<?xml version="1.0" encoding="UTF-8"?>

<VideoClub>

<Pelicula>
<Titulo>El rey Leon</Titulo>
<Duracion>87 Min</Duracion>
<Genero>Animacion infantil</Genero>
</Pelicula>

<Pelicula>
<Titulo>Aladin</Titulo>
<Duracion>86 Min</Duracion>
<Genero>Animacion infantil</Genero>
</Pelicula>

</VideoClub>

Poi ahoia no usai aichivos XNL con acentos, ya que estos caiacteies saluin
sustituiuos poi un simbolo extiao y es un pioblema que se iesolvei ms taiue.

!"#$%&'()*+ S Piimei ejemplo antes ue pulsai el boton.
!"#$%&'()*+ 4 Piimei ejemplo, uespus ue iecibii la infoimacion.
Como vemos se ha actualizauo el campo ue la pgina sin necesiuau ue iefiescaila
con el boton uel navegauoi, peio este ejemplo no funcionaiia en Nozilla Fiiefox,
veamos los cambios que habiian en el couigo.

<=.>8"4 ? .+ @47)""' A)&.B4;
Lo nico que tenuiemos que hacei sei copiai el aichivo "ejemploIE.html",
ienombiailo "ejemploNF.html" y cambiai la linea:
peticion01 = new ActiveXObject("Microsoft.XMLHTTP");
Poi la siguiente:
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NL

peticion01 = new XMLHttpRequest();
En los siguientes ejemplos, el couigo iemaicauo iesalta qu cambia entie un
ejemplo y el siguiente.
Con esto geneiamos en vez uel 0bjeto ActiveX el XNLBttpRequest que es
compatible con ste, al sei compatible no necesitamos cambiai mas lineas ue
couigo, veamos el ejemplo otia vez, funcionanuo ahoia en Nozilla Fiiefox.

!"#$%&'()*+ S Piimei ejemplo, ahoia caigauo en Nozilla Fiiefox.
!"#$%&'()*+ 6 Piimei ejemplo, mostianuo el iesultauo en Nozilla Fiiefox.
Como hemos visto la uifeiencia en el couigo no es mas que cambiai el objeto que
se ciea, paia que el ejemplo funcione en cualquiei navegauoi bastaiia con
uetectai el tipo ue navegauoi y cieai un objeto u otio; como esto es posible, es lo
siguiente que haiemos, asi uejaiemos ue pensai en los navegauoies, peio antes
seiia bueno que le echemos un vistazo a los navegauoies compatibles y las
piopieuaues uel objeto, asi teiminaiemos con la paite ms teoiica.

N9W f#D'@#%&<'$ 8&36#47O)'$9
Aunque nos centiemos en Nozilla Fiiefox e Inteinet Exploiei, la lista completa
ue los navegauoies que actualmente sopoitan el objeto XNLBttpRequest es la
siguiente:

Nozilla Fiiefox 1.u y supeiioies
Netscape veision 7.1 y supeiioies
Apple Safaii 1.2 y supeiioies
Niciosoft Inteinet Exploiei S y supeiioies
Konqueioi
0peia 7.6 y supeiioies

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 N`

Como vemos esta muy extenuiuo aunque no touos los navegauoies lo sopoitan,
ya que hay ms, peio pouemos uecii que en oiuenauoies peisonales supeiamos
el 9S% ue los posibles clientes, auems, se est tiabajanuo actualmente en
navegauoies paia llevai A}AX hasta los uispositivos moviles.

N9L >U4&%&$ 5 6<&67'%#%'$ %') &OG'4&9
@C%434$
Ya sea en Inteinet Exploiei como en Nozilla Fiiefox, como hemos visto
anteiioimente, el objeto tiene una seiie ue mtouos (funciones) que usamos
paia hacei la peticion y se hace ue igual maneia en los uos navegauoies.

Los mtouos 48.+ y $.+3 son los que empleamos paia establecei la conexion e
iniciai la conexion, pouemos uecii que son los obligatoiios y los que vamos a
utilizai ms.

@C%434$ D.$(&)8()*+
open(mtodo, URL, banderaAsync,
nombreuser, password)
Segn el mtodo (GET o POST) y la URL se prepara
la peticin. Si la banderaAsync=true Peticin
asncrona, si es fase la peticin es sncrona.
nombreuser y password solo se usan para acceder a
recursos protegidos.
senu(conteniuo) Ejecuta la peticion, uonue la vaiiable conteniuo
son uatos que se envian al seiviuoi.
abort() Para la peticin que est procesando.
getAllResponseHeaders()
Devuelve todas las cabeceras de la llamada HTTP
como un string.
getResponseHeader(cabecera) Devuelve la cabecera identificada por la etiqueta.
setRequestHeader(etiqueta, valor)
Establece el valor de una etiqueta de las cabeceras de
peticin antes de que se haga la peticin.

E&48).3'3.$
Auems el objeto tambin tiene una seiie ue piopieuaues que cuanuo hacemos
una peticion ue infoimacion nos inuican como fue la peticion (una vez
teiminaua) y que noimalmente utilizaiemos ue la siguiente maneia.

//Cdigo devuelto por el servidor, del tipo 404 (documento no
encontrado) o 200 (OK).
document.getElementById('estado').innerHTML = peticion01.status;
//Mensaje de texto enviado por el servidor junto al cdigo (status),
para el caso de cdigo 200 contendr OK.
document.getElementById('txtestado').innerHTML =
peticion01.statusText;
//Los datos devueltos por el servidor en forma de cadena.
document.getElementById('txtresultado').innerHTML =
//Datos devueltos por el servidor en forma de documento XML que
puede ser recorrido mediante las funciones del DOM
(getEementsByTagName, etc.).
document.getElementById('xmlresultado').innerHTML =
peticion01.responseXML;

Como vemos ahoia, en el ejemplo anteiioi se ha utilizauo el &.$84+$.F.;% paia
cogei los uatos uel uocumento XNL como texto (un stiing) y como hemos hecho
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NY

en el ejemplo anteiioi pouemos aauii campos a la tabla con el )3 inuicauo y
obtenei el siguiente iesultauo.

!"#$%&'()*+ G Piopieuaues uel objeto mostiauas en Inteinet Exploiei y Nozilla Fiiefox.
En la ilustiacion anteiioi se tiene que las S piimeias piopieuaues uel objeto son
iguales en los 2 navegauoies, en cambio en la ltima uepenuienuo uel navegauoi
se muestia un texto uifeiente.

A touo lo anteiioi pouemos sumai otias piopieuaues que pouemos consultai
mientias uuia la peticion paia conocei su estauo.

/*Sus valores varan desde 0(no iniciada) hasta 4(completado), en
cualquier caso tienes que hacer un switch, no puedes escribir su
valor directamente.*/
document.getElementById('estadoconexion').innerHTML =
peticion01.readyState;
/*Contiene el nombre de la funcin ejecutada cada vez que el estado
conexin cambia, es decir, nosotros asignamos una funcin que cada
vez que el estado dado por readyState cambia se lanza, por ejemplo
podramos poner un grfico cuando estemos en el estado de carga,
etc., como la anterior, no la puedes escribir directamente como
texto*/
document.getElementById('estadocambiante').innerHTML =
peticion01.onreadystatechange

Con lo cual, el cuauio iesumen, ue las piopieuaues uel objeto seiia el siguiente:

E&48).3'3.$ D.$(&)8()*+
status Cdigo devuelto por el servidor
statusText Texto que acompaa al cdigo
responseText Datos devueltos formato string
responseXML Datos devueltos formato Objeto XML
readyState
Estado actual de la peticin.
0: Sin iniciar
1: Cargando
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Nd

2: Cargado
3: Interactivo (algunos datos devueltos)
4: Completado
onreadystatechange
Puntero a la funcin del manejador que se llama
cuando cambia readyState.

Lo que hemos uicho aqui lo usaiemos en los ejemplos siguientes ya que A}AX se
basa en jugai con el objeto XNLBttpRequest como ya hemos uicho
anteiioimente.

N9` ,&($4<284&< %') &OG'4& 1>HP446F'Q2'$49
Llegauos a este punto y como hemos uicho anteiioimente, haiemos una sencilla
funcion que uetectai el navegauoi uonue est funcionanuo la pagina web y
segn ste se cieai el objeto ue Inteinet Exploiei o Nozilla Fiiefox o lo que es lo
mismo el objeto ActiveX ue Niciosoft o el objeto XNLBttpRequest estnuai que
sopoitan el iesto ue los navegauoies.

Los cambios en el couigo piincipal uel ejemplo anteiioi son minimos y estn
iemaicauos, lo nico que vamos a hacei va a sei aauii una libieiia que
contenui una funcion a la que llamamos en vez ue la funcion XNLBttpRequest()
o ActiveX0bject().

Aichivo "ejemplo.html"
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NX

<html>
<head>
<title>Pgina de ejemplo</title>
<script language="javascript"
src="lib/ConstructorXMLHttpRequest.js"></script>
var peticion01 = null; //Creamos la variable para el objeto
XMLHttpRequest
//Este ejemplo emplea un constructor, debera funcionar en cualquier
navegador.
peticion01 = new ConstructorXMLHttpRequest();
function Coger(url) //Funcin coger, en esta caso le entra una
direccin relativa al documento actual.
{
if(peticion01) //Si tenemos el objeto peticion01
{
peticion01.open('GET', url, false); //Abrimos la url, false=forma
sncrona
peticion01.send(null); //No le enviamos datos al servidor
//Escribimos la respuesta en el campo con ID=resultado
}
}
</script>

</head>
<body>

<button onclick="Coger('datos/videoclub.xml')">Coge un
documento</button>
<table border="4">
<tr>
</tr>
</table>
</body></html>
Esta es la paite ms sencilla, ahoia umosle un vistazo a la funcion inteiesante,
uetectaiemos el navegauoi o ms bien si tiene un mtouo ue cieacion
XNLBttpRequest o ActiveX0bject, estos se pueuen compiobai si estn en el
objeto winuow que en }avaSciipt es el objeto ms alto en la jeiaiquia uel
navegauoi.

Aichivo "lib\ConstiuctoiXNLBttpRequest.js"
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Re

function ConstructorXMLHttpRequest()
{
if(window.XMLHttpRequest) /*Vemos si el objeto window (la base de
la ventana del navegador) posee el mtodo
XMLHttpRequest(Navegadores como Mozilla y Safari). */
{
return new XMLHttpRequest(); //Si lo tiene, crearemos el objeto
con este mtodo.
}
else if(window.ActiveXObject) /*Sino tena el mtodo anterior,
debera ser el Internet Exp. un navegador que emplea objetos
ActiveX, lo mismo, miramos si tiene el mtodo de creacin. */
{
/*Hay diferentes versiones del objeto, creamos un array, que
contiene los diferentes tipos desde la
versin mas reciente, hasta la mas antigua */
var versionesObj = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');

for (var i = 0; i < versionesObj.length; i++)
{
try
{
/*Intentamos devolver el objeto intentando crear las diferentes
versiones se puede intentar crear uno que no existe y se
producir un error. */
return new ActiveXObject(versionesObj[i]);
}
catch (errorControlado) //Capturamos el error, ya que podra
crearse otro objeto.
{
}
}
}
/* Si el navegador llego aqu es porque no posee manera alguna de
crear el objeto, emitimos un mensaje de error. */
throw new Error("No se pudo crear el objeto XMLHttpRequest");
}

Paia su mejoi compiension se ha comentauo el couigo con mucha atencion, si se
lee tianquilamente se entienue peifectamente.

Ahoia pouemos uejai ue pieocupainos poi el navegauoi, y nos pouemos centiai
en utilizai el objeto coiiectamente.

N9Y *'4787&('$ $M(8<&(#$ 5 #$M(8<&(#$9
Si volvemos sobie nuestio ejemplo y nos fijamos en la siguiente linea:
peticionu1.open('uET', uil, false); Abiimos la uil, false=foima sinciona
Si pensamos un momento la tcnica A}AX viene ue Asinciono, entonces poiqu
estamos hacienuo peticiones sincionas y que uifeiencia hay., esto es lo siguiente
que vamos a vei.

Si iealizamos un peticion sinciona el navegauoi queua bloqueauo hasta que
iecibe la infoimacion, hasta ahoia no lo hemos notauo ya que estamos hacienuo
unas piuebas muy sencillas y no estamos iecibienuo gian cantiuau ue
infoimacion.
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RN

Paia uainos cuenta ue la situacion vamos a peuii una pgina hecha en }SP que
tiene una espeia coita, seguimos basnuonos en nuestio ejemplo, cambianuo
una linea:

<script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js">
</script>
var peticion01 = null; //Creamos la variable para el objeto

function Coger(url) { //Funcin coger, en esta caso le entra
peticion01.open('GET', url, false); //Abrimos la url,
false=forma sncrona
peticion01.send(null); //No le enviamos datos al servidor
//Escribimos la respuesta en el campo con ID=resultado
}
}
</script>

</head>
<body>
<button onclick="Coger('espera.jsp')">Coge un documento</button>
<table border="4">
<tr>
</tr>
</table>
</body>
</html>

Aichivo "espeia.jsp"
<%
Thread.sleep(1000);
out.print("Es molesto tener que esperar de esta manera porque no
puedes hacer nada.");
%>

Apaite ue esto, seguiiemos utilizanuo el constiuctoi que hemos hecho, tal como
est, ejecutemos la pgina vei el iesultauo.
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RR

!"#$%&'()*+ H Pioblemas ue una peticion sinciona, mostiauos en Nozilla Fiiefox. El boton
peimanece pulsauo y la pgina bloqueaua (no iesponue) hasta que se iecibe la infoimacion
peuiua.
En cambio si iealizamos una peticion asinciona el usuaiio queua libie ue
seguiise movinuose poi la pgina hasta que iecibe la infoimacion, es uecii,
aumentamos la inteiactiviuau, en el ejemplo anteiioi, no nos queuaiiamos con el
boton pulsauo espeianuo algo y pouiiamos seguii uesplaznuonos poi la pgina
(somos conscientes ue que en este ejemplo no hay mucho poi uonue
uesplazaise), paia esto bastaiia con cambiai el false poi un tiue:

peticion01.open('GET', url, true); //Abrimos la url, true=forma
asncrona

El bloque ue couigo }avaSciipt funciona igual, solo que queua bloqueauo en
segunuo plano a la espeia ue iecibii el iesultauo ue la peticion peio sin bloqueai
al navegauoi; ue ahoia en auelante utilizaiemos peticiones asincionas paia
aumentai la inteiactiviuau.

Ahoia suige un pioblema, como sabe el usuaiio que est espeianuo la
infoimacion, si no tiene muestia alguna ue ello., l solo sabe que ha pulsauo un
boton (en nuestio ejemplo), lo iueal seiia que iecibieia alguna seal, bueno eso
es lo que haiemos en el siguiente ejemplo, ue foima asinciona.

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RS

</script>
var peticion01 = null;
//Creamos la variable para el objeto xmlhttprequest
//Se llama cuando cambia peticion01.readyState.
function estadoPeticion() {
switch(peticion01.readyState) { //Segn el estado de la
peticin devolvemos un Texto.
case 0: document.getElementById('estado').innerHTML =
"Sin iniciar";
break;
"Cargando";
break;
"Cargado";
break;
"Interactivo";
break;
"Completado";
//Si ya hemos completado la peticin, devolvemos adems
la informacin.
document.getElementById('resultado').innerHTML=
break;
}
}
function Coger(url) { //Funcin coger, en esta caso le entra
peticion01.open('GET', url, true); //Abrimos la url,
true=forma asncrona
/*Asignamos la funcin que se llama cada vez que cambia
el estado de peticion01.readyState Y LO HACEMOS ANTES THE HACER EL
SEND porque inicia la transmisin.*/
peticion01.onreadystatechange = estadoPeticion;
peticion01.send(null); //No le enviamos datos a la pgina
que abrimos.
}
}
</script></head><body>

<button onclick="Coger('espera.jsp')">Coge un documento</button>
<table border="4">
<tr>
<td><span id="estado">Estado peticin</span></td> 
</tr>
</table>
</body>
</html>
Auems es bueno cambiai el texto uel aichivo }SP, poi uno mas acoiue.

Aichivo "espeia.jsp"
<%
Thread.sleep(1000);
out.print("Ahora la espera es menos molesta.");
%>

Piobamos la pgina y el iesultauo que nos queua es:
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RW

!"#$%&'()*+ I 0na peticion asinciona, mostiaua en Nozilla Fiiefox.
El iesultauo es satisfactoiio, el texto que hemos puesto tampoco es que vaya a
uistiaei mucho al usuaiio.

Cuanuo avancemos un poco ms, pouiemos caigai imgenes que peifectamente
pueuen sei uel tipo gif animauo y mostiai asi los uifeientes estauos ue caiga y
eiioi, queuanuo mucho ms vistoso.

N9d H# 8)#$' 6'4787K( /0/19
Poi ahoia hemos hecho un iecoiiiuo que nos ha ayuuauo a compienuei como
utilizai el objeto J@KL%%89.2#.$% paia peuii infoimacion ue foima muy bsica
y hemos visto tanto sus mtouos como piopieuaues.

Llegauo aqui uebemos fijainos en el anteiioi ejemplo, paia hacei una simple
peticion y pouei contiolai toua la infoimacion que nos ua el objeto nos hemos
visto obligauos a hacei una funcion (4M.&N#&"O y una .$%'34E.%)()4+NO, juntas
son unas ties cuaitas paites uel uocumento. vamos a constiuii una clase que
contenga el objeto y sus funciones piincipales, ue esta foima obtenuiemos un
couigo ms limpio y ieutilizable, ya que tenuiemos una caja negia que funciona
sin que nosotios tengamos que pensai uemasiauo (una vez que compienuamos
lo que hace, poi supuesto).
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RL

Piimeia apioximacion (Eiionea):
Como el objeto J@KL%%89.2#.$% no tiene un campo ue iuentificauoi, vamos a
aauiiselo, ue esta maneia pouiemos ieconoceilo(o eso pouemos pensai), si
tenemos vaiios simultneamente.

Aichivo "ejemploNalo.html"
<html>
<head>
<title>Pgina de ejemplo</title>
<script language="JavaScript"
function estadoPeticion()
{
window.alert( "Que peticin llego? (" + this.nombre + ")"); //Se
supone que debera ser la del objeto al que se asign.
}

function Coger(peticionAjax, url) //Le pusimos un campo mas, para
usarla con cualquier peticin.
{
if(peticionAjax){ //Hacemos la peticin Ajax estndar
peticionAjax.open('GET', url, true);
peticionAjax.onreadystatechange = estadoPeticion;
peticionAjax.send(null);
}
}
var Peticion01 = ConstructorXMLHttpRequest(); //Usamos el constructor
para obtener un objeto compatible.
Peticion01.nombre = "Peticion01"; //Un campo nombre, para saber quien
es.
window.alert( "Comprobando objeto 01 (nombre) = (" +
Peticion01.nombre + ")"); //Vemos que se le asigna el nombre
var Peticion02 = ConstructorXMLHttpRequest(); //Usamos el constructor
para obtener un objeto compatible.
Peticion02.nombre = "Peticion02"; //Un campo nombre, para saber quien
es.
window.alert( "Comprobando objeto 02 (nombre) = (" +
Peticion02.nombre + ")"); //Vemos que se le asigna el nombre
</script>
</head>
<body>
<button onclick="Coger(Peticion01, 'datos/espera.jsp')">Coge el
documento 01</button>
<button onclick="Coger(Peticion02, 'datos/videoclub.xml')">Coge el
</body>
</html>

!"#$%&'()*+ ?P Fallo en la oiientacion a objetos ue }avaSciipt, mostiaua en Nozilla Fiiefox.
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 R`

Peio paia nuestia soipiesa (uesagiauable), esta solucion tan sencilla nos uaiia el
eiioi que vemos en la ilustiacion anteiioi.

Esto ocuiie poique cuanuo asignamos con el couigo:
peticionAjax.onreadystatechange = estadoPeticion;

No es que se copie la funcion estauoPeticion paia el objeto ue la peticion actual,
est utilizanuo la funcion global y nuestio objeto ue peticion no entia en la
funcion ue ninguna maneia, solo la uispaia cuanuo cambia ue estauo y, poi tanto,
%Q)$ no hace iefeiencia al objeto 8.%)()4+R=';. Este tipo ue apioximaciones son
intiles uebiuo a la oiientacion a objetos ue }avaSciipt.

Segunua apioximacion (La buena):
Ahoia vamos a vei piimeio la clase que solucionaiia el pioblema y luego el
couigo piincipal, los he aauiuo en pginas sepaiauas paia que no queuaia el
couigo coitauo, lo he comentauo atentamente y lo he simplificauo touo lo que he
pouiuo con el nico nimo ue que pueua compienueise leynuolo, ya que poi
ms que lo comente si no lo compienues no hacemos naua. Lelo ueteniuamente,
hasta ahoia es lo ms complejo que nos hemos encontiauo en este texto y este
couigo va a sei tu amigo, si compienues bien este apaitauo, no tenuis
pioblemas ms auelante. Se iecomienua echai un piimei vistazo a este couigo y,
posteiioimente, aclaiai conceptos en la siguiente seccion. Poi ltimo, un nuevo
vistazo al couigo iesolvei el iesto ue las uuuas.

Aichivo "lib\ClasePeticionAjax.js"
/* El objetivo de este fichero es crear la clase objetoAjax (en
JavaScript a las clases se les llama prototipos) */
function objetoAjax( ) {
/*Primero necesitamos un objeto XMLHttpRequest que cogeremos del
constructor para que sea compatible con la mayora de navegadores
posible. */
this.objetoRequest = new ConstructorXMLHttpRequest();
}

function peticionAsincrona(url) { //Funcin asignada al mtodo coger
del objetoAjax.
/*Copiamos el objeto actual, si usamos this dentro de la
funcin que asignemos a onreadystatechange, no funcionar.*/
var objetoActual = this;
this.objetoRequest.open('GET', url, true); //Preparamos la
conexin.
/*Aqu no solo le asignamos el nombre de la funcin, sino la
funcin completa, as cada vez que se cree un nuevo objetoAjax se
asignara una nueva funcin. */
this.objetoRequest.onreadystatechange =
function() {
switch(objetoActual.objetoRequest.readyState) {
case 1: objetoActual.cargando();
break;
case 2: objetoActual.cargado();
break;
case 3: objetoActual.interactivo();
break;
case 4: /* Funcin que se llama cuando se
completo la transmisin, se le envan 4 parmetros.*/
objetoActual.completado(objetoActual.objetoRequest.status,
objetoActual.objetoRequest.statusText,
objetoActual.objetoRequest.responseText,
objetoActual.objetoRequest.responseXML);
break;
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RY

}
}
this.objetoRequest.send(null); //Iniciamos la transmisin de
datos.
}
/*Las siguientes funciones las dejo en blanco ya que las
redefiniremos segn nuestra necesidad hacindolas muy sencillas o
complejas dentro de la pgina o omitindolas cuando no son
necesarias.*/
function objetoRequestCargando() {}
function objetoRequestCargado() {}
function objetoRequestInteractivo() {}
function objetoRequestCompletado(estado, estadoTexto,
respuestaTexto, respuestaXML) {}

/* Por ltimo diremos que las funciones que hemos creado, pertenecen
al ObjetoAJAX, con prototype, de esta manera todos los objetoAjax
que se creen, lo harn conteniendo estas funciones en ellos*/

//Definimos la funcin de recoger informacin.
objetoAjax.prototype.coger = peticionAsincrona ;
//Definimos una serie de funciones que sera posible utilizar y las
dejamos en blanco en esta clase.
objetoAjax.prototype.cargando = objetoRequestCargando ;
objetoAjax.prototype.cargado = objetoRequestCargado ;
objetoAjax.prototype.interactivo = objetoRequestInteractivo ;
objetoAjax.prototype.completado = objetoRequestCompletado ;

Aichivo "ejemploBueno.html"
src="lib/ClasePeticionAjax.js"></script>
var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo
objetoAjax.
PeticionAjax01.completado = objetoRequestCompletado01; //Funcin
completado del objetoAjax redefinida.
function objetoRequestCompletado01(estado, estadoTexto,
respuestaTexto, respuestaXML){
/* En el ejemplo vamos a utilizar todos los parmetros para ver como
queda, en un futuro prximo, solo te interesare la respuesta en
texto o XML */
document.getElementById('estado01').innerHTML = estado;
document.getElementById('estadoTexto01').innerHTML = estadoTexto;
document.getElementById('respuestaTexto01').innerHTML =
respuestaTexto;
document.getElementById('respuestaXML01').innerHTML = respuestaXML;
}

objetoAjax.
respuestaTexto, respuestaXML) {
/* En el ejemplo vamos a utilizar todos los parmetros para ver como
queda,
en un futuro prximo, solo te interesare la respuesta en texto o XML
*/
document.getElementById('estado02').innerHTML = estado;
document.getElementById('estadoTexto02').innerHTML = estadoTexto;
document.getElementById('respuestaTexto02').innerHTML =
respuestaTexto;
document.getElementById('respuestaXML02').innerHTML = respuestaXML;
}
</script>
</head>
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Rd

<body>

<button onclick="PeticionAjax01.coger('datos/espera.jsp')">Coge el
<button onclick="PeticionAjax02.coger('datos/videoclub.xml')">Coge
el documento 02</button>
<table border="4">
<tr>
<td>Documento 01</td>

<td><span id="estado01">estado no recibido</span></td>
<td><span id="estadoTexto01">texto estado no
recibido</span></td>
<td><span id="respuestaTexto01">texto respuesta no
<td><span id="respuestaXML01">xml respuesta no
recibido</span></td></tr>
</tr>

<tr>
<td>Documento 02</td>

<td><span id="estado02">estado no recibido</span></td>
<td><span id="estadoTexto02">texto estado no
<td><span id="respuestaTexto02">texto respuesta no
<td><span id="respuestaXML02">xml respuesta no
recibido</span></td></tr>
</tr>
</table>
</body></html>

Como pueues vei en el couigo ue la pgina piincipal, seguimos ieutilizanuo los
aichivos espeia.jsp y viueoclub.xml colocnuolos en una caipeta llamaua uatos,
ahoia veamos como queua el ejemplo completo, piimeio peuiiemos el piimei
uocumento y luego el segunuo.

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RX

!"#$%&'()*+ ?? Resultauo coiiecto a la hoia ue usai las clases constiuiuas.
A causa ue la espeia, llega el segunuo objeto antes que el piimeio y como lo
hemos hecho ue foima asinciona no hemos teniuo que espeiai paia pouei pulsai
el segunuo boton, si hemos llegauo hasta aqui compienuinuolo touo, estamos
listos paia empezai a caigai ue uifeientes foimas, BTNL, imgenes, }avaSciipt,
etc. , empleanuo A}AX que es nuestio objetivo.

N9X ;$8<7O7< 8)#$'$ '( 0#D#A8<7649
Aun sin sei un lenguaje ni mucho menos iaio, }avaSciipt no esta altamente
uifunuiuo ni se ha usauo uemasiauo hasta ahoia, BBTNL no tuvo mucho xito, es
ahoia cuanuo ha suigiuo A}AX cuanuo se est vienuo poi paite ue los
uesaiiollauoies cieitas meuiuas paia esciibii couigo ms limpio y compiensible.
N9X9N ,)#$'$ bA *<&4&476&$9
Ahoia que hemos visto los piimeios ejemplos vamos a compaiai }avaSciipt con
}ava que seguiamente conocemos ms paia vei las uifeiencias y tomai cieitas
meuiuas ue ahoia en auelante paia esciibii couigo, }ava es un lenguaje basauo en
clases como muchos sabiemos peio }avaSciipt es un lenguaje basauo en
piototipos.

Basado clases (Java) Basado prototipos (JavaScript)
Clases e instancias son entidades diferentes. Todos los objetos son instancias.
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Se

Defines una clase con una definicin de clase,
instancias una clase con su constructor.
Defines y creas los objetos con los
constructores.
Creas un nuevo objeto con el operador new. Igual
Construyes una jerarqua de objetos usando
definiciones de clases para definir subclases.
Construyes una jerarqua de objetos
asignando un objeto como el prototipo
asociado a una funcin constructor.
Heredan las propiedades siguiendo una cadena
de clases.
Heredan las propiedades usando una cadena
de prototipos.
Una definicin de clase describe todas las
propiedades de todas las instancias de la clase,
no se pueden aadir dinmicamente.
La funcin constructora o prototipo especifica
el conjunto de propiedades inicial, luego se
pueden aadir mas ya sea a unos pocos o
todos los objetos creados.
Traducido de Core JavaScript Guide de Netscape Communications Corp.

Con el siguiente ejemplo se va a vei muchisimo mas claio:

!"#$%&'()*+ ?S Ejemplo ue uso ue piototipos, tiauuciuo ue "Coie }avaSciipt uuiue".

N9X9R *<&4&456' bA '(8'<<#< )#$ V2(87&('$9
Poi supuesto touo lo que viene ahoia, est visto y iazonauo uesue el punto ue
vista ue quien esciibe estas lineas y no iepiesentan ningn estnuai, otios
autoies pueuen piesentai sus piopias alegaciones y iecomenuai justamente lo
contiaiio.

Ahoia se ve mejoi poiqu hemos utilizauo la palabia ieseivaua 8&4%4%:8. paia
constiuii la clase anteiioi, vamos a uiscutii este tema, poique pouiiamos
habeilo hecho sin usaila y el couigo queuaiia incluso ms claio.

0tia foima ue esciibii la ClasePeticionAjax seiia la siguiente:
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 SN

ClasePeticionAjaxv2.js
function objetoAjax( )
{
/*Primero necesitamos un objeto XMLHttpRequest que cogeremos del
constructor para que sea compatible con la mayora de navegadores
posible. */
this.objetoRequest = new ConstructorXMLHttpRequest();
//Definimos la funcin de recoger informacin.
this.coger = function peticionAsincrona(url) //Funcin asignada al
mtodo coger del objetoAjax.
{
/*Copiamos el objeto actual, si usamos this dentro de la funcin
que asignemos a onreadystatechange, no funcionara.*/
this.objetoRequest.open('GET', url, true); //Preparamos la
conexin.
/*Aqu no solo le asignamos el nombre de la funcin, sino la
funcin completa, as cada vez que se cree un nuevo objetoAjax se
asignara una nueva funcin. */
function() {
switch(objetoActual.objetoRequest.readyState)
{
case 1: //Funcin que se llama cuando se est
cargando.
objetoActual.cargando();
break;
case 2: //Funcin que se llama cuando se a cargado.
objetoActual.cargado();
break;
case 3: //Funcin que se llama cuando se est en
interactivo.
objetoActual.interactivo();
break;
case 4: /* Funcin que se llama cuando se completo
la transmisin, se le envan 4 parmetros. */

break;
}
}
datos.
}
//Definimos una serie de funciones que sera posible utilizar y las
dejamos en blanco.
this.cargando = function objetoRequestCargando() {}
this.cargado = function objetoRequestCargado() {}
this.interactivo = function objetoRequestInteractivo() {}
this.completado = function objetoRequestCompletado(estado,
estadoTexto, respuestaTexto, respuestaXML) {}
}

vemos que touo queua enceiiauo uentio uel mismo constiuctoi, y solo hacemos
iefeiencia a una funcion ueclaiaua fueia que constiuye el objeto
XNLBttpRequest y que pouiiamos tenei tambin uentio, ue maneia que el
objeto se auto contenuiia.

Aunque pueua paiecei bonito enceiiai las funciones en el constiuctoi y es una
buena tcnica paia limpiai couigo que pouemos iecomenuai, tiene un pioblema
tcnico. Enceiiai las funciones pueue sei ineficiente uesue el punto ue vista uel
,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 SR

ienuimiento y memoiia, caua vez que hay una funcion enceiiaua en el
constiuctoi sta se ciea paia caua objeto, lo que no es un pioblema si vamos a
cieai pocos objetos a la vez en un PC ue hoy en uia.

Peio, qu pasa con otios teiminales mas uesfavoieciuos como los uifeientes
teiminales moviles que en un futuio pouiian sopoitai el objeto
XNLBttpRequest., ya que no nos cuesta naua mejoiai el ienuimiento en esta
ocasion, uejemos la funcion constiuctoia como estaba antes.

N9X9S b#<7#O)'$ 6gO)78#$ bA D#<7#O)'$ 6<7D#%#$9
Los mtouos ue ClasePeticionAjax son touos pblicos y la vaiiable
XNLBttpRequest tambin, pouemos sentii la tentacion en algunas ocasiones ue
ueclaiailos como piivauos paia que el uesaiiollauoi final que utilice nuestia
clase no pueua tocailos en el tianscuiso uel piogiama y poi consiguiente
estiopeai algo ue maneia que tuvieia que cieai un nuevo objeto paia caua
peticion (como en }avaSciipt no existe un public y un piivate, tenuiiamos que
ponei esas vaiiables y mtouos en un lugai uonue no tuvieia visibiliuau el
cieauoi uel objeto), a cambio estamos peiuienuo mucha funcionaliuau ya que en
ocasiones sei necesaiio ieutilizailo paia facilitai la cieacion ue algn piogiama
o uebiuo a que la memoiia en teiminales pequeos no es giatuita; poi ello en
piincipio las vaiiables y mtouos ue los objetos que cieemos sein pblicos
uebiuo a las necesiuaues ue tiabajo que pueuen suigii con A}AX.
SS

,#6M42)& R=
P'<<#37'(4#$ %'
%'62<#87K(
R9N ?'$8<7687K( %') 8#6M42)&9
En el capitulo anteiioi se ha leiuo bastante couigo, si el lectoi en algn momento
ha intentauo hacei mouificaciones pueue que el navegauoi le uieia algn eiioi y
que este no le fueia muy compiensible, auems el objetivo ue este texto es que el
lectoi sea capaz ue manejaise con la tcnica y ya que piincipalmente se tiabajai
con }avaSciipt uentio ue un entoino Web, este entoino uebemos apienuei a
uepuiailo, paia ello vamos a vei en este capitulo las heiiamientas necesaiias paia
ello. Pueue que hayan ms heiiamientas; se han escogiuo con el ciiteiio ue que
sean tanto giatuitas como potentes, auems tenemos la sueite ue que las que
vamos a vei se integian en un mismo piogiama, el navegauoi Nozilla Fiiefox.

R9R J($4#)#87K(9
Touo lo que necesitamos paia la instalacion es lo siguiente:

Paquete instalacion ue Nozilla Fiiefox : Lo pouemos bajai ue la pgina
piincipal ue Nozilla Fiiefox que es http:www.mozilla.comfiiefox .
Paquete xpi ue FiieBug : (complemento que aaue funcionaliuaues), se
pueue bajai ue la web ue complementos ue Fiiefox que es
https:auuons.mozilla.oigfiiefox .

SW

!"#$%&'()*+ ?T Cuauio seleccion componentes ue la instalacion peisonalizaua ue Nozilla Fiiefox.

vamos a empezai instalanuo Nozilla Fiiefox, cuanuo hagamos las instalacion
uebemos elegii hacei la instalacion peisonalizaua, elegiiemos instalai las
heiiamientas paia uesaiiollauoies.

0na vez que est instalauo Nozilla Fiiefox uebeiemos instalai el complemento.
Paia esto solo tenemos que ii a la baiia ue heiiamientas, aichivo->Abiii aichivo y
seleccionamos el aichivo si lo habiamos bajauo antes, Fiiefox uetectai que es una
ue sus extensiones y te pieguntai si quieies instalailo, ieiniciamos Fiiefox y ya lo
tenuiemos instalauo.

!"#$%&'()*+ ?U Aspecto ue la ventana ue heiiamientas
tias la instalacion ue las uifeientes utiliuaues ue
uesaiiollo.
0na vez que teiminemos
uebeiiamos tenei las siguientes
utiliuaues al iniciai Nozilla Fiiefox
si miiamos en la pestaa
heiiamientas.

Resumienuo contamos con las siguientes utiliuaues (las menciono en oiuen en el
que las vamos a vei).
Consola }avaSciipt.
B0N Inspectoi
}avaSciipt Bebuggei (venkman)
SL

FiieBug

R9S H# 8&($&)# 0#D#A8<7649
Paia vei el funcionamiento ue la consola vamos a hacei uso uel siguiente ejemplo.

uepuiacion1.html
<html>
<head><title>depuracin</title></head>
var nombre = "Juan" ;
function hagoalgo()
{
longitud = nombre.length(); //Aqu hemos introducido un error.
alert("La longitud del nombre es : " + longitud);
}
</script>
<body>
PGINA PARA HACER PRUEBAS DE DEPURACIN SIMPLES
<br>
<a href="javascript:hagoalgo();">Llamo Funcin hagoalgo</a>
</body>
</html>

Si caigamos la siguiente pgina y si sacamos la consola y pinchamos en el link que
hemos puesto a la funcion obtenuiemos lo siguiente.

!"#$%&'()*+ 1S Resultauo en la consola ue hacei clic sobie el link en la pgina web.

Como vemos la piopia consola se ha uauo cuenta ue que los objetos Stiing no
tienen una funcion llamaua length. Si pulsamos encima uel link ue la consola nos
llevai al punto uel couigo que piouujo el eiioi.
S`

!"#$%&'()*+ 16 Couigo que piouujo un eiioi mostiauo poi el piopio Fiiefox.

Es muy iecomenuable combinai el uso ue la consola con mensajes aleit paia
uepuiai piogiamas muy pequeos, cuanuo }avaSciipt encuentia un eiioi como el
anteiioi, el piogiama se iompe y no continua, si nos fijamos vemos que habia
puesto una funcion aleit uetis ue la linea uonue se encuentia el eiioi y no se ha
ejecutauo, asi se pueue estai seguio ue que el piogiama no llega a ejecutai esa
linea, auems ue que se pueue monitoiizai antes y uespus uel eiioi el valoi que
pueue tenei una vaiiable pioblemtica, es sencillo y esta heiiamienta no tiene mas
complicacion.

Solucion uel eiioi anteiioi, length no es una funcion sino una piopieuau; con
quitai ue la linea los paintesis ue la funcion "length()" y uejailo en "length" se
solucionaiia.

R9W ?&823'(4 aOG'84 >&%') 7($6'84&< [7($6'84&< %') ?a>^9
Esta heiiamienta nos peimite vei el ibol ue objetos uel uocumento con touos los
campos ue caua etiqueta, su utiliuau es la siguiente.

Imaginate que hemos hecho una inseicion ue couigo BTNL en la pgina meuiante
el objeto XNLBttpRequest, peio uicho cambio no es apieciable y la consola no nos
ua ningn eiioi.

Esto es poique el couigo inseitauo pueue sei coiiecto peio no hace lo que uebeiia,
la solucion es vei qu hemos inseitauo iealmente meuiante el inspectoi uel B0N
paia buscai el eiioi luego uentio uel couigo que hemos inseitauo, vemoslo con el
siguiente ejemplo.

uepuiacion2.html
<html>
function insertoalgo()
SY

{
zona = document.getElementById('zonaInsercion') ;
zona.innerHTML = "<center><img src= \"hamsters.jpg\" idth=\"320\"
eight=\"240\" border=\"0\" alt=\"Hamsters\"/></center>" ; //Aqu
hemos introducido un error, en el alto y ancho, le hemos quitado
una letra.
}
</script>
<body>
<br>
<span id="zonaInsercion">
<a href="javascript:insertoalgo();">Llamo Funcin
insertoalgo</a>
</span>
</body>
</html>

vamos a inseitai uiiectamente una imagen, puesto que sabemos uonue est y no
hacemos ninguna peticion al seiviuoi esto no es A}AX, peio pueue seinos til
alguna vez.

Nuestia imagen es una imagen con una iesolucion 1u24x768 y pensamos inseitai
en un espacio S2ux24u, si abiimos la pgina y pinchamos sobie el link que uispaia
la peticion obtenemos el siguiente iesultauo.

!"#$%&'()*+ 17 Resultauo uel couigo uepuiacion2.html visto en Nozilla Fiiefox.

Como vemos no hay ningn eiioi en la consola }avaSciipt y la imagen se ha
inseitauo con su tamao oiiginal, no iespetanuo las meuiuas que pietenuiamos, el
eiioi se encuentia en el couigo BTNL, este ejemplo es sencillo y fcil, peio la
piimeia vez que nos pasa pueue llevainos ue cabeza, con el B0N inspectoi
pouemos vei qu piopieuaues se han inseitauo coiiectamente y cules no.

Sd

Abiimos pues la ventana uel B0N y abiimos las sucesivas pestaas uel ibol
jeiiquico que foiman las etiquetas BTNL como muestia la figuia 2.6 hasta llegai
a la imagen.

!"#$%&'()*+ 18 Ejemplo ue uso ue la utiliuau B0N inspectoi.
Bemos inseitauo "boiuei", "alt", "eight", "iuth" y "sic", vemos que "eight" y "iuth"
tienen los valoies 24u y S2u, lstima que touavia no existan como piopieuaues que
inteipietan los navegauoies, las hemos esciito mal, coiiijmoslo y pioblema
solucionauo.

R9L b'(]3#([?'62<#%&< %' 0#D#$8<764^
venkman es un uepuiauoi convencional, lo utilizaiemos paia ponei puntos ue
iuptuia en el couigo, ue foima que Nozilla Fiiefox paiai su ejecucion y no nos
uejai continuai hasta que lo uigamos en el uepuiauoi. Si nos paiamos uentio ue
una funcion, pouiemos vei como cambian los valoies ue sus vaiiables locales sobie
la maicha si hacemos un "paso poi paso".

vamos al ejemplo, es una veision mouificaua ue uepuiacion1.html, algo mas
compleja y que paiece no tenei sentiuo, nos valui paia apienuei algunas cosas.

uepuiacionS.html
<html>
function hagoalgo()
{
agoalgo2() ;
}
function hagoalgo2()
{
hagoalgoreal();
}
function hagoalgoreal()
SX

{
longitud = nombre.length;
}
</script>
<body>
<br>
<a href="javascript:hagoalgo2();">Llamo Funcin hagoalgo2</a>
<a href="javascript:hagoalgoreal();">Llamo Funcin hagoalgoreal</a>
</body>
</html>

Lo piimeio que vamos a hacei uespus ue abiii la pgina es abiii venkman (el
uepuiauoi ue }avaSciipt), la cosa uebeiia queuai como en la figuia 2.7 .

!"#$%&'()*+ 19 Pantalla ue inicio ue venkman con el ficheio uepuiacionS.html caigauo en Fiiefox.

Solucion ue pioblemas (winuows): Si alguna vez intentas abiii alguna heiiamienta
ue Nozilla Fiiefox y sta no abie es poique ue alguna maneia se ha queuauo
"colgaua" la ltima vez que la iniciaste. Sale uel navegauoi y pulsa
C0NTR0L+ALT+S0P, busca la pestaa ue piocesos y teimina el pioceso llamauo
"fiiefox" que sigue abieito incluso cuanuo tienes el navegauoi ceiiauo, esto ocuiie
noimalmente con los uepuiauoies si no se cieiian coiiectamente.

Sigue estas instiucciones:
1. Abie la pestaa ue B uepuiacionS.html.
2. Acomouate la ventana paia pouei vei el couigo.
S. Pon los siguientes Puntos ue iuptuia pulsanuo con el boton izquieiuo uel iaton
uonue apaiecen las B ue (bieakpoint) en la siguiente ilustiacion , veis que hay
We

unas baiias hoiizontales, eso es poique es una zona seleccionable paia un punto
iuptuia.

Te uebeiia queuai touo como muestia la imagen.

!"#$%&'()*+ 2u venkman con el ficheio uepuiacionS.html caigauo, uespus ue ponei algunos
bieakpoints.
4. Ahoia si se pulsa sobie el piimei link, veis que cuanuo el couigo llegue al punto
ue iuptuia se uetenui, como en la siguiente imagen.
WN

!"#$%&'()*+ 21 venkman con el ficheio uepuiacionS.html caigauo, ueteniuo poi un punto ue
iuptuia.
Si te fijas en la ventana ue vaiiables locales veis que la vaiiable "nombie", peio
queiemos hacei uso ue esta vaiiable en hagoalgoieal().

S. vamos a ii a la ventana ue watches y vamos a aauii una expiesion con su
nombie, esto sei suficiente.
6. Bamos un paso, con esto el estauo uebeiia sei el mostiauo poi la siguiente
imagen.

WR

!"#$%&'()*+ 22 vemos que la vaiiable existe con su valoi actual, tias el paso 6 ue la explicacion.

7. Bamos vaiios pasos hasta llegai a la funcion hagoalgoieal().

!"#$%&'()*+ 2S Estauo tias el paso 7 ue la explicacion.

vemos que ahoia la vaiiable nombie tiene el valoi {Eiioi}, esto es poique naua
mas saliinos ue la funcion, ya no la vemos, aunque haya siuo llamaua la funcion poi
una anteiioi que tiene la vaiiable, no pouemos acceuei a ella, }avaSciipt no guaiua
la misma localiuau que lenguajes como "C", es un fastiuio, peio nos queua
ueclaiaila como global o ueclaiai una funcion uentio ue otia como hemos hecho al
hacei la ClasePeticionAjax.

Bueno, esto es bsicamente lo que pouemos hacei con el uepuiauoi que no es
poco, nos peimite examinai el couigo paso poi paso vienuo el valoi ue las vaiiables
que queiamos.
R9` +7<'"2@ [T&%& )& #(4'<7&< '( 2(&^9
Este es tal vez el uepuiauoi ms nuevo y potente que hay, nos va a uai toua la
infoimacion que nos uan los otios piogiamas peio ue foima mas ipiua cuanuo
nos acostumbiemos.

vamos a volvei a utilizai el aichivo uepuiacionS paia el ejemplo ue su uso.

Lo abiimos en Nozilla Fiiefox y pulsamos sobie el icono ue la esquina infeiioi
ueiecha como muestia la siguiente imagen, ue esta maneia iniciamos FiieBug.
WS

!"#$%&'()*+ 24 Boton ue inicio ue FiieBug.

!"#$%&'()*+ 2S ventana ue FiieBug abieita.

Tenemos S pestaas, veamos su funcionamiento una poi una.

R9`9N *'$4#I# %' 8&($&)#9
La consola nos uai toua la infoimacion que nos uaba la consola ue }avasciipt
noimal sumnuole infoimacion extia que pouemos mostiai si queiemos.

!"#$%&'()*+ 26 Posibiliuaues ue la consola ue FiieBug.

Entre esta informacin extra, estn los errores
de las hojas de estilo CSS, los errores XML y
dos que nos ayudarn mucho, mostrar la pila
de llamadas que lleg hasta un error y
mostrar las llamadas XMLHttpRequest, estos
dos nos sern muy tiles. El botn clear
simplemente borra toda la informacin
acumulada en la consola y el inspect nos
llevar a la pestaa del inspector.
WW

Basta aqui una consola ue eiioies convencional peio que nos muestia algo ms ue
infoimacion, vamos a piestai atencion a uos cosas, la pila ue llamauas que nos
muestia el camino hasta el eiioi y los mensajes ue eiioi que pouemos configuiai
nosotios mismos.

Paia vei lo piimeio no tenemos ms que tenei seleccionauo en opciones "Show
Stack Tiace Foi Eiiois" y pulsai sobie cualquiei boton ue nuestio ejemplo, yo voy
a pulsai los S seguiuos paia que veamos bien como acta en la siguiente
ilustiacion.

!"#$%&'()*+ 27 Eiioies mostiauos poi la consola ue FiieBug.
vemos que las seales ue eiioi tienen una flecha al lauo, miianuo al eiioi, uicen
que no est uefiniua uonue se ha utilizauo la vaiiable "nombie".

!"#$%&'()*+ SH Pila ue llamauas ue los eiioies mostiauos en la consola ue FiieBug.

Si pulsamos sobie la piimeia flecha se nos muestia la pila ue llamauas, si llamamos
a la piimeia funcion hagoalgo(), sta llama a las 2 siguientes y teimina en
hagoalgoieal(), si seguimos la pila llegamos a la piimeia funcion, hagoalgo(), igual
paia el iesto, ue esta foima pouemos seguii la secuencia ue acontecimientos que
uesemboco en eiioi.

Sobie los mensajes ue eiioi que pouemos configuiai nosotios mismos, estos se
aauen al couigo y los inteipieta FiieBug, son los siguientes.

uepuiacionS2.html con los mensajes que se pueuen peisonalizai en amaiillo.
WL

<html>
<head><title>depuracion</title></head>
function consola()
{
var a = 10;
var b = "hola";
var c = [10, 20, 30, 40] ;
console.log(a); //Podemos poner simplemente una o varias variables.
console.log(a,b);
console.log("El valor de a es %d y el de b es %s",a,b); //Podemos usar la sintaxis del printf de c para
los mensajes.
console.info(c);
console.warn(b);
console.error("Prueba de error, el valor de b es %s.",b);
}
function hagoalgo()
{
hagoalgo2() ;
}
function hagoalgo2()
{
hagoalgoreal();
}
function hagoalgoreal()
{
longitud = nombre.length;
}
</script>
<body>
<br>
<a href="javascript:hagoalgo2();">Llamo Funcin hagoalgo2</a>
<a href="javascript:hagoalgoreal();">Llamo Funcin hagoalgoreal</a>
<a href="javascript:consola();">Llamo Funcin consola</a>
</body>
</html>

Si ahoia llamamos a la funcion "consola", obtenemos el iesultauo mostiauo en la
siguiente ilustiacion.

!"#$%&'()*+ SI Los uifeientes mensajes ue eiioi ue FiieBug, mostiauos uel aichivo
uepuiacionS2.html.

Los mensajes console.log() no muestian ningn caitel ue atencion especial.
W`

Los mensajes console.info() muestian un caitel ue infoimacion.
Los mensajes console.wain() muestian un caitel ue aleita.
Los mensajes console.eiioi() muestian un caitel ue eiioi, peio el piogiama
no se iompe.
El piogiama }avasciipt se iompei como haiia noimalmente si metemos en algn
mensaje ue eiioi algo no vliuo como una vaiiable que no existe.

R9`9R *'$4#I# %' %'O2@@'< [%'62<#%&<^9
Funciona exactamente igual que venkman, ponemos puntos ue iuptuia y cuanuo
llegue el piogiama a este punto se paiai, paia seguii pulsamos sobie los botones,
pouemos ii paso a paso y se nos muestian las vaiiables locales ue la funcion en la
paite ueiecha, voy a sumaile al ejemplo una vaiiable global paia que veamos como
pouiian veila uesue uentio ue la funcion.

Solucion ue pioblemas (winuows): Si alguna vez te sale un mensaje ue alaima en la
consola cuanuo pones un punto ue iuptuia uentio uel navegauoi, sal uel
navegauoi y pulsa C0NTR0L+ALT+S0P, vete a la pestaa ue piocesos y teimina el
pioceso ue Fiiefox que sigue abieito incluso cuanuo tienes el navegauoi ceiiauo,
esto ocuiie noimalmente con los uepuiauoies si no se cieiian coiiectamente,
auems algunas veces tenemos que iepetii vaiias veces el pioceso en la pagina
Web paia que "coja" el punto ue iuptuia FiieBug.

!"#$%&'()*+ Su Pestaa ue uebuggei ue FiieBug con un punto ue iuptuia.

No hemos saliuo ue la pantalla navegauoi y estamos puuienuo piobailo touo
abiienuo el uepuiauoi, en esto le gana a venkman, FiieBug es mucho ms comouo.

Si queiemos vei una vaiiable global tenemos que abiii la pestaa ue "winuow" en
la paite ueiecha y buscai su valoi, iealmente estamos miianuo entie el B0N.

WY

!"#$%&'()*+ T? Nostianuo el ibol ue objetos }avaSciipt
uel B0N con FiieBug.
La variable global se llamaba nombregloval
y su valor es Perico, encontrarla no ha sido
tan cmodo como los watches de Venkman.
R9`9S *'$4#I# %') 7($6'84&<9
Su uso en geneial es muy sencillo, tiene S sub. pestaas, nos centiaiemos en la
pestaa Souice. Si conocemos hojas ue estilo y }avaSciipt utilizai el iesto sei muy
sencillo.

Nos muestia el mismo couigo html que hemos esciito, peio nos ueja uesplegai las
etiquetas y nos iecuauia en el navegauoi la zona ue la pgina que foima paite uel
couigo que se estamos sealanuo con el punteio uel iaton.

!"#$%&'()*+ S2 Inspectoi ue couigo web ue FiieBug.
Wd

Como se ve poi el subiayauo estaba sealanuo el hipeienlace a la segunua funcion
y en el navegauoi se iecuauia, es muy sencillo ue utilizai, lo malo es que nos
muestia la pgina que caigamos al comenzai y si inseitamos mucho couigo BTNL
uinmicamente nos pouemos encontiai muchas veces con que no es coheiente con
lo que se est mostianuo en el navegauoi, con esto teiminamos el vistazo a
FiieBug.
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( WX

,#6M42)& S= TU8(78#$
%' 6'4787K( %'
7(V&<3#87K(

S9N ?'$8<7687K( %') 8#6M42)&9
Poi ahoia se ha visto touo lo ielacionauo al objeto XNLBttpRequest que es el
coiazon ue A}AX y teiminamos el capitulo anteiioi constiuyenuo una libieiia que
nos uejai utilizailo ue foima mas comoua, peio que touavia no nos abstiae
totalmente uel uso uel objeto XNLBttpRequest.

Lo iealmente inteiesante ue este objeto es utilizailo paia tiaei a nuestia pgina los
componentes que se utilizan en las pginas Web actuales, BTNL, }avaSciipt,
imgenes, entie otios, peio estos son los bsicos y uespus mejoiai la libieiia paia
abstiaeinos uel famoso objeto y tenei una sencilla funcion que lo haga touo poi
nosotios.

Nientias que se tiabaja con }avaSciipt es muy fcil que cometamos algn eiioi,
poi lo que se han visto piimeio las heiiamientas ue uepuiacion.

En este capitulo vamos a vei:

S.2 Inseitai Couigo BTNL (Y con ello, lo que contenga el couigo).
S.S Inseitai 0na imagen usanuo el B0N no como couigo BTNL.
S.4 Inseitai }avaSciipt.
S.S El B0N y }avaSciipt.
S.6 Bifeiencia entie inseitai couigo BTNL uiiectamente o cieailo con el
B0N.
S.7 Encapsulai el objeto XNLBttpRequest facilitanuo su uso.
S.8 Nanejo ue Eiioies en la libieiia.
S.9 Bai sopoite al usuaiio mientias iealizamos las peticiones.

Touo con sus ejemplos funcionanuo como siempie paia que el lectoi pueua jugai
con ellos y compienuei bien su funcionamiento que es lo que se pietenue.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( Le

S9R J($'<4#< 8K%7@& PT>H9
Esto es lo ms fcil, auems nos ayuuai a compienuei algunas cosas ue foima
sencilla.

vamos a seguii utilizanuo la libieiia que constiuimos en el apaitauo anteiioi,
piimeio vamos a vei el ejemplo y luego se explicai, se van a iesaltai las paites
ms impoitantes paia explicailas posteiioimente.

inseitaiBTNL.html
<html>
<head>
<title>Insertar HTML</title>
<script language="JavaScript" src="lib/ClasePeticionAjax.js"></script>
objetoAjax.
PeticionAjax01.completado = objetoRequestCompletado01; /*Funcin
completado del objetoAjax redefinida. */
respuestaTexto, respuestaXML)
{
document.getElementById('ParteHTML').innerHTML = respuestaTexto;
//Solo nos interesa la respuesta como texto
}
</script>
</head>
<body>
<span id="ParteHTML"> //Principio del cdigo que se va a sustituir
<center>
<button onclick="PeticionAjax01.coger('pag01.html')">Coge la
pag01</button>
</center>
</span> //Final del cdigo que se va a sustituir
</body>
</html>

pagu1.html
<center><b> Os presento al hamster guerrero </b> </center>
<center><img src="img/guerrero.jpg"><center>

imggueiieio.jpg

!"#$%&'()*+ SS Imagen uiveitiua ue un hmstei paia amenizai el ejemplo.

Caigai en foimato texto:
//Solo nos interesa la respuesta como texto
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LN

Con esto busco que nos uemos cuenta ue que estoy intiouucienuo texto uentio uel
couigo BTNL, peio ua la casualiuau ue que ese texto, es mas couigo BTNL y
cuanuo el navegauoi lo inteipiete, lo inteipietai como BTNL que es, esto es
poique lo est inseitanuo en "inneiBTNL".

La paite uel uocumento que sustituimos:
<center>
<button onclick="PeticionAjax01.coger('pag01.html')">Coge la
pag01</button>
</center>

Basta ahoia no habia mencionauo a la etiqueta <span> que se lleva utilizanuo
uesue el piimei ejemplo, sta uefine una seccion uentio uel uocumento, en el caso
que nos ocupa la seccion comienza antes uel boton y teimina uespus ue ste,
auems esa es la seccion ue couigo que vamos a sustituii, con lo que el boton
uesapaiecei ue la pgina. Esto es muy til, ya que pouemos uefinii la pgina como
una tabla y est en secciones, ue foima que pouemos ii cambianuo secciones con
un men sin cambiai ue pgina.

Tenei claio uonue esta nuestia pgina:
pagu1.html

Estamos en la pgina inseitaiBTNL.html, poi lo tanto no es necesaiio volvei a
inseitai las cabeceias, <html>, <heau>,<bouy>, etc.

imggueiieio.jpg
El navegauoi acta ue maneia que el couigo nuevo foimaba paite ue "la pgina
oiiginal", con esto quieio uecii que si inseitamos algo que contenga una uiieccion
(como una imagen), esa uiieccion uebe sei ielativa a la pgina oiiginal, no a la que
hemos caigauo.

Bicho touo lo anteiioi, veamos el iesultauo en la siguiente imagen:

!"#$%&'()*+ S4 Piimei ejemplo til ue A}AX.

Si pulsamos el boton la cosa queua como muestia la siguiente imagen:

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LR

!"#$%&'()*+ SS Couigo BTNL inseitauo coiiectamente.
Como vemos seguimos en la misma pgina ya que peimanece el mensaje ue "--
Aqui voy a inseitai couigo BTNL--", auems ue que el texto ha siuo inteipietauo
como couigo BTNL.

Pues esto es A}AX, una tcnica que nos peimite caigai en una misma pgina
uifeientes elementos, bajo uemanua.

S9S J($'<4#< 73C@'('$ 2$#(%& ') ?a>9
Aunque pouemos inseitai imgenes como BTNL, tambin pouemos cieai la
etiqueta utilizanuo el API uel B0N, peio algo mas cuiioso es lo siguiente, uebiuo a
las necesiuaues ue nuestia aplicacion pouemos queiei que, aunque no est la
imagen o las imgenes caigauas, apaiezca el hueco uonue estain en un futuio,
como en piincipio paiece que no tiene utiliuau voy a mostiai un ejemplo pictico
ieal ue una aplicacion Web A}AX.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LS

!"#$%&'()*+ S6 uoogle maps sin teiminai ue caigai imgenes.
Si nos fijamos en la baiia ue abajo uel navegauoi, pone "tiansfiiienuo uatos....",
mientias que estos uatos que son las imgenes se tiansfieien, tienen su espacio ya
guaiuauo, ue esta foima no se uesfiguia la iepiesentacion uel mapa. Poi supuesto
que la complejiuau ue google Naps no se haya en la inseicion ue las imgenes.

veamos un ejemplo ue como hacei esto; como en el apaitauo anteiioi se iesaltai
lo ms impoitante paia ms taiue tiatailo con uetalle.

inseitaiImag.html
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LW

<html>
<head>
<title>Insertar una imagen</title>
objetoAjax.
{
document.getElementById('Imagen01').src = respuestaTexto; //Solo nos
interesa la respuesta como texto
}
</script>

</head>
<body>
<center><button
onclick="PeticionAjax01.coger('DireccionImagen01.txt')">Coge la Imagen
01</button></center>
<br>
<!- Esta imagen no tiene el campo source -->
<center><img id="Imagen01" width="412" height="450" /></center>
</body>
</html>

BiieccionImagenu1.txt

img/gatito.jpg

Imggatito.jpg

!"#$%&'()*+ S7 0na imagen giaciosa paia el ejemplo.
Be este ejemplo pouemos uestacai S cosas:
La piimeia, es que le hemos otoigauo a una imagen, un iu, en vez ue utilizai una
etiqueta <span> como hasta ahoia y sustituii un campo uel couigo, no solo eso sino
que auems le hemos puesto a la imagen el tamao que tenui, peio no el campo
sic uonue se encuentia, ue foima que en el cuauio que apaiecei vacio paia una
imagen pouemos inseitai la imagen que queiamos.
Segunuo, la uiieccion ue la imagen se encuentia en un txt, pouiia estai en un
ficheio html, peio en conteniuo seiia el mismo, las extensiones uan igual, estamos
eligienuo un ficheio ue uonue caigai texto, se ha puesto asi paia que queue ms
claio.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LL

Y teiceio, Como le estamos uicienuo que queiemos caigai el campo sic ue una
imagen.
document.getElementById('Imagen01').src
Si te fijas, en los ejemplos anteiioies en vez ue esciibii ".sic", esciibiamos
".inneiBTNL".

Ahoia toca explicai esto en ms piofunuiuau paia los que no conocen el B0N
(Bocument 0bject Nouel), estamos acceuienuo meuiante }avaSciipt, piimeio a
uocument que es nuestia pagina web, estamos eligienuo un elemento ue la pgina
con getElementByIu que es la imagen a la que le hemos uauo un iu, y poi ultimo
estamos acceuienuo al campo .sic ue la imagenu1, que aunque no lo hemos esciito,
existe, es nulo, peio existe, y estamos uicienuo que es "=" a la iespuesta en foimato
texto, con lo cual le acabamos ue inuicai uonue se encuentia la imagen, si se
extiapola lo anteiioi esto se pueue hacei con touo, la mente uel lectoi pueue
empezai a maquinai.

En los ejemplos anteiioies acceuiamos al couigo BTNL uelimitauo poi la etiqueta
<span>, asi que estbamos sustituyenuo uentio ue la piopieuau que contiene el
couigo BTNL, poi eso nuestio texto se inteipietaba como couigo.

Con touo lo anteiioi veamos como queua el ejemplo en la siguiente imagen:

!"#$%&'()*+ S8 El antes y el uespus uel ejemplo que nos ocupa.
Ahoia ya sabemos como cambiai campos uel B0N uinmicamente caiganuo su
conteniuo meuiante A}AX, en este caso, lo hemos utilizauo paia caigai el sic ue una
imagen conteniua en un txt, si se hubieia inseitauo uiiectamente ya que
conociamos el camino sin hacei una peticion al seiviuoi paia aveiiguailo no seiia
A}AX, el uso uel B0N tiene ms posibiliuaues aunque como veiemos mas taiue, su
uso es muy teuioso paia piogiamauoies inexpeitos, sin sumaile las
incompatibiliuaues entie navegauoies, una vez apienuiuo y con pictica sei una
heiiamienta potentisima que sei la culpable ue pouei hacei veiuaueias
viigueiias.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( L`

S9W J($'<4#< 8K%7@& 0#D#A8<7649
0na cosa inteiesante, ya que pueue sei necesaiia a la hoia ue iealizai cieitos
piogiamas, es la posibiliuau ue evaluai couigo }avaSciipt con la funcion eval(); lo
bueno ahoia, es que giacias a la tcnica ue piogiamacion A}AX, pouemos iecogei
ese couigo ue un aichivo que pouemos habei piepaiauo antes o pueue sei
geneiauo poi el seiviuoi uinmicamente y uevuelto.

0n ejemplo sencillo ue ""'>'& .=.(#%'& (*3)M4 V'6'W(&)8% (4+ RVRJ seiia:

inseitai}avasciipt.html
<html>
<head>
<title>Insertar Javascript</title>
objetoAjax.
{
eval(respuestaTexto); //Solo nos interesa la respuesta como texto
para lanzar el cdigo JavaScript
}
</script>
</head>
<body>
<center><button
onclick="PeticionAjax01.coger('CodigoJavascript01.txt')">Llama a una
Funcin</button></center>
</body>
</html>

Couigo}avasciiptu1.txt

alert("Has llamado a un codigo javascript usando AJAX.");

El iesultauo se ve en la figuia siguiente:

!"#$%&'()*+ S9 Couigo }avaSciipt uevuelto poi A}AX y evaluauo.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LY

Como vemos no es uificil y ya que pouemos caigai couigo }avasciipt, tambin
pouemos caigai ms peticiones A}AX, uesue una peticion A}AX, es uecii, peticiones
inuiiectas.

0n ejemplo ue 8.%)()*+ )+3)&.(%' seiia el siguiente:

inseicionesInuiiectas.html
<html>
<head>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjax.js">
</script>
objetoAjax.
{
eval(respuestaTexto); //Solo nos interesa la respuesta como texto
para lanzar el cdigo JavaScript
}
</script>
</head>
<body>

<center>
<button>
onclick="PeticionAjax01.coger('CodigoJavascriptCargaInd01.txt')">
Llama a una Funcin
</button>
</center>

<center>
<span id="Lugar01"></span>
</center>

</body>
</html>

Couigo}avasciiptCaigaInuu1.txt
//Hemos llamado a una peticionAjax
objetoAjax.

{
document.getElementById('Lugar01').innerHTML = respuestaTexto;
//Insertamos en el lugar01
}

PeticionAjax02.coger('pag01.html') //Cogemos el cdigo HTML con la
PeticionAjax02

vamos a caigai a la pagu1.html que hemos utilizauo en un ejemplo anteiioi, aun
asi aqui est el couigo paia que no haya confusion:

pagu1.html
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( Ld


Imggueiieio.jpg

!"#$%&'()*+ 4u El hmstei gueiieio contiaataca.
Paia hacei algo como esto, este ejemplo seiia uemasiauo costoso, peio paia
ietiatai como usai una peticion inuiiecta lo mejoi es algo simple, hemos llamauo a
la piimeia peticion A}AX, que ha ejecutauo un couigo }avaSciipt conteniuo uentio
ue un ficheio ue texto, este contenia una llamaua A}AX que caigaba un peuazo ue
couigo BTNL uentio ue un peuazo conteniuo poi una etiqueta <span>. Como el
lectoi pueue vei, no estamos ms que unuole una vuelta ms a touo lo que hemos
empleauo anteiioimente, vienuo las posibiliuaues ue utilizacion; poi supuesto a la
hoia ue utilizailo iealmente uebeiemos elegii la ms auecuaua a la situacion, las
peticiones inuiiectas son buenas paia que una peticion haga geneiai al seiviuoi la
segunua peticion ue foima uinmica si estamos buscanuo una infoimacion que no
se sabe uonue est y el seiviuoi si.

El iesultauo uel ejemplo es este:
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( LX

!"#$%&'()*+ 41 Couigo html caigauo iealizanuo una peticion inuiiecta.
Con esto teiminamos las tcnicas bsicas, ya hemos visto como caigai las cosas
como texto, como intiouuciilas uentio ue los objetos uel B0N y como lanzai
couigo }avaSciipt, touo utilizanuo A}AX.

S9L ?a> /*J9
El B0N esta intimamente ielacionauo con }avaSciipt que aun poi su nombie, no es
un lenguaje oiientauo a objetos como java, es un lenguaje oiientauo a unos objetos,
los uel navegauoi, el B0N y los que cieemos (uifeientes ue java), auems caiece ue
caiacteiisticas impoitantes como la heiencia, se basa en piototipos.

Ya que el lenguaje inteiacta con los objetos uel navegauoi, nos hacemos a la iuea
ue que cuanuo uescaigamos una pgina BTNL que contiene }avaSciipt, este couigo
sigue estanuo uentio ue la pgina ya que el lenguaje acta en la paite uel cliente,
en cambio lenguajes como ASP, PBP o }SP geneian lenguaje BTNL uesue el
seiviuoi y el usuaiio nunca llegai a vei su couigo en la pgina que uescaigue.

En el B0N el objeto piincipal es el objeto winuow:

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `e

!"#$%&'()*+ 42 }eiaiquia ue objetos uel navegauoi.

No es necesaiio (peio pueues haceilo) implicai el objeto winuow en la llamaua ya
que est ue foima implicita, como se ve en el siguiente ejemplo.

<html>
<body>
El dominio de esta pgina web es:
<script type="text/javascript">
document.write(document.domain)
</script>
</body>
</html>

Se han iemaicauo las etiquetas BTNL que nos uejan inseitai couigo }avaSciipt
uentio ue una pgina BTNL convencional, el couigo }avaSciipt uebe estai
uelimitauo poi estos tags ue piincipio y fin, el iesultauo es el siguiente.

!"#$%&'()*+ 4S Ejemplo ue uso ue los objetos uel navegauoi.
Inteinet Exploiei extienue los objetos ue navegauoi con algunos piopios, el
usailos significaiia la piuiua ue compatibiliuau con otios navegauoies y obligaiia
a los usuaiios a utilizai ste, no solo esto sino que cieitas cosas que se salen ue las
que pouiiamos llamai estnuai se tiatan ue maneia uifeiente uepenuienuo uel
navegauoi lo que obliga a cieai couigo con bifuicaciones que piimeio uetecte el
navegauoi y uepenuienuo ue este ejecute un peuazo ue piogiama u otio sin uai
eiioies.

Es noimal que los uifeientes toolkits que hay paia piogiamai aplicaciones Web
oiientauas a A}AX iesuelvan estas incompatibiliuaues poi el piogiamauoi cuanuo
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `N

no queua iemeuio, en cambio en la mayoiia ue las ocasiones es posible encontiai
un camino estnuai que exista en touos los navegauoies.

El ibol ue objetos uel navegauoi es un ibol geneial que contiene tanto mtouos y
piopieuaues uel navegauoi como las que cieemos nosotios mismos, si echamos un
vistazo ipiuamente con FiieBug.

!"#$%&'()*+ 44 B0N ue una pgina web en Nozilla Fiiefox 1.S visto con FiieBug.
Bentio uel B0N caua etiqueta tiene una piopieuau llamaua inneiBTNL, hasta
ahoia mouificanuo esta hemos mouificauo el uocumento, es uecii cambianuo el
texto BTNL cambia la pgina, en cambio tambin se pueue mouificai el uocumento
cambianuo las uifeientes piopieuaues ue caua nouo, esto es ms complejo y
laboiioso peio tiene su iecompensa cuanuo estamos cieanuo entoinos iealmente
atiactivos, pouemos ii cieanuo las etiquetas, inseitanuo texto y ellas y mouificai
sus piopieuaues piogiamanuo en }avaSciipt.
S9` ?a> /*J ' 7(('<PT>H '(V<'(4#%&$9
Basta este momento hemos estauo utilizanuo la piopieuau InneiBTNL ue las
etiquetas que uelimitan zonas ue la pgina y en ningn momento lo hemos
uiscutiuo, vamos a vei otia posibiliuau que aun existienuo, en piincipio y a no sei
que suigieia algo que lo iequiiieia foizauamente su uso en ningn caso
utilizaiemos uebiuo a que uispaia la complejiuau ue la solucion uel pioblema.

Como uispaia la complejiuau, vamos a hacei algo tan sencillo como inseitai una
linea ue texto plano, asi compienueiemos ipiuamente que no es una posibiliuau
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `R

que uebiiamos escogei poi gusto, auems obliga al estuuio en mas piofunuiuau
uel B0N.

La causa que hace que mouificai el uocumento hacienuo uso ue inneiBTNL sea
ms fcil que mouificai el B0N es que mientias que inneiBTNL mouifica la
estiuctuia textual uel uocumento, al usai el B0N mouificamos la estiuctuia logica
que se encuentia a un nivel ms bajo.
Paia compienuei el siguiente couigo uebemos entenuei que el B0N ue una pgina
Web es un ibol ueneial, asi pues un nouo pueue tenei muchos hijos, si
sustituimos el nouo uiiectamente y no ponemos sus hijos al nouo nuevo, habiemos
uestiozauo la pgina, uebemos llevai cieito cuiuauo.

uom api.html
<html>
<head>
<title>Insertar con DOMAPI</title>
objetoAjax.
{
var viejaParte = document.getElementById('ParteHTML'); /*Recogemos
el elemento que vamos a cambiar como

normalmente./*
var nuevaParte = document.createTextNode(respuestaTexto); /*Creamos
un nuevo nodo de texto, con el texto de

respuesta.*/
if (viejaParte.childNodes[0]) //Vemos si el nodo tena hijos.
{
viejaParte.replaceChild(nuevaParte, viejaParte.childNodes[0]);
/*Cambiamos el nodo hijo del padre por lo nuevo */
}
else
{
viejaParte.appendChild(nuevaParte); //Le aadimos un hijo nuevo
sino tiene
}
}
</script>

</head>
<body>

<button onclick="PeticionAjax01.coger('Texto.txt')">Coge el documento
01</button>
<span id="ParteHTML">
--Aqu voy a insertar Texto--
</span>

</body>
</html>

Be sealauo en azul claio el couigo necesaiio paia utilizai el B0N uiiectamente,
como vemos es tiabajai con las funciones ue un ibol y iecoiuemos que no
estamos uanuo foimato al texto, aunque ahoia pouiiamos usai hojas ue estilo CSS
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `S

como piuen los uocumentos XBTNL estiictos, la veiuau es que uebiuo a lo estiictos
que son se teimina ponienuo la extension html noimal paia que algn navegauoi
no salte poi cualquiei eiioi.

Ahoia con InneiBTNL:

inneihtml.html
<html>
<head>
<title>Insertar con DOMAPI</title>
objetoAjax.
{
//insercin innerHTML tpica
}
</script>

</head>
<body>

<button onclick="PeticionAjax01.coger('Texto.txt')">Coge el documento
01</button>
--Aqu voy a insertar Texto--
</span>

</body>
</html>

texto.txt

Una linea de texto.

Como vemos uespus ue esto y touos los ejemplos anteiioies, mientias inseitemos
algo como couigo html, la complejiuau es la misma.

El iesultauo uel ejemplo anteiioi en los 2 casos es el mostiauo poi la imagen
siguiente

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `W

!"#$%&'()*+ 4S Ejemplo ue inseicion con inneiBTNL y B0N, touavia no usamos acentos al inseitai
couigo.
S9Y ;(8#6$2)#87K( %') &OG'4& 1>HP446F'Q2'$49
Ya hemos visto algunas cosas que se pueuen hacei con el objeto XNLBttpRequest
que no son pocas, si le aauimos un piogiama en el lauo uel seiviuoi que nos u la
infoimacion las posibiliuaues son muchisimas uebiuo a que ya sabemos como
peuii couigo en foimato ue texto, imgenes y }avaSciipt. Lo siguiente sei pouei
haceilo con una linea ue couigo y olviuainos ue la piogiamacion a bajo nivel. Es lo
que haiemos, te pueues imaginai que estas a punto ue leei un monton ue couigo;
tomatelo con calma, ejectalo y miia como acta, esta es la paite ms fea ue este
tema.

S9Y9N *'4787K( %' 8K%7@& PT>H & 4'\4&9
Como siempie, es mejoi veilo con un ejemplo, voy a ieutilizai aichivos ue los
ejemplos anteiioies ya que estamos familiaiizauos con ellos y se compienuei ms
fcilmente.

inseitaihtml.html
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `L

<html>
<head>
</script>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjaxHtml.js">
</script>
var PeticionAjaxHtml01 = new
objetoAjaxHtml("pag01.html","ParteHTML"); /*Pedimos una pgina y
decimos en que campo colocarla. */
</script>
</head>
<body>
<center>--Aqu voy a insertar cdigo html--</center>
<center>
<button onclick="PeticionAjaxHtml01.cogerHtml()">Coge una pag html
</button>
</center>
</span>
</body>
</html>

Y la clase que nos peimite haceilo es la siguiente.

ClasePeticionAjaxBtml.js
/* Objeto que crea el automticamente el XMLHttpRequest, pide la
informacin que recoge como texto y la inserta en el sitio pedido. */

function objetoAjaxHtml(ruta,idDondeInsertar)
{
this.ruta = ruta; //Ruta que llega asta el archivo con su nombre y
extensin
this.id = idDondeInsertar; //El campo donde insertar
}

function cogerHtml()
{
var idActual = this.id ; /*Dentro de las funciones el this. no
funcionara, as que creamos una variable con su contenido, como
anteriormente.*/
this.completado = function(estado, estadoTexto, respuestaTexto,
respuestaXML)
{
document.getElementById(idActual).innerHTML = respuestaTexto;
}
this.coger(this.ruta); /*Si alguien ha llamado a la funcin cogerHtml
es porque quiere lanzar la peticin y nosotros lanzamos la peticin
xmlhttprequest. */
}
//Esta nueva clase hereda como prototipo la ClasePeticionAjax
objetoAjaxHtml.prototype = new objetoAjax;
//Definimos las funciones nuevas pertenecientes al objeto Html en
particular.
objetoAjaxHtml.prototype.cogerHtml = cogerHtml; //Le aadimos la
funcin cogerHtml.

Con touo esto cogeiiamos la misma pgina uel ejemplo uel iaton y el iesultauo
seiia el mismo que anteiioimente, cabe uestacai el uso ue piototipos, sta clase es
un objetoAjax especializauo paia el manejo ue BTNL.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( ``

S9Y9R *'4787K( %' )# %7<'887K( %' 2(# 73#@'(
Anteiioimente hemos visto uos tipos ue inseicion con el inneiBTNL(tipo1) y con
el B0N(tipo2), la clase que haga esta taiea nos uejai hacei los uos tipos ue
inseiciones.

inseitaiImagen1.html
<html>
<head>
<title>Insertar Imagen</title>
</script>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjaxImagen.js">
</script>
//Definimos un nuevo objetoAjaxImag de tipo 1 y las propiedades de la
imagen
//De izquierda a derecha las propiedades son las siguientes
//El archivo que devuelve la direccin de la imagen.
//Donde insertar la imagen una vez obtenida
//Tipo de insercin 1=InnerHtml 2=DOM
//Alto, Ancho, borde y alt
var PeticionAjaxImag01 = new
objetoAjaxImagen("direccion.txt","ParteHTML",1,"391","350","0","guerre
ro");
</script>

</head>

<body>
<center>--Aqu voy a insetar cdigo html--</center>
<center>
<button onclick="PeticionAjaxImag01.cogerImagen()">Coge
una imagen tipo 1</button>
</center>
</span>
</body>
</html>

En cambio si vamos a inseitai uiiectamente en el B0N, suponemos que las
caiacteiisticas ue la imagen ya estn en la pgina y solo necesitamos que nos
uevuelvan su uiieccion.

inseitaiImagen2.html
<html>
<head>
<title>Insertar Imagen</title>
</script>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjaxImagen.js">
</script>
//Definimos un nuevo objetoAjaxImag de tipo 1 y las propiedades de la
imagen
//De izquierda a derecha las propiedades son las siguientes
//El archivo que devuelve la direccin de la imagen.
//Donde insertar la imagen una vez obtenida
//Tipo de insercin 1=InnerHtml 2=DOM
var PeticionAjaxImag01 = new
objetoAjaxImagen("direccion.txt","ParteImag",2);
</script>
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `Y

</head>

<body>
<center>--Aqu voy a insertar cdigo html--</center>
<center>
<button onclick="PeticionAjaxImag01.cogerImagen()">Coge
una imagen tipo 2</button>
</center>

<center>
<img id="ParteImag" height="391" width="350" />
<center>
</span>
</body>
</html>

uiieccion.txt

guerrero.jpg

La clase que nos peimite opeiai ue la foima anteiioi seiia la siguiente.

ClasePeticionAjaxImagen.js

function objetoAjaxImagen(ruta,idDondeInsertar,tipoInsercion,
alto,ancho,borde,alter) {
this.ruta = ruta; //Ruta que llega asta el archivo que contiene la
direccin del a imagen.
this.id = idDondeInsertar; //El campo donde insertar
this.tipoInsercion = tipoInsercion; //Tipo inseccin 1=InnerHtml 2=DOM
//Propiedades de la imagen
this.alto = alto;
this.ancho = ancho;
this.borde = borde;
this.alternativa = alter;
}

function cogerImagen() {
/*Dentro de las funciones el this. no funcionara, as que creamos una
variable nueva con su contenido, como anteriormente.*/
var idActual = this.id;
var tipoInsercionActual = this.tipoInsercion;
var anchoActual = this.ancho;
var altoActual = this.alto;
var bordeActual = this.borde;
var alterActual = this.alter;

this.completado = function(estado, estadoTexto,
respuestaTexto, respuestaXML) {
var rutaImagen = respuestaTexto;
switch(tipoInsercionActual) { //Realizamos la insercin
case 1: /* Insercin Tipo 1, insertamos cdigo XHTML segn sus
especificaciones, es decir, con las comillas para los atributos y el
cierre al final.*/
document.getElementById(idActual).innerHTML = "<center><img src= \""
+ rutaImagen + "\" width=\"" + anchoActual + "\" height=\"" +
altoActual + "\" border=\"" + bordeActual + "\" alt=\"" + alterActual
+ "\" /></center>" ;
break;

case 2: //Insercion Tipo 2, insertamos directamente en el DOM
document.getElementById(idActual).src = rutaImagen;
break;
}

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `d

}

this.coger(this.ruta); /* Cogemos la ruta que contiene la direccin de
la imagen, NO ES LA IMAGEN, SI SUPIERAMOS DONDE ESTA PARA QUE
QUEREMOS AJAX!! (Para los que no se hayan enterado todava, si
sabemos dnde est la imagen, podemos cambiar su src
document.getElementById(idActual).src = rutaImagen;
directamente en Javascript sin necesidad de invocar al servidor
mediante el objeto XMLHttpRequest) */
}

//Esta nueva clase hereda como prototipo la ClasePeticionAjax y la
extiende.
objetoAjaxImagen.prototype = new objetoAjax;
//Funciones propias solo de esta clase.
objetoAjaxImagen.prototype.cogerImagen = cogerImagen; //La funcin de
coger propia de las imgenes.

El iesultauo ue lo anteiioi seiia mostiai la imagen uel iaton, no aaue naua nuevo,
asi que la omitimos tambin.
S9Y9S *'4787K( %' 8K%7@& 0#D#A8<764 5 )#(E#<)&9
Este es con uifeiencia la clase ms sencilla, se ha uejauo paia el final paia las
mentes cansauas.

Lanzai}avasciipt.html
<html>
<head>
<title>Insertar JavaScript</title>
</script>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjaxJavascript.js">
</script>
var PeticionAjaxjavascriptl01 = new
objetoAjaxJavascript("alertaejemplo.js"); /* Definimos un nuevo
objetoAjaxJavascript */
</script>

</head>
<body>
<center>
<button
onclick="PeticionAjaxjavascriptl01.cogerJavascript()">Lanza cdigo
Javascript</button>
</center>
</body>
</html>

ClasePeticionAjax}avasciipt.js

function objetoAjaxJavascript(ruta) //Solo necesitaremos la ruta.
{
this.Ruta = ruta; //Ruta, que adems podemos redefinir durante el
programa.
}

function cogerJavascript()
{
respuestaXML)
{
eval(respuestaTexto); //Lanzamos el cdigo
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( `X

JavaScript.
}
this.coger(this.Ruta); //Si alguien lanza la peticin nosotros
hacemos lo mismo.
}

objetoAjaxJavascript.prototype = new objetoAjax;
//Prototipos propios de la clase objetoAjaxJavascript
objetoAjaxJavascript.prototype.cogerJavascript = cogerJavascript;
/*Aadimos la funcin de coger al objeto. */

aleitaejemplo.js

alert("Has llamado a un cdigo javascript usando AJAX.");

Con touo lo anteiioi ahoia pouemos apiovechai A}AX abstiaynuonos ue tenei
que pensai en el objeto XNLBttpRequest lo que es un gian avance.

S9d >#('G& %' '<<&<'$9
Pouemos pieguntainos un momento qu ocuiie si hacemos una peticion ue
infoimacion a una uil inexistente uentio ue un seiviuoi que si existe, pueues
intiouucii una en tu navegauoi, el seiviuoi te uevolvei el couigo ue eiioi 4u4,
pgina no encontiaua.

Tal y como est hecha ClasePeticionAjax.js ahoia mismo, aunque la uil no existiese
se entiaiia en estauo 4 y ocuiiiiia lo siguiente.

!"#$%&'()*+ 46 Aunque una pgina no se encuentie la clase A}AX actual la tiataiia igual.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( Ye

Como vemos en la pequea ventana ue la ueiecha hemos iecibiuo un couigo 4u4 y
el seiviuoi nos ha uevuelto la tipica pgina ue eiioi, vamos a inseitai la pgina ue
eiioi!, paiece que no es muy giave, en veiuau nos vamos a enteiai uel eiioi
peifectamente, peio queuaiia ms bonito que salieia una alaima unuonos la
misma infoimacion y no ocuiiieia naua, auems existen ms couigos ue eiioi
menos tipicos. Basta ahoia touo lo que hemos hecho si funciona coiiectamente
uevuelve el couigo 2uu, poi lo que cualquiei cosa que no sea 2uu ahoia mismo la
tomamos como extiao.

0na pequea ueteccion ue eiioies seiia la siguiente (como el couigo es laigo se
han puesto puntos suspensivos en las paites innecesaiias):

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( YN

function peticionAsincrona(url) { //Funcin asignada al mtodo coger
del objetoAjax.
...
function()
{
switch(objetoActual.objetoRequest.readyState)
{
cargando.
objetoActual.cargando();
break;
case 2: //Funcin que se llama cuando se a
cargado.
objetoActual.cargado();
break;
en interactivo.
objetoActual.interactivo();
break;
case 4:
/*Deteccin de errores, solo nos fijamos en el codigo que nos llega

normalmente como bueno, como por ahora no es necesario elevar la

complejidad de la deteccin la dejamos as. */
if(objetoActual.objetoRequest.status !=
200)
{
alert("Posible Error: " +
objetoActual.objetoRequest.status + ", Descripcin: "

+ objetoActual.objetoRequest.statusText);
//Por si queremos hacer algo con el error
manejadorError(objetoActual.objetoRequest.s
tatus);
}
else //Si no hubo error, se deja al
programa seguir su flujo normal.
{
/*Funcin que se llama cuando se completo la transmisin, se le envan
4 parmetros.*/
}
break;
}
}
datos.
}
//Declaramos los manejadores
function objetoRequestCargando() {}
...

La ueteccion ue eiioies est enmaicaua en amaiillo paia que se vea ms claio, es
un pequeo cambio peio uno que nos uai infoimacion sin necesiuau ue estai
utilizanuo un uepuiauoi, sin contai que es bastante ms elegante uetectai un
posible eiioi que uejai vei lo que pasa y si encima queiemos tiatailo ue alguna
maneia, pouemos haceilo con un manejauoi que est poi uefecto en blanco y se
pueue ieuefinii.

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( YR

S9X ?#< $&6&<4' #) 2$2#<7&9
0na ue las cosas que uebemos tenei claia es que el usuaiio final, navegante,
cliente, etc. que se encuentie con nuestia pagina Web o piogiama que use
tecnologia A}AX pulsai sus botones y espeiaia que ocuiia "algo", y uesespeiai,
poi ello estaiia bien que vieia algo mientias espeia, un baiia ue caiga, un mono
saltanuo, etc. uepenue ue la natuialeza ue nuestia aplicacion.

vamos a aauii a nuestia libieiia, exactamente al objeto ue peuii couigo BTNL
una funcion que se llamai cuauioEstauoCaiga, que no sei obligatoiio usaila y
que se poui ieuefinii en el couigo ue la pgina, poi si no nos gusta el que hacemos
poi uefecto, peio que si quisiiamos usai, funcionai sin que tengamos que hacei
naua ms que ueciiselo, con los siguientes iesultauos.

Be utilizauo un texto un poco iaio uel que hay que uai ciuito al cieauoi ue la
libieiia isiA}AX en unos foios, uso este texto paia uno ue sus ejemplos ue caiga
laigos y pouemos encontiai su tiabajo en souicefoige, es un aichivo ue texto ue
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( YS

unos 2u Negas, si estas hacienuo las piuebas en un seiviuoi instalauo en tu PC ue
casa es mejoi que sea un aichivo gianue, si auems es un aichivo ue texto y el
navegauoi se ve obligauo a piocesailo pueue ayuuai a que veas el cuauiito ue
caiga, si no, pasai como un flash y no se apieciai.

La pgina piincipal uel ejemplo anteiioi es la misma que en los ejemplos
anteiioies con los siguientes cambios:

inseitaiBtml.html
<html>
<head>
</script>
</script>
<script language="JavaScript" src="lib/ClasePeticionAjaxHtml.js">
</script>

var PeticionAjaxHtml01 = new
objetoAjaxHtml("largo.txt","ParteHTML","PeticionAjaxHtml01");
</script>

</head>
<body>
<center>--Aqu voy a insetar cdigo html--</center>
<center>
<button onclick="PeticionAjaxHtml01.cogerHtml()">Coge una pag html
</button>
</center>
</span>
</body>
</html>

Como ves hemos aauiuo un teicei componente a la llamaua ue la funcion, es
optativo y uebe sei nombie ue la vaiiable paia que, cuanuo geneiemos el couigo
BTNL uel cuauio cancelai que has visto en la imagen, pouamos ponei que la
imagen uel cuauio cancelai es un link al mtouo aboit uel objeto XNLBttpRequest
ue la vaiiable.

Paia mostiai el cuauio lo nico que hacemos es colocailo en el lugai uonue ii el
texto ya que tenemos su "iu" y cuanuo llegue el texto la funcion ue completauo
volvei a sustituii automticamente el couigo que hay en InneiBtml.

Explicauo lo anteiioi, el couigo ue la clase A}AX tenuiia la siguiente mouificacion:

ClasePeticionAjaxBtml.js

/* NombreVariable es el nombre de la variable que controla la
cancelacin, no necesita ser la variable del objeto, de forma que un
objetoAjax podra cancelar a otro diferente. */
function objetoAjaxHtml(ruta,idDondeInsertar,nombreVariable) {
this.ruta = ruta; //Ruta que llega asta el archivo con su nombre y
extensin.
this.id = idDondeInsertar; //El campo donde insertar.
this.nombreVariable = nombreVariable; //Nombre de esta variable para
poner el cuadro de carga.
}
,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&<3#87K( YW

function cogerHtml() {
var idActual = this.id ; //Dentro de las funciones el this. no
funcionar.
respuestaXML)
{
document.getElementById(idActual).innerHTML =
respuestaTexto;
}
if (this.nombreVariable) //Sin nombre no hay cuadro, lo
mostramos antes de empezar la peticin.
{
this.cuadroEstadoCarga(); /*Sacamos un icono de carga que
hipnotiza al usuario, de estas manera tardar mas en desesperar. */
}

this.coger(this.ruta); /* Si alguien ha llamado a la funcin
cogerHtml lanzamos la peticin xmlhttprequest. */
}

function cuadroEstadoCarga()
{
//Mostramos un cuadrito de carga en el lugar donde ir lo que
estamos cargando.
document.getElementById(this.id).innerHTML =
"<center>" +
"<img src=\"lib/img/cargando.gif\" alt=\"load\" width=\"40\"
height=\"40\" />" +
"<a href=\"javascript:" + this.nombreVariable +
".objetoRequest.abort();\">" +
"<img border=\"0\" src=\"lib/img/cancelar.jpg\" alt=\"cancel\"
width=\"86\" height=\"40\">" +
"</a>" +
"</center>"
}

objetoAjaxHtml.prototype = new objetoAjax;
//Definimos las funciones nuevas pertenecientes al objeto Html en
particular.
objetoAjaxHtml.prototype.cogerHtml = cogerHtml; //Le aadimos la
funcin cogerHtml.
objetoAjaxHtml.prototype.cuadroEstadoCarga = cuadroEstadoCarga; /* El
cuadro que indica el estado de la carga. */

Se ha sealauo el couigo nuevo iefeiente al cuauio ue caiga, el cuauio apaiece poi
uefecto centiauo paia uai un mejoi aspecto como se ve en el couigo BTNL
geneiauo, no es ms que un pai ue imgenes y un link con muchas baiias
inveitiuas paia quitaile a las comillas su sentiuo ue caictei especial.

Igual que hemos hecho esto aqui se pouiia aauii a la peticion ue las imgenes ue
Tipo 1 peio, como no aaue naua nuevo, no lo explicaiemos ya que haiiamos
exactamente lo mismo; lo aauiiiamos antes ue que apaiecieia la imagen y luego
sta lo sustituiiia.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 YL

,#6M42)& W= ;G'36)&$
<'#)'$ %' 2$& 6#<#
/0/1

W9N ?'$8<7687K( %') 8#6M42)&9
Tias lo visto en el capitulo S se pueue uecii que se sabe manejai el objeto bastante
bien, solo se ha uejauo en el tinteio un pai ue funciones uel objeto, muy sencillas,
stas sein lo piimeio que se vei en el capitulo que nos ocupa.

Se solucionai el pioblema ue los caiacteies especiales en Inteinet, como los
acentos, paia que a la hoia ue tiansfeiii infoimacion se pueua hacei iespetanuo la
lengua ue oiigen.

Tias esto se vein una seiie ue ejemplos tipicos uel uso que se le ua noimalmente
A}AX en la web paia que el lectoi se familiaiice con su uso y se ciee la base paia
empleai A}AX en futuios uesaiiollos.

Los ejemplos ue este capitulo ya comienzan a sei consiueiablemente ms gianues
que en capitulos anteiioies, seiia bastante bueno que el lectoi piobaia los
ejemplos y miiaia su couigo completo en un bloc ue notas que coloie el couigo
(como Notepau++) paia que se situ mejoi ya que se omitiin asiuuamente las
cabeceias y algn peuazo ue couigo menos ielevante apaiecei como puntos
suspensivos alguna vez.

0tia cosa inteiesante es que en este capitulo se ha valiuauo el couigo BTNL
siguienuo el estnuai XBTNL estiicto maicauo poi consoicio woilu wiue web, esto
se ha hecho con una extension paia Nozilla Fiiefox llamaua tiuy.

W9R H# c'O #842#)9
Antes ue empezai con las ltimas pincelauas al uso uel objeto XNLBttpRequest y
vei los ejemplos ue uso tiles se vei un piimei ejemplo que se pouiia hacei
hacienuo uso ue lo visto hasta ahoia y que es ms que inteiesante.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Y`

!"#$%&'()*+ 47 Esquema ue una pgina web actual.

Las pginas web actuales tienen un mouelo que siguen ms o menos touas, poi no
uecii que touas, si nos fijamos en la ilustiacion anteiioi veiemos una pgina web
ue ejemplo en la que se han uelimitauo cieitas zonas.

Esta pgina tiene touas las zonas tipicas que pouemos encontiai en un poital web;
aunque pueue vaiiai su posicion y su aspecto gifico su funcionamiento es igual, al
menos siempie nos vamos a encontiai con un titulo(zona 4) y un men(zona S ue
la), estos iaia vez van a uesapaiecei ue la pgina.

En cambio el cueipo ue la pgina(zona 1), va a cambiai uepenuienuo ue la seccion.
Lo iueal seiia que cuanuo cambiamos ue seccion solo vaiiaia esto y con lo que
hemos apienuiuo hasta ahoia es posible haceilo.

Antes ue A}AX se pouian usai Fiames, ahoia la solucion con A}AX es ms elegante y
peimite hacei a los uesaiiollauoies ms viigueiias.

W9S >U4&%&$ B;T- *aAT 5 8#<#84'<'$ '$6'87#)'$ '( J(4'<('49
Se vein piimeio los mtouos ue foima teoiica, seguiuo se solventai el pioblema
ue los caiacteies especiales y se juntai touo en un ejemplo paia que queue mucho
ms claio auems ue tenei una base paia copiai y pegai en un uso posteiioi.

W9S9N J(4<&%2887K( # )&$ 3U4&%&$ B;T 5 *aAT9
Algunos lectoies conocein ya estos mtouos con sus uifeiencias, bonuaues y
malicias peio paia los que no y ya que tenemos que auaptai nuestio objeto A}AX a
su uso, vemoslos bievemente.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 YY

@C%434 X<F
Es el que hemos estauo utilizanuo hasta ahoia, sin uiscutii en ningn momento su
uso, con este mtouo la 0RL ue la uiieccion peuiua junto con los valoies que se
envian foiman una misma cauena.

Ejemplo uET: Las 2 lineas foiman 1 sola cauena ue caiacteies

https://localhost:8443/pruevas/servidorRespuestas.jsp?Nombre=Juan%20Ma
riano&Apellidos=Fuentes%20Serna&Cumple=29%20de%20Diciembre&TimeStamp=1
160758169187

Esto mtouo tiene un inconveniente bastante malo, si te fijas en el histoiial ue tu
navegauoi tenuis muchisimas pginas que uebiuo a que usan este mtouo
guaiuan junto con la uiieccion, las vaiiables y su valoi, si esto eian uatos
confiuenciales ests peiuiuo, peio si auems pensamos que hay seiviuoies que
guaiuan un histoiial ue las paginas web peuiuas este tipo ue infoimacion es ya un
veiuaueio atentauo contia la piivaciuau.

Poi esto, lo piimeio que uebemos cambiai es el uso uel mtouo uET al P0ST que se
vei seguiuamente, mencionai que poi uefecto la mayoiia ue toolkits A}AX usan el
mtouo uET, si usas alguno paia uesaiiollai una aplicacion fuizalo a utilizai el
mtouo P0ST si es posible.

@C%434 EYWF
Cauena ue peticion P0ST
https://localhost:8443/pruevas/servidorRespuestas.jsp
Cauena ue valoies ue la peticion P0ST
Nombre=Juan Mariano&Apellidos=Fuentes Serna&Cumple=29 de
Diciembre&TimeStamp=1160758191375

Touo queua mucho ms sepaiauo y limpio, auems se evita que queue en los
histoiiales que es su punto fueite, es lo que se iecomienua utilizai, junto con un
sistema ue enciiptacion paia aseguiai el canal ue comunicacion.

W9S9R ,#<#84'<'$ '$6'87#)'$9
Este pioblema suige uebiuo a las uifeientes couificaciones que hay paia los
caiacteies en texto plano, si estas vienuo una pgina que has hecho tu mismo ue
foima local no hay pioblema peio si es un seiviuoi quien est geneianuo
infoimacion y utiliza otia couificacion es casi seguio que los acentos se van a
estiopeai poi el camino y cuanuo se muestien al final sein unos signos ue
inteiiogacion algo pintoiescos y extiaos.

Paia solventai este pioblema haiemos uos cosas, la piimeia, guaiuaiemos las
pginas web que se esciiban en foimato ue texto 0TF-8 que contiene touos los
simbolos, una vez que hemos teiminauo la pgina web utilizanuo nuestio euitoi
favoiito si este no tiene opciones paia guaiuai en foimato 0TF-8 no tenemos ms
que abiii el aichivo BTNL como si ue un texto noimal se tiatase con el bloc ue
notas "en Winuows", iinos al men ue aichivo->uuaiuai como.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Yd

!"#$%&'()*+ UH Como guaiuai en foimato 0TF-8 con el bloc ue notas ue Winuows.
La segunua paite impoitante es que en la paite uel seiviuoi tenemos que ueciile
que el aichivo est guaiuauo tambin en ese foimato (auems ue guaiuailo) y
cuanuo iecojamos los paimetios enviauos poi el cliente haceilo tambin
aclaianuo que estn en foimato 0TF-8, paia esto aauiiemos al aichivo jsp las
siguientes lineas que se ponuin coiiectamente en el ejemplo.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
request.setCharacterEncoding("UTF-8");
W9S9S ,#3O7&$ '( )# )7O<'<M# 6#<# Q2' #8'64' )&$ R 3U4&%&$9
Anteiioimente utilizaba siempie el mtouo uET, ahoia con especificai cul usai al
cieai el objeto y seleccionai ms taiue el mtouo con una estiuctuia ue seleccion
simple sei suficiente, iemaicaiemos lo inteiesante en el couigo y omitiiemos lo
que no sea necesaiio.

function objetoAjax(metodo)
{

this.metodo = metodo;
}
function peticionAsincrona(url,valores) //Funcin asignada al mtodo
coger del objetoAjax.

// El parmetro valores slo se usa en el caso POST
{
/*Copiamos el objeto actual, si usamos this dentro de la funcin que
asignemos a onreadystatechange, no funcionara.*/
this.objetoRequest.open(this.metodo, url, true); //Preparamos
la conexin.

if (this.metodo == "GET")
{
datos.
}
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 YX

else if(this.metodo == "POST")
{
this.objetoRequest.setRequestHeader('Content-
Type','application/x-www-form-urlencoded');
this.objetoRequest.send(valores);
}
}
Como se apiecia, ahoia cuanuo lancemos la peticion si se utiliza el mtouo P0ST
uebemos uai los valoies en una cauena apaite, esto sei suficiente paia su buen
compoitamiento.

ZYFR !@EY9FRZF<[ El cambio hecho en este momento hace que si se quieie
hacei uso ue los objetos encapsulauos uel capitulo anteiioi junto con esta nueva
veision uel objetoAjax, se tengan que iealizai cieitas mouificaciones sencillas
sobie ellos, este ejeicicio se ueja piopuesto al lectoi inteiesauo.
W9S9W ;G'36)& %' 2$& %' )&$ 3U4&%&$ B;T 5 *aAT9

!"#$%&'()*+ 49 Ejemplo ue los mtouos uET y P0ST.

A la hoia ue esciibii couigo en el lauo uel seiviuoi no cambia naua el utilizai los
mtouos uET o P0ST como se ve en el couigo siguiente que no tiene naua especial
paia tiatai la peticion uepenuienuo uel mtouo usauo:

seiviuoiRespuestas.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 de

%>

<%
request.setCharacterEncoding("UTF-8"); //Para resolver problemas
con los acentos
//Gracias al TimeStamp podemos hacer una comprovacin de viveza si
queremos
//ej: Si los datos tienen mas de 5 segundos, no hacemos nada ya
que puede ser un paquete viejo.
String TimeStamp;
TimeStamp = request.getParameter( "TimeStamp" );

String Nombre;
Nombre=request.getParameter( "Nombre" );

String Apellidos;
Apellidos=request.getParameter( "Apellidos" );

String Cumple;
Cumple=request.getParameter( "Cumple" );

//Devolvemos una respuesta al usuario
out.print("Hola " + Nombre + " " + Apellidos + " tu cumpleaos es
el :" + Cumple);
%>

Sobie la paite BTNL uel ejemplo, lo ms inteiesante es la uifeiencia a la hoia ue
usai un mtouo u otio ya que el mtouo P0ST envia los valoies en una cauena
apaite ue la uil, el couigo fuente completo lo pueues encontiai en los couigos
fuente uel libio.

Peticion.html(solo paite uel aichivo)

function datosCuestionarioEnCadena() //Esta funcin construye una cadena con
los 3 datos
{
//Cogemos los datos de cada campo y los metemos en una variable cada uno
var Nombre = document.getElementById( "Nombre" ).value;
var Apellidos = document.getElementById( "Apellidos" ).value;
var Cumple = document.getElementById( "Cumple" ).value;
//Construimos una cadena con ellos con el formato estndar de enviar
informacin
var cadenaPeticionCuestionario = "Nombre=" + Nombre + "&Apellidos=" +
Apellidos + "&Cumple=" + Cumple;

return cadenaPeticionCuestionario; //Devolvemos la cadena que se usara en
otras funciones
}

function peticionUsandoGET()
{
darInfo01= new objetoAjax("GET"); //Construimos un objetoAjax que utilizar
el mtodo GET
/*Cuando se usa el mtodo GET la pgina a la que enviamos los datos y los
datos van unidos en la misma cadena */
var cadenaPeticionGET = "servidorRespuestas.jsp?"; //La pgina.
cadenaPeticionGET = cadenaPeticionGET + datosCuestionarioEnCadena() +
"&TimeStamp=" + new Date().getTime(); //Unimos la pgina con el resto de los
datos.

darInfo01.completado = objetoRequestCompletado01;
darInfo01.coger(cadenaPeticionGET); //Enviamos tanto la pgina como los
datos en la misma cadena.
}

function peticionUsandoPOST()
{
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dN

darInfo01= new objetoAjax( "POST" ); //Construimos un objetoAjax que
utilizar el mtodo POST
//Cuando se utiliza el mtodo POST la pgina a la que enviamos los datos y
los datos van en cadenas diferentes.
//Cadena de los datos
var datosPOST = datosCuestionarioEnCadena() + "&TimeStamp=" + new
Date().getTime();
darInfo01.completado = objetoRequestCompletado01;
//Enviamos la pgina y los datos en cadenas diferentes.
darInfo01.coger( "servidorRespuestas.jsp" , datosPOST);
}

Con esto hemos teiminauo el vistazo a los ejemplos uET y P0ST auems ue
solucionai el pioblema ue los caiacteies especiales.
W9W H''< )#$ 8#O'8'<#$ %') &OG'4& 1>HP446F'Q2'$49
Este punto nos seivii paia uos cosas, paia vei como leei las cabeceias uel objeto
XNLBttpRequest y paia, segn qu cabeceias nos lleguen, actuai ue una foima u
otia. Es bueno ieutilizai los objetos y facilita muchos pioblemas a veces, si se
puuieia hacei una peticion y que segn una seal que la iespuesta se tiatase ue
una foima u otia seiia algo muy til, esto se pueue hacei mucho mejoi y se hai,
hacienuo uso ue XNL, poi ahoia vamos a vei el ejemplo usanuo las cabeceias.

Es bastante simple, hacemos una peticion como cualquiei otia y leemos sus
cabeceias, leemos una u otia uepenuienuo ue una vaiiable que se cambia a causa
uel boton que pulsamos.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dR

!"#$%&'()*+ Su Ejemplo ue leei las cabeceias uel objeto XNLBttpRequest.
Como el aichivo que iecibimos en la peticion no se usa en este caso piescinuimos
ue el.

cabeceiasBeLaRespuesta.html
<html>
<head>
<title>Leer los datos de la cabecera del objeto
XMLHttpRequest</title>
<script language="JavaScript" type="text/javascript"

function peticionCabeceras(cabecera)
{
var quecabecera = cabecera;
var recogerInfo01 = new objetoAjax("GET"); //Construimos un
objetoAjax que utilizar el mtodo GET
recogerInfo01.completado =

{
if(quecabecera == "todas")
{
alert(recogerInfo01.objetoRequest.getAllResponseHeaders());
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dS

}
else if(quecabecera == "servidor")
{
alert(recogerInfo01.objetoRequest.getResponseHeader("Server"));
}
else if(quecabecera == "ultimaModificacion")
{
alert(recogerInfo01.objetoRequest.getResponseHeader("Last-
Modified"));
}
}

recogerInfo01.coger("videoclub.xml"); //Enviamos tanto la pgina como
los datos en la misma cadena.
}
</script>
</head>

<body>
<h1>Leer los datos de la cabecera del objeto
XMLHttpRequest:</h1>
<a href="javascript:peticionCabeceras('todas');">Leer todas las
cabeceras.</a>
<br />
<a href="javascript:peticionCabeceras('servidor');">Leer el
servidor.</a>
<br />
<a href="javascript:peticionCabeceras('ultimaModificacion');">Leer
ltima modificacin.</a>
</body>
</html>

Como poui apieciai el lectoi si se fijo en la figuia 4.4 paia peuii una cabeceia sola
hay que utilizai el nombie poi el cual est llamaua cuanuo las peuimos touas.

W9L /24& D'<7V78#87K( 5 <'(%737'(4& '( /0/19
La auto veiificacion es una ue esas cosas sencillas que pueue ayuuai muchisimo al
usuaiio y hacei que nuestio poital tenga algo uifeiente iespecto ue otios, peio
tambin pueue sei una maneia ue caigai tanto el seiviuoi que tengamos que
compiai uno 1u veces mas gianue.

Consiste bsicamente en que cieitas acciones, como pouiia sei vei si una pgina
Web existe o un usuaiio existe, se iealicen sin necesiuau ue que el usuaiio tenga
que pulsai ningn boton. Estas acciones se iealizan automticamente cuanuo
fueian tiles, evitanuo muchas veces caigai una pgina ue eiioi, el ejemplo que
nos ocupa tiata una hipottica cieacion ue usuaiio, estoy seguio ue que ms ue un
lectoi ha teniuo pioblemas paia iegistiaise uebiuo a que los nombies ue usuaiio
que le gustaban estaban ya en uso, este ejemplo intenta iesolvei esto ue foima ms
elegante sin tenei que iecibii una pgina nueva que uiga "el nombie ue usuaiio
esta cogiuo", con la consecuente piuiua ue tiempo.

El ejemplo siguiente consta ue S aichivos, uno .html que tiene tanto couigo
}avaSciipt como BTNL y uos aichivos .jsp, el nico aichivo que no es pequeo es el
html que se uiviuii en uos paites paia mostiailo en este texto, uicho esto
comenzamos con el ejemplo.

autoveiificai.html (Paite BTNL)
<body onload="desconectaBoton(1)">
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dW

<h1>EJEMPLO DE VERIFICACION DE USUARIOS USANDO AJAX</h1>
<br />
Tenemos una hipottica base de datos (simulada) solo con dos
usuarios, JuanMa y Sergio.
<br />
Queremos crear un nuevo usuario.
<br />
El sistema comprobar mientras que escribes si tu nombre de
usuario esta ya en la base de datos o no.
El nombre debe ser de al menos 4 caracteres de largo.
<br />

<form action="insertar.jsp" method="get">

<table border="0">
<tr>

<td>
<input type="text" id="idUsuario" name="idUsuario" size="20"
onkeyup="validarUsuario()" />
</td>
<td>
<span id="mensajeValidacion">
</span>
</td>
</tr>
</table>

<input type="Submit" id="botonAceptacion" value="Crear Cuenta" />
</form>

</body>

Como se ve es un foimulaiio muy sencillo, se uestaca la piimeia linea uebiuo a que
tiene una cosa algo cuiiosa, naua ms teiminai ue caigai la pgina se lanza una
funcion, esta funcion uesconectai el boton ya que ste se activai y uesactivai
uepenuienuo ue si el usuaiio intiouuciuo es vliuo o no, el aspecto uel ejemplo es
el mostiauo en la ilustiacion que sigue.

!"#$%&'()*+ S1 Ejemplo veiificacion automtica utilizanuo A}AX.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dL

autoveiificai.html (Paite }avasciipt)
var PeticionAjax01 = new objetoAjax("GET"); //Definimos un nuevo
objetoAjax.

function validarUsuario()
{
if (!posibleUsuario) //Crea una variable con el nombre del Posible
nuevo usuario
{
var posibleUsuario = document.getElementById("idUsuario");
}

// Enva el nombre a la url de verificacin si este es de al menos 4
caracteres de largo.
if (escape(posibleUsuario.value.length) > 3)
{
var url = "validarUsuario.jsp?id=" + escape(posibleUsuario.value);
PeticionAjax01.coger(url);
}
else
{
desconectaBoton(1); //Desactivamos el botn si el nombre es muy
corto.
document.getElementById('mensajeValidacion').innerHTML = "Nombre muy
corto."; //Si haba texto lo borramos.
}
}

{
//La pagina jsp devolver true si el nombre se puede usar y false si
ya est usando por otro usuario.
if(respuestaTexto == "true")
{
document.getElementById('mensajeValidacion').innerHTML = "<div
style=\"color:green\">Nombre usuario libre.</ div>";
desconectaBoton(0); //Si se puede usar mantenemos el botn activado.
}
else
{
document.getElementById('mensajeValidacion').innerHTML = "<div
style=\"color:red\">Nombre de usuario ya cogido.</ div>";
desconectaBoton(1); //Si no se puede usar desactivamos el botn.
}
}

function desconectaBoton(opcion)
{
var boton = document.getElementById("botonAceptacion");
boton.disabled = opcion;
}
</script>

La iuea es muy sencilla, la funcion valiuai0suaiio() envia el nombie al seiviuoi al
aichivo valiuai0suaiio.jsp si ste es ue al menos ue cuatio caiacteies, el seiviuoi
solo nos pueue contestai tiue(el nombie se pueue usai) o false(nombie ocupauo).
Bepenuienuo ue esta iespuesta que se iecibe en la funcion
objetoRequestCompletauou1() se ueja el boton activo o se uesactiva, ue esta
maneia al usuaiio no le llegai la tipica pgina uicienuo que su nick ue iegistio
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 d`

est ya cogiuo caua vez que intenta iegistiaise y se evita con ello peiuei el
contexto y los uatos ue la pgina uonue estamos.

Con lo anteiioi explicauo los estauos posibles en los que pueue estai la pgina son
los mostiauos en la ilustiacion siguiente:

!"#$%&'()*+ S2 Ejemplo ue veiificacion, estauos posibles.
Aunque no aaue mucho al ejemplo aqui estn los aichivos jsp ya que pueuen
aclaiai ue uonue se saca el valoi ue iespuesta y como se ha simulauo el miiai en
una base ue uatos.

valiuai0suaiio.jsp
<%
String usuario;
usuario=request.getParameter("id");
//Tenemos una hipottica base de datos solo con JuanMa y Sergio, la
simulamos de esta manera.
if ( (usuario.equals("JuanMa")) || (usuario.equals("Sergio")))
{
out.print("false");
}
else
{
out.print("true");
}
%>

inseitai.jsp
<html>
<heau><title><title><heau>
<bouy>

\$#'&)4 )+$.&%'34[ <%= iequest.getPaiametei("iu0suaiio") %> <bi >
<a hief="inuex.html">]#."6. ' "' 81M)+' 8&)+()8'"<a>.
<bouy>
<html>

Esta, como muchas otias cosas que se pueuen iealizai hacienuo chequeos
consecutivos al seiviuoi empleanuo A}AX, tienen un coste en timinos ue CP0 y
ancho ue banua.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dY

En algunos casos A}AX ayuua a ahoiiai mientias que en otios hace que caiga el
ienuimiento consiueiablemente, este es uno ue los segunuos, caua vez que nuestio
usuaiio libeie una tecla se enviai una peticion.

Si se llena una pgina ue seivicios como ste y el seiviuoi ya estaba ms o menos
copauo pueue sei un gian pioblema, poi ello el uiseauoi ue la aplicacion web
uebe tenei estas cosas en cuenta y sabei bien con qu est tiabajanuo.

W9` *7%7'(%& 5 #(#)7E#(%& %&823'(4&$ 1>H9
En este apaitauo se va a iniciai al lectoi en el uso ue aichivos XNL paia iecibii una
iespuesta, analizaila y mostiai el iesultauo en pantalla.

Recoiiei el B0N ue un aichivo XNL y sacai infoimacion es similai a haceilo en un
uocumento BTNL, aunque en la pictica es mucho ms sencillo, ya que no "suelen"
tenei la complejiuau uel B0N uel navegauoi, y en esto es uonue se centia el
ejemplo.

En capitulos posteiioies se vei como geneiai uinmicamente el aichivo XNL
uesue el seiviuoi, poi ahoia se comenzai piuienuo un aichivo ya existente que se
tiatai hacienuo uso ue }avaSciipt uesue la pgina web piincipal, este ejemplo
pues, solo tenui uos aichivos significativos, el aichivo .xml y la pgina web .html
que contenui el couigo }avaSciipt necesaiio, como siempie, se seguii hacienuo
uso ue la libieiia A}AX constiuiua anteiioimente.

El lectoi poui notai que no se hace uso ue las clases encapsulauas
(ClasePeticionAjaxBtml.js, ClasePeticionAjaxImagen.js,
ClasePeticionAjax}avasciipt.js) en este capitulo, si el lectoi ievisa el apaitauo
uonue se explicaban los mtouos uET y P0ST, vei que se hizo uso uel 0bjetoAjax
aunque hubieia siuo posible evitailo iealizanuo las mouificaciones opoitunas a
ClasePeticionAjaxBtml.js.

Entonces no se hizo asi ya que habia que hacei cambios en la libieiia y es ms
instiuctivo veilo en el objeto mas geniico, peio en el caso uel ejemplo que nos
ocupa tenemos que uefinii un manejauoi uifeiente al que esta clase apoita y ya
que no se ahoiia tiabajo, se ha piefeiiuo utilizai el objeto piincipal uiiectamente.

Ya que un uocumento XNL contiene infoimacion guaiuaua ue una maneia
estiuctuiaua y lo que se pietenue es iescatai esta infoimacion uel seiviuoi, filtiai
la paite til y mostiaila uinmicamente a causa ue una peticion uel usuaiio,
haiemos esto iescatanuo un aichivo XNL ue un hipottico viueoclub, hacinuolo lo
mas sencillo posible.

El ejemplo es el siguiente:

viueoclub.xml
<?xml version="1.0" encoding="UTF-8"?>

<VideoClub>
<Infantil>
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dd

<Titulo>El rey Len</Titulo>
<Titulo>Aladn</Titulo>
</Infantil>

<Adultos>
<Titulo>Eraser</Titulo>
<Titulo>Instinto Bsico</Titulo>
</Adultos>
</VideoClub>

AnalizaiXNL.html (Paite BTNL)
<body>
<h1>Analizando una respuesta XML de un videclub.</h1>
<br/><br/>
<form action="#">
<input type="button" value="Ver todas las pelculas"
onclick="comenzarPeticion('Todas');"/>
<br/><br/>
<input type="button" value="Ver solo las infantiles"
onclick="comenzarPeticion('Infantiles')"/>
</form>
<br />
<span id="respuestaServidor"></span>
</body>

Antes ue vei la paite }avaSciipt que es la compleja seiia bueno que el lectoi se
familiaiizaia con el iesultauo que se espeia, que en este caso es muy sencillo y est
mostiauo en la figuia siguiente.

!"#$%&'()*+ SS Resultauo uel anlisis ue un uocumento XNL iecibiuo con A}AX.

AnalizaiXNL.html (Paite }avaSciipt)

peticion01= new objetoAjax("GET"); //Construimos un objetoAjax que utilizar el
mtodo GET

function comenzarPeticion(listaPedidaBoton) {
//Podemos tener varias opciones a la hora de mostrar la informacin.
var listaPedida = listaPedidaBoton ;
peticion01.completado = function objetoRequestCompletado01(estado,
estadoTexto, respuestaTexto, respuestaXML) {
//Dependiendo de lo pedido debemos procesar la informacin de una manera u
otra.
if(listaPedida == "Todas")
{
listarTodo(respuestaXML);
}
else if (listaPedida == "Infantiles")
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 dX

{
listarParte(respuestaXML);
}
}
peticion01.coger("videoclub.xml");
}

function listarTodo(documentoXML) {
//Cogemos todo lo que contienen las etiquetas ttulo.
var documentoCompleto = documentoXML.getElementsByTagName("Titulo");
imprimirLista(" --Todos los videos-- ", documentoCompleto);
}

function listarParte(documentoXML) {
//Primero nos quedamos con la etiqueta Infantil.
var parte = documentoXML.getElementsByTagName("Infantil")[0];
var parteDeLaParte = parte.getElementsByTagName("Titulo");
//Luego con las etiquetas Ttulo dentro de la etiqueta Infantil.
imprimirLista(" --Videos Infantiles-- ", parteDeLaParte);
}

function imprimirLista(titulo,informacion) {
salida = titulo; // Comenzamos poniendo el titulo, luego encadenaremos todo el
documento aqu.
var campoActual = null;
for(var i = 0; i < informacion.length; i++) {
/* Cogemos el nodo correspondiente a la iteracin (puesta para clarificar,
podramos hacerlo de la variable informacin directamente). */
campoActual = informacion[i];
//Lo aadimos a la salida dejando un retorno de carro.
salida = salida + "<br>" + campoActual.childNodes[0].nodeValue;
}
/*Incrustamos la salida en la pgina, le hemos dado un formato plano para que
el ejemplo sea sencillo, pero podramos crear una tabla con links recogiendo
mas capos e insertndolos, etc.. */
document.getElementById("respuestaServidor").innerHTML = salida;
}

El anlisis uel uocumento XNL se hace ue la foima mostiaua anteiioimente
inuepenuientemente ue lo complejo que el uocumento sea, si lo fueia ms se
tenuiia que ii piuienuo etiquetas uentio ue otias etiquetas como se ha mostiauo,
giacias a esto se pueuen uesaiiollai piogiamas mas complejos y como el lectoi
pueue vislumbiai toua la uificultau ue la paite A}AX ue cualquiei piogiama sei
cieai los manejauoies paia enviai, iecibii y manejai la infoimacion que se
tiansmita, que con un poco ue pictica se conveitii en una taiea iepetitiva.

W9Y F'V<'$8#< )# 6#(4#))# #24&3C478#3'(4'9
Este ejemplo es paia mostiai una funcion ue }avaSciipt que pueue tenei una
impoitancia ciitica en el uesaiiollo ue cieitos piogiamas con necesiuaues ue
tiempo y muchas veces concuiientes, giacias a A}AX ahoia a esto pouemos sumai
el cogei infoimacion ue lauo seiviuoi con lo cual las posibiliuaues son ilimitauas.

El ejemplo uel uso uel funcion setTimeout es bastante sencillo peio siempie es
mejoi vei el iesultauo antes paia compienuei mejoi qu hace el couigo;
bsicamente se va a iefiescai la pantalla automticamente mostianuo un mensaje
que ii cambianuo a otio uinmicamente, stos estn almacenauos en el seiviuoi.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Xe

!"#$%&'()*+ S4 Ejemplo ue iefiesco automtico hacienuo uso funcion setTimeout y A}AX.
El ejemplo tiene uos elementos que uebemos uestacai ya, el piimeio y ms notable
es que los cambios en la pgina se hacen sin peimiso uel usuaiio, l no uispaia la
accion. En piincipio hay quien pueue pensai que esto es peligioso, y es veiuau, lo
es, peio tambin es poco evitable y muy til paia un uesaiiollauoi.

El segunuo es que los mensajes son enviauos poi el seiviuoi en este ejemplo, y se
pouiian geneiai ue foima uinmica si hicieia falta. Claio est, en este ejemplo touo
es muy simple.

El ejemplo consta solo ue 2 aichivos, bastante pequeos, seguimos hacienuo uso ue
la misma libieiia A}AX cieaua anteiioimente.

autoRefiescai.html
<html>
<head>
<title>Refrescar automticamente la pgina</title>
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XN

var tiempo = 0;

function refrescarAuto()
{
tiempo++;
document.getElementById("tiempo").innerHTML ="El contador de tiempo
es :" + tiempo;
if((tiempo%2) == 0) //En los nmeros pares (cada 2 segundos),
hacemos la peticin.
{
peticionFrase();
}
setTimeout("refrescarAuto()", 1000); //Incrementamos la cuenta cada
segundo
}

function peticionFrase()
{
peticion01= new objetoAjax("GET"); //Construimos un objetoAjax que
utilizar el mtodo GET
peticion01.completado = function objetoRequestCompletado01(estado,
estadoTexto, respuestaTexto, respuestaXML)
{
document.getElementById("respuesta").innerHTML = respuestaTexto;
}
url = "cuentameAlgo.jsp?tiempo=" + tiempo;
peticion01.coger(url);
}
</script>
</head>
<body>
<h1>Refrescar automticamente la pgina.</h1>
<table border="1">
<tr>
<td><span id="tiempo"></span></td>
<td><span id="respuesta"></span></td>
</tr>
</table>
refrescarAuto();
</script>

</body>
</html>

cuentameAlgo.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-
8"%>

<%
//Para resolver problemas con los acentos a la hora de recoger la
informacin.
int tiempo = 0;
tiempo = Integer.parseInt( request.getParameter("tiempo"));
switch(tiempo)
{
case 2: out.print("Este pequeo ejemplo");
break;
case 4: out.print("te puede ser til");
break;
case 6: out.print(".");
break;
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XR

case 8: out.print("...");
break;
case 10: out.print("....................");
break;
default: out.print("Todava sigues esperando? Ya termin por
si no te has dado cuenta.");
}
%>

Como se pueue apieciai el couigo es bastante sencillo, se hace una peticion caua 2
segunuos y se inseita el texto enviauo poi el seiviuoi en el cuauio uel cliente, las
peticiones al seiviuoi se hacen solo en los nmeios paies con lo cual un nmeio
impai nunca llegai al uefault ue la estiuctuia caso uel seiviuoi.

Poi ltimo comentai que antes ue A}AX se pouia simulai algo paieciuo tenienuo
una pgina .jsp que iecibe la infoimacion ue su constiuccion uinmicamente caua
vez que se llama con lo que pueue cambiai, como existe la posibiliuau ue hacei que
la pgina completa se iecaigue caua cieito tiempo sta se actualizaba, peio claio
iecaiganuo la pgina enteia hacienuo que el seiviuoi la geneie ue nuevo, ahoia
giacias a A}AX tenemos algo que con lo que utilizanuo menos iecuisos obtenemos
ms potencia.

Ejemplo iecaiga antes ue pouei cogei infoimacion usanuo A}AX:
<META http-equiv= "refresh" content = "16;URL=index.jsp">

W9d h(# O#$' %' %#4&$ 8<'#%# 8&( ') ?a> 5 @2#<%#%# 8&( /0/19
Antes ue naua, paia posicionainos en el ejemplo, que nauie se engae no vamos a
hacei una inteifaz SQL ni naua poi el estilo, la iuea es geneiai uinmicamente una
tabla con infoimacion uaua poi el usuaiio con la siguiente inteifaz, vista en la
ilustiacion siguiente.

!"#$%&'()*+ SS Tabla geneiaua uinmicamente hacienuo uso uel B0N.
Esto no tiene naua que vei con A}AX, es solo una muestia ue que se pueue ii
geneianuo los elementos necesaiios uinmicamente.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XS

Aunque no lo paiezca, es un gian avance ya que giacias a ello pouemos iealizai
piogiamas con un aspecto visual agiauable ipiuamente si los piogiamamos en un
web.

Peio necesitamos guaiuai la infoimacion que geneiamos, en otio caso no tenuiia
ningn sentiuo. Llegauo este momento pouemos elegii aichivo o base ue uatos, en
este caso elegimos aichivo, le enviaiemos los uatos a una pgina jsp que cieai el
aichivo, ue foima que la cosa gificamente queuaiia como se ve en la imagen
siguiente.

!"#$%&'()*+ S6 Inteifaz simple paia guaiuai y caigai ue un aichivo.

El ejemplo se ha intentauo hacei lo ms simple posible aun asi su couigo es un
poco laigo, se ha geneiauo la tabla hacienuo uso uel B0N poi lo cual se complica
un poco, peio en cambio guaiuamos en un aichivo y iescatamos la infoimacion
hacienuo uso ue la piopieuau "inneiBTNL" lo que simplifica muchisimo esta
paite. En otias palabias, el aichivo almacena la infoimacion uiiectamente en
BTNL pues seiia una ieuunuancia cieai nuestio piopio foimato XNL uisponienuo
ya ue uno: el BTNL.
W9d9N ,<'#< 2(# 4#O)# %7(C378#3'(4'9
Comenzaiemos mostianuo como alcanzai el iesultauo mostiauo en la figuia 4.9
que es geneiai la tabla juganuo con el B0N, esto lo hacemos asi poique paia una
peisona que no est acostumbiaua a geneiai couigo ue esta maneia ya es
suficiente pioblema y un escollo gianue que se uebe salvai paia hacei aplicaciones
gianues, nuestio ejemplo consta ue solo un aichivo que contiene tanto el couigo
BTNL como }avaSciipt y como no estamos hacienuo uso ue A}AX no nos hacen falta
las libieiias.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XW

El aichivo est comentauo y es suficientemente auto explicativo peio algo laigo
poi lo cual se ha ueciuiuo paitii en ties paites: uos paites }avaSciipt caua una con
una funcion y una paite html.

baseBatosB.html(Paite 1 }avaSciipt)
var identificadorUnico = 0;

function nuevoDisco() //Aadimos un disco a la tabla.
{
//1.Recogemos los valores de entrada.
var autor = document.getElementById("autor").value;
var titulo = document.getElementById("titulo").value;
var estilo = document.getElementById("estilo").value;
//2.Nos cercionamos de que tengan sentido.
if(autor == "" || titulo == "" || estilo == "")
{
return;
}
else
{
//3.Limpiamos las entradas.
document.getElementById("autor").value = "";
document.getElementById("titulo").value = "";
document.getElementById("estilo").value = "";
//4.Creamos una nueva fila para la tabla, usando el DOM y le
aadimos las celdas
var fila = document.createElement("tr");
fila.setAttribute("id",identificadorUnico); //Le damos un
identificador nico para poder reconocerla.

var celda1 = document.createElement("td");
celda1.appendChild(document.createTextNode(identificadorUnico));
fila.appendChild(celda1);

celda2.appendChild(document.createTextNode(autor));

celda3.appendChild(document.createTextNode(titulo));

celda4.appendChild(document.createTextNode(estilo));

//5.Creamos un botn para asignrselo a la fila
var botonborrar = document.createElement("input");
botonborrar.setAttribute("type", "button");
botonborrar.setAttribute("value", "Borrar Elemento");

/*Hay al menos 3 maneras de hacer lo siguiente, yo lo voy a guardar
como formato texto, as podemos guardar el cdigo html despus en
formato texto y que la referencia al id se guarde, sino se perder
*/

botonborrar.setAttribute("onclick", "borrarDisco(" +
identificadorUnico + ")");
//6.Metemos el botn dentro de una celda y lo aadimos a la fila
celda5.appendChild(botonborrar);
//7.Aumentamos el valor del contador de los identificadores nicos.
identificadorUnico++;
//8.Actualizamos la tabla
document.getElementById("tablaDiscos").appendChild(fila);
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XL

}
}

baseBatosB.html(Paite 2 }avasciipt)
function borrarDisco(BorrarIdentificadorUnico) //Borramos un disco de
la tabla
{
var borrarFila = document.getElementById(BorrarIdentificadorUnico);
var tablaDiscos = document.getElementById("tablaDiscos");
tablaDiscos.removeChild(borrarFila);
}

baseBatosB.html(Paite S BTNL)
<body>
<h1>Base de datos de Discos</h1>
<h2>Aadir datos:</h2>
<form action="#">
<table width="80%" border="0">
<tr>
<td>Autor: <input type="text" id="autor"/></td>
<td>Ttulo: <input type="text" id="titulo"/></td>
<td>Estilo: <input type="text" id="estilo"/></td>
<td colspan="3" align="center">
<input type="button" value="Aadir"
onclick="nuevoDisco()" />
</td>
</tr>
</table>
</form>
<h2>Tabla de Discos:</h2>
<table border="1" width="80%">
<tbody id="tablaDiscos">
<tr>
<th>Id</th>
<th>Autor</th>
<th>Ttulo</th>
<th>Estilo</th>
<th>Operaciones</th>
</tr>
</tbody>
</table>
</body>

El funcionamiento (que no el couigo }avaSciipt) es bastante simple, tenemos una
funcion que aaue filas y otia que las boiia, stas se llaman uebiuo a los eventos
uispaiauos poi los botones ue aauii y boiiai, como en los piogiamas ue toua la
viua peio en foimato web, lo siguiente seiia no peiuei la infoimacion al saliinos
uel navegauoi.

W9d9R B2#<%#< 7(V&<3#87K( %' 7(('<PT>H 2$#(%& /0/19
0na foima iuuimentaiia peio eficaz ue guaiuai y caigai infoimacion si sta estaba
en foimato BTNL es guaiuai uiiectamente la cauena ue texto que hay uentio ue la
piopieuau "inneiBTNL" en un aichivo y la foima ms sencilla ue iecupeiaila es
leei la cauena e intiouuciila uentio ue la piopieuau "inneiBTNL" uiiectamente,
poi supuesto se guaiuai en el seiviuoi, cosa que pueue sei muy til en una
empiesa meuiana uonue queiemos que los comeiciales vayan uejanuo los peuiuos
ue los clientes naua ms confiimailos poi si se necesita caigai algo y no se ueje
paia el uia siguiente, etc.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 X`

Es uecii, con A}AX pouemos guaiuai couigo geneiauo uinmicamente sin
necesiuau ue una base ue uatos y luego iecupeiailo.

Ahoia el ejemplo constai ue S aichivos, el ya visto con alguna mouificacion y 2
aichivos .jsp uno que guaiua una cauena en un aichivo y otio que la caiga. La iuea
es bastante sencilla, tal vez lo mas uificil ue touo sea geneiai el aichivo ue texto y
caigailo si no se tiene mucha expeiiencia con }ava, se vein piimeio las
mouificaciones a la pgina piincipal, se han aauiuo cuatio funciones }avaSciipt
que son las siguientes y no se han mouificauo las anteiioies, auems se han
incluiuo las libieiias A}AX.

baseBatos.html(Nouificaciones con iespecto a baseBatosB.html, paite }avaSciipt)

function guardar()
{
darInfo01= new objetoAjax("GET"); //Construimos un objetoAjax que

//Cuando se usa el mtodo GET la pgina a la que enviamos los datos y
los datos van unidos en la misma cadena.
var cadenaPeticionGET = "guardarDatos.jsp?"; //La pgina.
var datos ="&guardarEnFormatoTexto=" +
document.getElementById("tablaDiscos").innerHTML +
"&nombreArchivo=" +
document.getElementById("nombreArchivo").value;
cadenaPeticionGET =cadenaPeticionGET + datos; //Unimos la pgina con
el resto de los datos.

darInfo01.completado = function objetoRequestCompletado01(estado,
{
document.getElementById("resultadoGuardar").innerHTML
= respuestaTexto;
setTimeout("borrarResultado()", 2000);
}
darInfo01.coger(cadenaPeticionGET); //Enviamos tanto la pgina como
}

function borrarResultado()
{
document.getElementById("resultadoGuardar").innerHTML = "";
}

function cargar()
{
cogerInfo02= new objetoAjax("GET"); //Construimos un objetoAjax que

var cadenaPeticionGET = "cargarDatos.jsp?"; //La pgina.
var datos ="&nombreArchivo=" +
document.getElementById("nombreArchivo").value;

cogerInfo02.completado = function objetoRequestCompletado02(estado,
{
document.getElementById("tablaDiscos").innerHTML =
respuestaTexto;
actualizarIdUnico();
}
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XY

cogerInfo02.coger(cadenaPeticionGET); //Enviamos tanto la pgina como
}

function actualizarIdUnico()
{
// El mayor identificador siempre se encuentra al final, as cuando
cargamos un archivo estar en la ltima fila de la tabla.
var tabla = document.getElementById("tablaDiscos");
var ultimaFila = tabla.childNodes.length - 1;
identificadorUnico = tabla.childNodes[ultimaFila].id; //Le damos el
valor del id de la ltima fila.
identificadorUnico++; //Lo adelantamos al siguiente valor, as su
valor ya ser valido como nuevo ID.
}

Como pouis apieciai, si lo lees atentamente, no se ha hecho un gian contiol ue
eiioies, peio si guaiuamos coiiectamente se inuica al usuaiio y luego el mensaje
uesapaiece, esta es una pequea utiliuau ue la funcion "setTimeout", seguimos con
la paite BTNL a la que le hemos aauiuo el siguiente couigo peiteneciente a la
tabla ue caigai y guaiuai.

baseBatos.html (paite BTNL)

<h2>Guardar archivo de la tabla en el servidor:</h2>
<form action="#">
<table width="80%" border="0">
<tr>
<td width="40%">Nombre Archivo: <input type="text"
id="nombreArchivo"/> </td>
<td width="40%"><input type="button" value=" Guardar "
onclick="guardar()" />
<input
type="button" value=" Cargar " onclick="cargar()" />
</td>
</tr>
<tr>
<td width="40%">Informacin Servidor: </td>
<td width="40%"><span id="resultadoGuardar"></span></td>
</tr>
</table>
</form>

Queua poi vei las pginas .jsp que guaiuan y caigan ue un aichivo.

guaiuaiBatos.jsp
8"%>
<%@ page import="java.io.*" %>

<%
request.setCharacterEncoding("UTF-8"); /*Para resolver problemas con
los acentos a la hora de recoger la informacin.*/

try
{
String cadenaParaEscribir =
request.getParameter("guardarEnFormatoTexto");
String nombreArchivo = request.getParameter("nombreArchivo");
//0.Lo siguiente es para hacer pruebas, salo en vez de usar
las 2 lneas de arriba.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Xd

//String cadenaParaEscribir = "Hola Mundo." ;
//String nombreArchivo = "HolaMundo.txt";

//1.Preparamos lo que queremos en formato de cadena dentro del
buffer, se va almacenando.
StringBuffer bufferSalida = new StringBuffer();
bufferSalida.append(cadenaParaEscribir);

//2.Preparamos el archivo para escribir.
String camino = application.getRealPath("/" + nombreArchivo);
File archivo = new File(camino);
FileOutputStream cadenaSalida = new FileOutputStream(archivo);
PrintWriter punteroEscritura = new PrintWriter(cadenaSalida);
/*
// Esto se hace por convencin de estratificacin.
PrintWriter punteroEscritura = new PrintWriter(
new FileOutputStream(

application.getRealPath("/"+nombreArchivo)
)
);
punteroEscritura.print(cadenaParaEscribir);
punteroEscritura.close();
*/

//3.Escribimos el archivo.
punteroEscritura.print(bufferSalida);

//4.Limpiamos y cerramos lo que hemos estado utilizando.
punteroEscritura.flush();
punteroEscritura.close();
cadenaSalida.flush();
cadenaSalida.close();

out.print("<div style=\"color:green\">El archivo se guardo
correctamente.</ div>");
}
catch (Exception e)
{
out.print("<div style=\"color:red\">No se pudo guardar el
archivo.</ div>");
}

%>

Paia que el couigo anteiioi funcione coiiectamente la aplicacion tiene que tenei
peimiso ue esciituia en el uiiectoiio, pueue paiecei obvio peio es impoitante ya
que la configuiacion ue un seiviuoi ieal pueue sei algo iestiictiva, lo nico que
queuaiia poi vei es la caiga ue uatos.

caigaiBatos.jsp
8"%>
<%@ page import="java.io.*" %>

<%
request.setCharacterEncoding("UTF-8"); /* Para resolver problemas con
los acentos a la hora de recoger la informacin. */
try
{
//1.Variables para el proceso de lectura.
String nombreArchivo = request.getParameter("nombreArchivo");
String cadenaSalida = "";
String cadenaAuxiliar;
//2.Preparamos el archivo para Leer.
String camino = application.getRealPath("/" + nombreArchivo);
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 XX

FileReader archivoLectura= new FileReader(camino);
BufferedReader cabezaLectora = new
BufferedReader(archivoLectura);

//3.Leemos el archivo (Tcnica de primera lectura adelantada).
cadenaAuxiliar = cabezaLectora.readLine();
while(cadenaAuxiliar != null)
{
cadenaSalida = cadenaSalida.concat(cadenaAuxiliar);
cadenaAuxiliar = cabezaLectora.readLine();
}
//4.Limpiamos y cerramos lo que hemos estado utilizando.
cabezaLectora.close();
//5.Devolvemos el resultado.
out.print(cadenaSalida);
}
catch (Exception e)
{
out.print("<div style=\"color:red\">No se pudo cargar el
archivo, hubo un error.</ div>");
}
%>

Como el lectoi poui apieciai en el momento que se esciibe un pequeo piogiama
que puuieia tenei una utiliuau ieal el n ue lineas ue couigo que tiene se uispaia,
peio peoi touavia, nos estamos concentianuo en A}AX y lo nico que hemos hecho
es enviai y iecibii una cauena ue texto, pouiiamos habei hecho un ejemplo mas
pequeo paia esto, seguio, peio es tambin objeto ue este texto ofiecei algunas
posibiliuaues ue uso. Noimalmente touos los ejemplos explicauos son muy
pequeos y iealmente no hace falta ms ya que ensean lo necesaiio paia
uesaiiollai aplicaciones ieales; como se ve en sta, la complejiuau no se haya en la
paite A}AX sino en geneiai uinmicamente la tabla hacienuo uso uel B0N y en
uesaiiollai la paite .jsp.

W9X ?#< 7(V&<3#87K( %7(C378#3'(4' 247)7E#(%& )&$ 'D'(4&$ 5 ') ?a>9
En este ejemplo no vamos a utilizai A}AX, es ms bien BBTNL ya que no hacemos
uso uel objeto XNLBttpRequest, peio nos va a sei muy til cuanuo constiuyamos
piogiamas ms gianues ya que necesitamos entoinos mas inteiactivos paia que
sean atiactivos. El lectoi se habi uauo cuenta cuanuo abie un men que, al
uesplazai el iaton sobie l, muchas veces apaiecen nuevas opciones
automticamente o que si espeia un pai ue segunuos con el punteio uel iaton
sobie un boton ue una baiia ue heiiamientas apaiece una uesciipcion ue su
utiliuau, touo esto se ve en la imagen siguiente.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Nee

!"#$%&'()*+ S7 Nen tipico ue un piogiama actual en este caso las imgenes son ue Nozilla Fiiefox.

Este tipo ue cosas, poi incieible que paiezca, se pueuen hacei en un entoino web
ue foima ielativamente sencilla y es lo que veiemos en el siguiente ejemplo ya que,
una vez que sepamos geneiai tablas uinmicamente uonue nos plazca, las
posibiliuaues que se nos abien son muchas; entie otias se nos abie el campo ue los
viueojuegos, no solo hacei baiias ue heiiamientas, ya que pouemos mostiai
cualquiei gifico como fonuo ue una tabla y movei la tabla y mouificai el gifico
uinmicamente a causa ue los eventos uel teclauo o iaton uel usuaiio, esto uniuo a
A}AX es potentisimo.

W9X9N ;G'36)& N i T#O)# <')#47D# # &4<# 4#O)#9
Es muy impoitante cuanuo queiemos posicionai un elemento ielativo a otio
compienuei la foima en que se calculan las cooiuenauas, tenemos que pensai que
tiabajamos con etiquetas aniuauas en BTNL, esto lo menciono poique es muy
impoitante cuanuo peuimos la posicion ue una tabla que se cieo al caigai el
uocumento la posicion ue la etiqueta ue esta tabla que tiene sus piopieuaues y son
ielativas al pauie. Es uecii, paia obtenei su posicion absoluta necesitamos como
uiieccion base la uel pauie y sumaile el uesplazamiento uel hijo, como se ve en la
figuia siguiente.

!"#$%&'()*+ S8 Las posiciones "suelen" sei ielativas a otias.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeN

Peio lo peoi es que si el pauie tiene otio pauie el compoitamiento es iecuisivo
como muestia la ilustiacion siguiente.

!"#$%&'()*+ S9 Tablas aniuauas.
La solucion es bastante sencilla, mientias que un elemento tenga pauie, le
sumamos los uesplazamientos uel pauie ue foima iecuisiva. Esto se ha explicauo
ueteniuamente paia la mejoi compiension uel couigo uel ejemplo cuyo iesultauo
se muestia en la figuia siguiente.

!"#$%&'()*+ 6u ueneiacion ue cuauios ue infoimacion uinmicos.
Con touo lo anteiioi explicauo ya, el ejemplo consta ue solo un aichivo uel cual
uiviuiiemos el couigo en paite BTNL y paite }avaSciipt.

Infoimacion1.html(Paite }avaSciipt)
function cogerInfo(Elemento)
{
crearInformacion(Elemento);
posicionVentanaInformacion(Elemento);
}

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeR

function borrarInfo()
{
var ventanaborrar = document.getElementById("ventanaDatosCuerpo");
var indice = ventanaborrar.childNodes.length;
for (var i = indice - 1; i >= 0 ; i--)
{
ventanaborrar.removeChild(ventanaborrar.childNodes[i]);
}
document.getElementById("ventanaInformacion").style.border = "none";
}

function crearInformacion(Elemento)
{
//1.Creamos la fila
//2.Creamos la columna con la informacin.
switch(Elemento.id)
{
case "instrumento0": celda1.innerHTML = "Intrumento de viento.";
break;
case "instrumento1": celda1.innerHTML = "Instrumento de
cuerda.";
break;
case "instrumento2": celda1.innerHTML = "Instrumento de
percusin.";
break;
case "instrumento3": celda1.innerHTML = "Instrumento
Electrnico.";
break;
}
//3.Aadimos la columna a la fila y la fila a la tabla.
document.getElementById("ventanaDatosCuerpo").appendChild(fila);
}

function posicionVentanaInformacion(Elemento)
{
//1.Vamos a reposicionar la ventana de informacin respecto al
elemento que ha pedido informacin.
var reposicionar = document.getElementById("ventanaInformacion");
//2.Calcular la posicin absoluta que ocupara la ventana.
/* 2.1 Para calcular el desplazamiento a la izquierda cogemos el ancho
de la tabla de al lado que es casi todo el desplazamiento, luego le
sumamos algo. */
var izquierdaDesplazado = Elemento.offsetWidth + 13;
/* 2.2 Para calcular lo desplazado que esta el elemento del borde
superior usamos una funcin, le pasamos el elemento y le decimos el
borde que queremos calcular. */
var altoDesplazado = calcularEsquina(Elemento, "offsetTop");
//3.Le aplicamos las propiedades calculadas.
reposicionar.style.border = "black 1px solid";
reposicionar.style.left = izquierdaDesplazado + "px";
reposicionar.style.top = altoDesplazado + "px";
}

function calcularEsquina(elemento, atributoEsquina) //ej: campo =
objetoDeLaPagina , atributoEsquina = "offsetTop"
{
var desplazamiento = 0;
while(elemento) //Mientras exista el elemento
{
desplazamiento += elemento[atributoEsquina]; //Le sumamos al
desplazamiento, el desplazamiento del elemento.
/*Normalmente cada elemento solo contiene su desplazamiento respecto
al padre, no de manera absoluta, as que pasamos al elemento padre,
si existe en la siguiente iteracin se sumara su desplazamiento
tambin, sino terminara. */
elemento = elemento.offsetParent;
}
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeS

return desplazamiento;
}

Infoimacion1.html(Paite BTNL)
<body>
<h1>Dar informacin con un evento disparado por el ratn:</h1>
<h3>Instrumentos Musicales</h3>

<table id="instrumentos" bgcolor="#F2FAFA" border="1" cellspacing="0"
cellpadding="2">
<tbody>
<tr>
<td id="instrumento0" onmouseover="cogerInfo(this);"
onmouseout="borrarInfo();">Flauta</td>
</tr>
<tr>
onmouseout="borrarInfo();">Guitarra</td>
</tr>
<tr>
onmouseout="borrarInfo();">Batera</td>
</tr>
<tr>
onmouseout="borrarInfo();">Teclado Elctrico</td>
</tr>
</tbody>
</table>

<div style="position:absolute;" id="ventanaInformacion">
<table id="ventanaDatos" bgcolor="#F2FAFA">
<tbody id="ventanaDatosCuerpo"></tbody>
</table>
</div>

</body>

Como se ve en una ue las lineas subiayauas ue la paite BTNL se pueue asignai ms
ue un evento a una etiqueta, en este caso se hace uesapaiecei el elemento si
quitamos el iaton ue encima uebiuo a que solo estamos uanuo infoimacion, no es
un men, la paite ms impoitante ue este ejemplo es como calculamos la posicion
y geneiamos la tabla uinmica.

W9X9R ;G'36)& R i T#O)# <')#47D# #) 62(4'<& %') <#4K(9
Como se ha mostiauo en la figuia 4.11, paia uai infoimacion al usuaiio
tipicamente se emplea una tabla auyacente a otia o se muestia la infoimacion
junto al punteio uel iaton en un cuauio. Este segunuo ejemplo encaia
piecisamente esta segunua veitiente, que es muchisimo mas sencilla ya que solo
tenemos que cogei las cooiuenauas uel punteio e inciustai la tabla en una
posicion auyacente.

El aspecto gifico uel siguiente ejemplo se encuentia en la imagen siguiente:

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeW

!"#$%&'()*+ 61 Tabla colocaua uonue se encuentia el punteio uel iaton.
Si nos fijamos bien, no es que coloquemos la tabla encima justo uel iaton, esto
queuaiia un poco antiesttico, noimalmente se coloca uebajo ue l o un poco a la
ueiecha como es el caso, sumnuole unos pocos pixeles a las cooiuenauas. El
ejemplo consta ue un solo aichivo que es el siguiente, uiviuo tambin en paite
BTNL y }avaSciipt

Infoimacion2.html (Paite BTNL)
<body>
<h1>Dar informacin con un evento disparado por el ratn:</h1>
<h3>Barra Herramientas</h3>

<img src="0.jpg" id="Nuevo documento."
onmouseover="cogerInfo(this,event);" onmouseout="borrarInfo();" />
<img src="1.jpg" id="Guardar documento."
<img src="2.jpg" id="Abrir documento."

<div style="position:absolute;" id="ventanaInformacion">
<table id="ventanaDatos" bgcolor="#F2FAFA">
<tbody id="ventanaDatosCuerpo"></tbody>
</table>
</div>
</body>

Infoimacion2.html (Paite }avaSciipt)
function cogerInfo(Elemento, event) {
crearInformacion(Elemento);
posicionVentanaInformacion(Elemento, event);
}

function borrarInfo() {
var ventanaborrar = document.getElementById("ventanaDatosCuerpo");
{
}
document.getElementById("ventanaInformacion").style.border = "none";
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeL

}

function crearInformacion(Elemento){
//1.Creamos la fila
//2.Creamos la columna con la informacin.
celda1.innerHTML = Elemento.id;
//3.Aadimos la columna a la fila y la fila a la tabla.
document.getElementById("ventanaDatosCuerpo").appendChild(fila);
}

function posicionVentanaInformacion(Elemento,event) {
1. Vamos a reposicionar la ventana de informacin respecto al
var reposicionar = document.getElementById("ventanaInformacion");
/* 2.El objeto event, existe solo en el momento que ocurre un evento
por si lo necesitas en el manejador y contiene cosas como la
posicin y estado de las teclas y ratn. */
var ancho = event.clientX;
var alto = event.clientY;
//3.Le aplicamos las propiedades calculadas.
reposicionar.style.left = ancho + 15 + "px";
reposicionar.style.top = alto + "px";
}

El lectoi poui apieciai que se ha ueuicauo mucho tiempo en el apaitauo 4.9 en
explicai algo que no afecta uiiectamente a A}AX (ya que no implica un tifico ue
infoimacion uinmica con el seiviuoi) sino que es ms bien un aitificio gifico que
juega con cooiuenauas, esto es poique este aitificio gifico se va a usai junto con
A}AX y es en paite el culpable ue que se pueuan hacei cosas ms que inteiesantes.

W9Ne /24& 8&36)'4#%& '36)'#(%& /0/19
Paia explicailo ipiuamente lo mejoi es vei el iesultauo piimeio, mostiauo en la
siguiente ilustiacion.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Ne`

!"#$%&'()*+ 62 Ejemplo ue auto completauo empleanuo A}AX.
Como el lectoi pueue vei en la ilustiacion no existe un boton ue aceptai la
seleccion, tenemos que elegii ue entie las que hay y entonces se lanzaiia la
peticion, aunque en una hipottica bsqueua en una base ue uatos estamos
ahoiianuo tiempo y esto es veiuau, a cambio caua vez que pulsamos una tecla se
est lanzanuo una peticion al seiviuoi con toua la sobiecaiga que ello supone.

Esto mismo lo pouemos vei hecho poi uoogle en uoogle Suggest mostiauo en la
figuia que sigue.

,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeY

!"#$%&'()*+ 6S uoogle suggest.
Si el lectoi iecueiua las opeiaciones con cuauiitos uel apaitauo 4.9, este mismo
tipo ue clculos se iealizan paia colocai uinmicamente la tabla justo uebajo uel
iecuauio ue esciituia, uanuo la sensacion ue sei un men que se uespliega
automticamente.

El ejemplo que nos ocupa tiene uos aichivos sin contai las libieiias A}AX,
"autoCompletai.html" y "peuiiInfo.jsp", como el aichivo "autoCompletai.html" no
es excesivamente laigo lo ponuiemos completo sin coites, contiene ties paites:
una pequea hoja ue estilo, el couigo }avasciipt y el couigo BTNL, mientias que a la
pgina jsp simplemente le llega la cauena ue texto que hay en el cuauio y uevuelve
un uocumento XNL con las iefeiencias encontiauas.

autoCompletai.html
<html>
<head>
<title>Auto Completar</title>
<style type="text/css">
.ratonFuera
{
background: #A9A9A9;
color: #000000;
}

.ratonEncima
{
background: #5F9EA0;
color: #000000;
}
</style>

function buscarNombres(elemento)
{
if(elemento.value == "") //Si no hay nada escrito es que el usuario
ha borrado, as que borramos la lista.
{
borrarInfo();
return;
}

var elementoActual = elemento; //Necesitaremos la variable en una
funcin interior, as que la redeclaramos.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 Ned

borrarInfo(); //Borramos la informacin de la ventana, por si quedaba
algo, no se aada al final lo nuevo y se repita.
pedirInfo01= new objetoAjax("GET"); //Construimos un objetoAjax que

var cadenaPeticionGET = "pedirInfo.jsp?"; //La pgina.
var datos ="&cadenaTexto=" + elemento.value; //Los datos

/*Asignamos la funcin de completado, que llevara la carga de generar
las nuevas celdas con la informacin recibida, en esta ocasin,
aunque lo mas correcto sera que tuviramos una funcin propia que lo
haga, esto es solo un ejemplo sencillo */
pedirInfo01.completado =
{
//Cogemos lo que nos interesa de XML.
var documentoCompleto = respuestaXML.getElementsByTagName("nombre");
if(documentoCompleto.length != 0) //Si tenemos alguna respuesta
aadimos informacin, sino no.
{
posicionVentanaInformacion(elementoActual);
for(var i = 0; i < documentoCompleto.length; i++)
{
//1.Creamos la fila de la tabla y le damos la informacin.
var celda = document.createElement("td");
.innerHTML = documentoCompleto[i].childNodes[0].nodeValue;
//2.Le aplicamos el estilo para que sea interactivo
dependiendo de los eventos.
celda.onmouseout = function()
{this.className='ratonFuera';}; // Referencia a la hoja CSS
celda.onmouseover = function()
{this.className='ratonEncima';}; // Referencia a la hoja
CSS
celda.setAttribute("bgcolor", "#A9A9A9");
//3.Si pulsamos sobre uno de los sugeridos se sustituir el
valor de bsqueda por este.
celda.onclick = function() { ponerNombre(this);};
//4.Unimos la nueva fila a la tabla.
fila.appendChild(celda);
document.getElementById("cuerpoTablaSugerancias").appendChi
ld(fila);
}
}
}

pedirInfo01.coger(cadenaPeticionGET); //Enviamos tanto la pgina como
}

function borrarInfo()
{
var ventanaborrar =
document.getElementById("cuerpoTablaSugerancias");
{
}
document.getElementById("tablaSugerancias").style.border = "none";
}

function posicionVentanaInformacion(elemento)
{
//1.Vamos a reposicionar la ventana de informacin respecto al
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeX

var reposicionar = document.getElementById("tablaSugerancias");
//2.Calcular la posicin absoluta que ocupara la ventana.
var anchoCelda = elemento.offsetWidth; //El mismo ancho que lel
input.
var izquierdaDesplazado = calcularEsquina(elemento, "offsetLeft");
//El desplazamiento a la izquierda total del input
//Desplazamiento del alto del input + el alto del input.
var altoDesplazado = calcularEsquina(elemento, "offsetTop") +
elemento.offsetHeight;
//3.Le aplicamos las propiedades a la ventana.
reposicionar.style.width = anchoCelda + "px";
reposicionar.style.left = izquierdaDesplazado + "px";
reposicionar.style.top = altoDesplazado + "px";
}

function calcularEsquina(elemento, atributoEsquina) //ej: campo =
objetoDeLaPagina , atributoEsquina = "offsetTop"
{
var desplazamiento = 0;
while(elemento) //Mientras exista el elemento
{
desplazamiento += elemento[atributoEsquina]; //Le sumamos al
desplazamiento, el desplazamiento del elemento.
/*Normalmente cada elemento solo contiene su desplazamiento respecto
al padre, no de manera absoluta, as que pasamos al elemento padre,
si existe en la siguiente iteracin se sumara su desplazamiento
tambin, sino terminara. */
elemento = elemento.offsetParent;
}
return desplazamiento;
}

function ponerNombre(celda)
{
document.getElementById("nombres").value =
celda.firstChild.nodeValue;
borrarInfo();
}
</script>
</head>
<body>

<h1>Auto Completar</h1>
<h3>Los nombres que hay en el fichero jsp del servidor
empiezan por A y por N.</h3>

<form action="null">
Nombres: <input type="text" size="20" id="nombres"
onkeyup="buscarNombres(this);" style="height:20;"/>
</form>
<table id="tablaSugerancias" bgcolor="#A9A9A9" border="0"
cellspacing="0" cellpadding="0" style="position:absolute;">
<tbody id="cuerpoTablaSugerancias"></tbody>
</table>

</body>
</html>

Se han iesaltauo uos funciones paia iemaicai algo inteiesante:
La funcion 0#$('&Z4>0&.$ hace una peticion bastante sencilla y
compiensible: hace una peticion en base a lo que el usuaiio ha esciito en el
cuauio ue texto.
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NNe

Cuanuo llega el iesultauo, ste va a la funcion
40=.%49.2#.$%-4>8".%'34P? que iecoge el uocumento XNL, lo analiza
sacanuo los nombies y ciea la tabla uinmicamente
Touos los elementos que componen el ejemplo los hemos visto ya, y los hemos
iemaicauo piecisamente paia uejai patente que ya se han cubieito touos los
aspectos piincipales ue la piogiamacion usanuo A}AX: a paitii ue aqui es la
imaginacion lo que ms cuenta iealmente.

Paia teiminai aqui est el aichivo .jsp que iealiza la bsqueua y geneia el
uocumento XNL, se ha piogiamauo una bsqueua paia que los lectoies con pocos
conocimientos uel lenguaje pueuan compienueilo en vez ue utilizai una funcion
pieconstiuiua.

peuiiInfo.jsp
<%@ page import="java.io.*,java.util.*,java.lang.*"
contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%
response.setHeader("Cache-Control", "no-cache");
//1.Recuperamos la cadena de la peticin
String prefijo = request.getParameter("cadenaTexto");
//2.Creamos las sugerencias
ArrayList listanombres = new ArrayList();
listanombres.add("Ana");
listanombres.add("Anamaria");
listanombres.add("Anastasia");
listanombres.add("Adolfo");
listanombres.add("Alex");
listanombres.add("Naomi");
listanombres.add("Noelia");
listanombres.add("Nora");
listanombres.add("Nox");
//3.Miramos las que coinciden y construimos un documento XML.
//3.1 Variables necesarias
Iterator i = listanombres.iterator();
boolean valido = true;
//3.2 Iteracion para construir el cdigo (Es lineal y pesado).
out.println("<listaNombres>");
while( i.hasNext() ) {
String nombre=(String)i.next();

//Comprobacin de igualdad de la vieja escuela.
if (prefijo.length() <= nombre.length()) {
char[] nombre2 = nombre.toCharArray();
char[] prefijo2= prefijo.toCharArray();
int j=0;
while (j < prefijo.length() &&
(prefijo2[j] == nombre2[j]) ) {
j++;
}
valido = (j == prefijo.length());
}
else {
valido = false;
}

if(valido) {
out.println("<nombre>" + nombre + "</nombre>");
valido = false;
}
}
out.println("</listaNombres>");
out.close();
%>
,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NNN

El ejemplo teimina aqui; solo comentai nuevamente que este tipo ue pequeas
aplicaciones ciea tantas peticiones al seiviuoi como teclas pulsamos: si esciibo un
nombie ue 6 caiacteies se lanzaian 6 peticiones. Se pouiia ponei una espeia y que
solo se hicieia la peticion a los uos segunuos ue habeise mouificauo el texto, con lo
que al usuaiio le uaiia tiempo ue esciibii vaiias letias y la bsqueua iealizaua poi
el seiviuoi queuaiia ms iefinaua y eficiente.
"7O)7&@<#VM# NNR

"7O)7&@<#VM#

Aqui apaiecen las iefeiencias a libios y pginas web que se han empleauo ue
iefeiencia. Si algo se paiece a lo expiesauo en este manual no es casualiuau, ya que
paite ue los ejemplos aqui expuestos estn basauos en otios pieviamente
estuuiauos. El objetivo ha siuo utilizai aqullos que ya han siuo puestos a piueba y
uemostiauo sus cualiuaues uiucticas y ue simpliciuau, lo que abunua en un
apienuizaje piogiesivo y fcil.

K)0&4$

Chiistian uioss - Ajax Patteins anu Best Piactices - Eu. Apiess, 2uu6
Ryan Asleson y Nathaniel T. Schutta - Founuations of Ajax - Eu. Apiess, 2uu6

E.2#.^4$ 4 M&'+3.$ %#%4&)'".$ : 34+3. 0#$('&"4$

Sang Shin 1u-Week Fiee A}AX Piogiamming
http:www.javapassion.comajaxcouecamp
Seigio ulvez }SP(}ava Seivei Pages) www.sicuma.uma.es
ngel Baibeio Tutoiial ue XNL www.lawebuelpiogiamauoi.com
Lola Ciuenas Cuiso ue }avaSciipt www.lawebuelpiogiamauoi.com
}os C. uaicia Cuiso ue Bojas ue Estilo www.lawebuelpiogiamauoi.com

_.0$

WSC www.wSschools.com
WS http:www.wS.oig
Web estilo http:www.webestilo.comhtml

Manual El Mejor Ajax

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual El Mejor Ajax

Cargado por

Copyright:

Formatos disponibles

"#$#%& '( ') *+,- .

/0/1- +2(%#3'(4&$ 5 /6)78#87&('$9:

También podría gustarte