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 El navegauoi necesita un complemento. 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 El navegauoi necesita un complemento. 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> <!--Cuando ocurra el evento oneclick se llamar la funcin coger--> <button onclick="Coger('datos/videoclub.xml')">Coge un documento</button> <table border="4"> <tr> <!--El campo con id=resultado se sustituir por causa de que ese id ,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NW
est en la funcin coger--> <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>
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 = peticion01.responseText; //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().
<html> <head> <title>Pgina de ejemplo</title> <script language="javascript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" type="text/javascript"> 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 document.getElementById('resultado').innerHTML = peticion01.responseText; } } </script>
</head> <body> <!--Cuando ocurra el evento oneclick se llamara la funcin coger--> <button onclick="Coger('datos/videoclub.xml')">Coge un documento</button> <table border="4"> <tr> <!--El campo con id=resultado se sustituir por causa de que ese id est en la funcin coger--> <td><span id="resultado">Sin resultado</span></td> </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.4.0', 'Msxml2.XMLHTTP.3.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:
Aichivo "ejemplo.html" <html><head><title>Pgina de ejemplo</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" type="text/javascript"> var peticion01 = null; //Creamos la variable para el objeto 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 document.getElementById('resultado').innerHTML = peticion01.responseText; } } </script>
</head> <body> <!--Cuando ocurra el evento oneclick se llamara la funcin coger--> <button onclick="Coger('espera.jsp')">Coge un documento</button> <table border="4"> <tr> <!--El campo con id=resultado se sustituir por causa de que ese id est en la funcin coger--> <td><span id="resultado">Sin resultado</span></td> </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.
<html><head><title>Pgina de ejemplo</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" type="text/javascript"> var peticion01 = null; //Creamos la variable para el objeto xmlhttprequest peticion01 = new ConstructorXMLHttpRequest(); //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; case 1: document.getElementById('estado').innerHTML = "Cargando"; break; case 2: document.getElementById('estado').innerHTML = "Cargado"; break; case 3: document.getElementById('estado').innerHTML = "Interactivo"; break; case 4: document.getElementById('estado').innerHTML = "Completado"; //Si ya hemos completado la peticin, devolvemos adems la informacin. document.getElementById('resultado').innerHTML= peticion01.responseText; break; } } 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, 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> <!--Cuando ocurra el evento oneclick se llamar la funcin coger--> <button onclick="Coger('espera.jsp')">Coge un documento</button> <table border="4"> <tr> <td><span id="estado">Estado peticin</span></td> <!-- Campo para indicar el estado de la peticin--> <td><span id="resultado">Sin resultado</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" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" type="text/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> <!--Cuando ocurra el evento oneclick se llamara la funcin coger--> <button onclick="Coger(Peticion01, 'datos/espera.jsp')">Coge el documento 01</button> <button onclick="Coger(Peticion02, 'datos/videoclub.xml')">Coge el documento 02</button> </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" <html><head><title>Pgina de ejemplo</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> 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; }
var PeticionAjax02 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax02.completado = objetoRequestCompletado02; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado02(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('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> <!--Cuando ocurra el evento oneclick se llamar a la funcin coger DE CADA OBJETO! --> <button onclick="PeticionAjax01.coger('datos/espera.jsp')">Coge el documento 01</button> <button onclick="PeticionAjax02.coger('datos/videoclub.xml')">Coge el documento 02</button> <table border="4"> <tr> <td>Documento 01</td> <!--Todos los campos del documento 01 les hemos asignado un id como de costumbre para recibir la informacin --> <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 recibido</span></td> <td><span id="respuestaXML01">xml respuesta no recibido</span></td></tr> </tr>
<tr> <td>Documento 02</td> <!--Todos los campos del documento 02 les hemos asignado un id como de costumbre para recibir la informacin --> <td><span id="estado02">estado no recibido</span></td> <td><span id="estadoTexto02">texto estado no recibido</span></td> <td><span id="respuestaTexto02">texto respuesta no recibido</span></td> <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:
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.*/ 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: //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. */
objetoActual.completado(objetoActual.objetoRequest.status, objetoActual.objetoRequest.statusText, objetoActual.objetoRequest.responseText, objetoActual.objetoRequest.responseXML); break; } } this.objetoRequest.send(null); //Iniciamos la transmisin de 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 .
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> <script language="JavaScript" type="text/javascript"> 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> <head><title>depuracin</title></head> <script language="JavaScript" type="text/javascript"> 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> PGINA PARA HACER PRUEBAS DE DEPURACIN SIMPLES <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> <head><title>depuracin</title></head> <script language="JavaScript" type="text/javascript"> function hagoalgo() { var nombre = "Juan" ; agoalgo2() ; } function hagoalgo2() { hagoalgoreal(); } function hagoalgoreal() SX
{ longitud = nombre.length; 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> <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> <script language="JavaScript" type="text/javascript"> 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() { var nombre = "Juan" ; hagoalgo2() ; } function hagoalgo2() { hagoalgoreal(); } function hagoalgoreal() { longitud = nombre.length; 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> <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/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; /*Funcin completado del objetoAjax redefinida. */ function objetoRequestCompletado01(estado, estadoTexto, 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: document.getElementById('ParteHTML').innerHTML = respuestaTexto; //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 <center><b> Os presento al hamster guerrero </b> </center> <center><img src="img/guerrero.jpg"><center>
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.
<html> <head> <title>Insertar una imagen</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { 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.
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.
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.
inseitai}avasciipt.html <html> <head> <title>Insertar Javascript</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { 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.
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> <title>Insertar HTML</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"> </script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { 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 var PeticionAjax02 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax02.completado = objetoRequestCompletado02; //Funcin completado del objetoAjax redefinida.
function objetoRequestCompletado02(estado, estadoTexto, respuestaTexto, respuestaXML) { 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:
<center><b> Os presento al hamster guerrero </b> </center> <center><img src="img/guerrero.jpg"><center>
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:
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> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { 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> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax(); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida. function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { document.getElementById('ParteHTML').innerHTML = respuestaTexto; //insercin innerHTML tpica } </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>
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
!"#$%&'()*+ 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.
<html> <head> <title>Insertar HTML</title> <script language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjaxHtml.js"> </script> <script language="JavaScript" type="text/javascript"> 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> <span id="ParteHTML"> <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.
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 language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjaxImagen.js"> </script> <script language="JavaScript" type="text/javascript"> //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> <span id="ParteHTML"> <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 language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjaxImagen.js"> </script> <script language="JavaScript" type="text/javascript"> //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> <span id="ParteHTML"> <center> <button onclick="PeticionAjaxImag01.cogerImagen()">Coge una imagen tipo 2</button> </center>
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; }
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 language="JavaScript" src="lib/ConstructorXMLHttpRequest.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjax.js"> </script> <script language="JavaScript" src="lib/ClasePeticionAjaxJavascript.js"> </script> <script language="JavaScript" type="text/javascript"> var PeticionAjaxjavascriptl01 = new objetoAjaxJavascript("alertaejemplo.js"); /* Definimos un nuevo objetoAjaxJavascript */ </script>
JavaScript. } this.coger(this.Ruta); //Si alguien lanza la peticin nosotros hacemos lo mismo. }
//Esta nueva clase hereda como prototipo la ClasePeticionAjax 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. ... this.objetoRequest.onreadystatechange = 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: /*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.*/ objetoActual.completado(objetoActual.objetoRequest.status, objetoActual.objetoRequest.statusText, objetoActual.objetoRequest.responseText, objetoActual.objetoRequest.responseXML); } break; } } this.objetoRequest.send(null); //Iniciamos la transmisin de 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:
<script language="JavaScript" type="text/javascript"> var PeticionAjaxHtml01 = new objetoAjaxHtml("largo.txt","ParteHTML","PeticionAjaxHtml01"); </script>
</head> <body> <center>--Aqu voy a insetar cdigo html--</center> <span id="ParteHTML"> <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. this.completado = function(estado, estadoTexto, respuestaTexto, 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>" }
//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. 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
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.*/ var objetoActual = this; this.objetoRequest.open(this.metodo, url, true); //Preparamos la conexin.
if (this.metodo == "GET") { this.objetoRequest.send(null); //Iniciamos la transmisin de 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 <!-- Para resolver los problemas con los acentos y la debemos aadir la siguiente directiva y guardar este archivo con codificacin UTF-8 con el bloc de notas, guardar como --> <%@ 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" );
//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. }
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" src="lib/ConstructorXMLHttpRequest.js"></script> <script language="JavaScript" type="text/javascript" src="lib/ClasePeticionAjax.js"></script> <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 =
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.
<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> <!--Si usamos el atributo id, la variable idUsuario no se enviara a la pagina insertar.jps y si usamos name no referenciaremos el objeto dentro de esta pgina, solucin, usar los 2 --> <td> <input type="text" id="idUsuario" name="idUsuario" size="20" onkeyup="validarUsuario()" /> </td> <td> <span id="mensajeValidacion"> </span> </td> </tr> </table>
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.
autoveiificai.html (Paite }avasciipt) <script language="JavaScript" type="text/javascript"> var PeticionAjax01 = new objetoAjax("GET"); //Definimos un nuevo objetoAjax. PeticionAjax01.completado = objetoRequestCompletado01; //Funcin completado del objetoAjax redefinida.
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. } }
function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { //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> <!--Simulamos la inseicion uel usuaiio en la base uatos, peio no es ieal, no se inseita naua. --> \$#'&)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.
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
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.
src="lib/ClasePeticionAjax.js"></script> <script language="JavaScript" type="text/javascript"> 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> <script language="JavaScript" type="text/javascript"> refrescarAuto(); </script>
</body> </html>
cuentameAlgo.jsp <!-- Para resolver los problemas con los acentos y la debemos aadir la siguiente directiva y guardar este archivo con codificacin UTF-8 con el bloc de notas, guardar como -->
<% //Para resolver problemas con los acentos a la hora de recoger la informacin. request.setCharacterEncoding("UTF-8"); 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.
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);
var celda2 = document.createElement("td"); celda2.appendChild(document.createTextNode(autor)); fila.appendChild(celda2);
var celda3 = document.createElement("td"); celda3.appendChild(document.createTextNode(titulo)); fila.appendChild(celda3);
var celda4 = document.createElement("td"); celda4.appendChild(document.createTextNode(estilo)); fila.appendChild(celda4);
//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 var celda5 = document.createElement("td"); celda5.appendChild(botonborrar); fila.appendChild(celda5); //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 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 = "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, estadoTexto, respuestaTexto, respuestaXML) { document.getElementById("resultadoGuardar").innerHTML = respuestaTexto; setTimeout("borrarResultado()", 2000); } darInfo01.coger(cadenaPeticionGET); //Enviamos tanto la pgina como los datos en la misma cadena. }
function borrarResultado() { document.getElementById("resultadoGuardar").innerHTML = ""; }
function cargar() { cogerInfo02= 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 = "cargarDatos.jsp?"; //La pgina. var datos ="&nombreArchivo=" + document.getElementById("nombreArchivo").value; cadenaPeticionGET =cadenaPeticionGET + datos; //Unimos la pgina con el resto de los datos.
cogerInfo02.coger(cadenaPeticionGET); //Enviamos tanto la pgina como los datos en la misma cadena. }
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 <!-- Para resolver los problemas con los acentos y la debemos aadir la siguiente directiva y guardar este archivo con codificacin UTF-8 con el bloc de notas, guardar como --> <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF- 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
//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(
//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.
<% 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 var fila = document.createElement("tr"); //2.Creamos la columna con la informacin. var celda1 = document.createElement("td"); 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. fila.appendChild(celda1); 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>
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>
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"; ,#6M42)& W= ;G'36)&$ <'#)'$ %' 2$& 6#<# /0/1 NeL
}
function crearInformacion(Elemento){ //1.Creamos la fila var fila = document.createElement("tr"); //2.Creamos la columna con la informacin. var celda1 = document.createElement("td"); celda1.innerHTML = Elemento.id; //3.Aadimos la columna a la fila y la fila a la tabla. fila.appendChild(celda1); document.getElementById("ventanaDatosCuerpo").appendChild(fila); }
function posicionVentanaInformacion(Elemento,event) { 1. Vamos a reposicionar la ventana de informacin respecto al elemento que ha pedido informacin. 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.border = "black 1px solid"; 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.
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 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 = "pedirInfo.jsp?"; //La pgina. var datos ="&cadenaTexto=" + elemento.value; //Los datos cadenaPeticionGET =cadenaPeticionGET + datos; //Unimos la pgina con el resto de 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 = function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, respuestaXML) { //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 fila = document.createElement("tr"); 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 los datos en la misma cadena. }
function borrarInfo() { var ventanaborrar = document.getElementById("cuerpoTablaSugerancias"); var indice = ventanaborrar.childNodes.length; for (var i = indice - 1; i >= 0 ; i--) { ventanaborrar.removeChild(ventanaborrar.childNodes[i]); } 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
elemento que ha pedido informacin. 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.border = "black 1px solid"; 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; }
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 request.setCharacterEncoding("UTF-8"); 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; }
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