MANUAL De Ajax

Ajax Ya
Extraido de http://www.ajaxya.com.ar/

Orden del concept o

Concepto

Detalle del Pagina concepto

1 2 3 4

Qu es AJAX? Ventajas y desventajas de AJAX. Un ejemplo con AJAX. El mismo ejemplo sin AJAX. !"jeto X#$%ttp&e'uest

( -

)asando datos al se*vido* po* el mtodo +E,. )asando datos al se*vido* po* el mtodo )!.,. &ecupe*ando datos mediante la p*opiedad *esponse,e0t del o"jeto X#$%ttp&e'uest &ecupe*ando datos mediante la p*opiedad *esponseX#$ del o"jeto X#$%ttp&e'uest )*opiedades on*eadystatec3an4e y *eadystate. )*opiedades status y status,e0t. #todo a"o*t del o"jeto X#$%ttp&e'uest #ost*a* un 4i5 animado mient*as se env6an y *eci"en los datos del se*vido*. )a4inaci7n con AJAX 8a*4a* un cont*ol de tipo select #ost*a* un tooltip con datos *ecupe*ados del se*vido* en 5o*ma asinc*7nica Autocompleta* un cont*ol de tipo te0t Encuenta con AJAX Qu es J.!9? &ecupe*a* datos del se*vido* en 5o*mato J.!9 :e )%) a J.!9 ;utili<ando la li"*e*6a J.!9.p3p=

1 12 11 12

13 14 1 1( 11/ 11 22

21

22 23 24 2

:e Java.c*ipt a J.!9 ;utili<ando la li"*e*6a json.js= :e J.!9 a Java.c*ipt ;utili<ando la li"*e*6a json.js= :e J.!9 a )%) ;utili<ando la li"*e*6a J.!9.p3p= )i<a**a inte*activa multiusua*io

1 - Qu e! A"A#$
AJAX son las siglas de Asynchronous "avaScript And #ML. No es un lenguaje de programacin sino un conjunto de tecnologas ( !ML"JavaScript"#SS"$ !ML"% %&AS%.N'!&JS%"XML( )ue nos permiten hacer p*ginas de internet m*s interactivas. La caracterstica +undamental de AJAX es permitir actuali,ar parte de una p*gina con in+ormacin )ue se encuentra en el servidor sin tener )ue re+rescar completamente la p*gina. $e modo similar podemos enviar in+ormacin al servidor. La complejidad se encuentra en )ue de-emos domininar varias tecnologas. !ML o X !ML #SS JavaScript $ !ML /*sicamente de-emos dominar todos los o-jetos )ue proporciona el $0M. XML %ara el envo y recepcin de los datos entre el cliente y el servidor. % % o alg1n otro lenguaje )ue se ejecute en el servidor (AS%.Net&JS%(

'n este curso suponemos )ue domina las tecnologas mencionadas2 en caso de no ser as recomiendo recorrer los cursos de !ML 3a2 JavaScript 3a2 #SS 3a2 % % 3a y $ !ML 3a2 luego todo lo nuevo )ue apare,ca lo hiremos e4plicando lentamente a trav5s de ejemplos.

% - &e'taja! y de!(e'taja! de A"A#.

&e'taja! 6. 8. 9. ;. =. >. 7tili,a tecnologas ya e4istentes. Soportada por la mayora de los navegadores modernos. :nteractividad. 'l usuario no tiene )ue esperar hasta )ue llegen los datos del servidor. %orta-ilidad (no re)uiere plug"in como <lash y Applet de Java( Mayor velocidad2 esto de-ido )ue no hay )ue retornar toda la p*gina nuevamente. La p*gina se asemeja a una aplicacin de escritorio.

De!(e'taja! 6. Se pierde el concepto de volver a la p*gina anterior. 8. Si se guarda en +avoritos no necesariamente al visitar nuevamente el sitio se u-i)ue donde nos encontra-amos al gra-arla. 9. La e4istencia de p*ginas con AJAX y otras sin esta tecnologa hace )ue el usuario se desoriente. ;. %ro-lemas con navegadores antiguos )ue no implementan esta tecnologa. =. No +unciona si el usuario tiene desactivado el JavaScript en su navegador. >. ?e)uiere programadores )ue cono,can todas las tecnologas )ue intervienen en AJAX. @. $ependiendo de la carga del servidor podemos e4perimentar tiempos tardos de respuesta )ue desconciertan al visitante.

) - U' ejemp*o co' A"A#.

#on+eccionaremos un ejemplo donde veremos )ue aparecen muchos conceptos2 no se preocupe si no los comprende en su totalidad ya )ue los mismos se ver*n en +orma detallada a lo largo de este curso. La idea +undamental de este ejercicio es conocer como de-emos estructurar nuestras p*ginas y ver )ue introduce de nuevo el empleo de AJAX. #on+eccionaremos un pro-lema muy sencillo2 imaginemos )ue tenemos una lista de hipervnculos con los distintos signos del horscopo y )ueremos )ue al ser presionado no recargue la p*gina completa sino )ue se enve una peticin al servidor y el mismo retorne la in+ormacin de dicho signo2 luego se actualice solo el contenido de un div del archivo !ML. 'ste pro-lema se puede resolver muy +*cilmente si re+rescamos la p*gina completamente al presionar el hipervnculo2 pero nuestro o-jetivo es actuali,ar una pe)ueAa parte de la p*gina y m*s precisamente el div )ue de-e mostrar los datos del signo seleccionado. Si -ien nuestra p*gina solo contendr* los hipervnculos a los distintos signos en un caso real la p*gina puede contener muchos otros elementos !ML con im*genes2 otros hipervnculos etc. los cuales no de-er*n su+rir cam-ios (ni parpadeo( ya )ue solo se modi+icar* el elemento div respectivo mediante $ !ML. 'sta actuali,acin parcial de la p*gina tiene muchas ventajas. ?educimos el ancho de -anda re)uerido al no tener )ue recuperar toda la p*gina. Agili,amos la actuali,acin de la p*gina. ?educimos el parpadeo de la p*gina. acemos m*s natural la navegacin del sitio.

La mayora de los pro-lemas re)uieren los siguientes archivos como mnimo. 6. 'l archivo !ML (es la p*gina )ue se ve en el navegador( 8. 'l archivo JS (contiene todas las rutinas JavaScript )ue permiten actuali,ar din*micamente la p*gina !ML (mediante $ !ML( y las rutinas )ue permiten comunicarse con el servidor para el envo y recepcin de in+ormacin. 9. La hoja de estilo2 es decir el archivo #SS ;. La p*gina )ue contiene el script )ue se ejecuta en el servidor(en nuestro caso emplearemos el lenguaje % %( #omencemos a presentar los distintos archivos para resolver este pro-lema.

pagina1.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <h">Signos del hor#scopo.</h"> <div id="menu"> <p><a id="enlace"" href="pagina".php$cod="">%ries</a></p> <p><a id="enlace&" href="pagina".php$cod=&">'auro</a></p> <p><a id="enlace(" href="pagina".php$cod=(">)eminis</a></p> <p><a id="enlace*" href="pagina".php$cod=*">+ancer</a></p> <p><a id="enlace," href="pagina".php$cod=,">-eo</a></p> <p><a id="enlace." href="pagina".php$cod=.">/irgo</a></p> <p><a id="enlace0" href="pagina".php$cod=0">-ibra</a></p> <p><a id="enlace1" href="pagina".php$cod=1">2scorpio</a></p> <p><a id="enlace3" href="pagina".php$cod=3">Sagitario</a></p> <p><a id="enlace"4" href="pagina".php$cod="4">+apricornio</a></p> <p><a id="enlace""" href="pagina".php$cod=""">%cuario</a></p> <p><a id="enlace"&" href="pagina".php$cod="&">Piscis</a></p> </div> <div id="detalles">Seleccione su signo.</div> </bod > </html> 'sta p*gina contiene !ML puro. 's importante notar )ue de-emos incorporar los dos archivos e4ternos .css y .js mediante los elementos !ML respectivos. <script src="funciones.js" language="JavaScript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> La hoja de estilo solo tiene el o-jetivo de mejorar la presentacin en la p*gina de los doce hipervnculos de los signos del horscopo. %uede pro-ar de eliminar el archivo .css mediante el -orrado del elemento linB del archivo !ML y el pro-lema de-era continuar +uncionando2 por supuesto con una presentacin mucho m*s po-re. %odemos o-servar )ue cada hipervnculo solicita la misma p*gina al servidor pero pas*ndole como par*metro un valor distinto2 con esto podremos detectar en el servidor )ue signo a elegido el operador. 'l segundo archivo contiene las reglas de estilo )ue se de+inen para el archivo !ML.

estilos.css 5menu 6 font7famil 8 %rial9 margin8,p!9 : 5menu p 6 margin84p!9 padding84p!9 : 5menu a 6 displa 8 block9 padding8 (p!9 ;idth8 ".4p!9 background7color8 5f0f1e19 border7bottom8 "p! solid 5eee9 te!t7align8center9 : 5menu a8link< 5menu a8visited 6 color8 5f449 te!t7decoration8 none9 : 5menu a8hover 6 background7color8 5(.39 color8 5fff9 : 5detalles 6 background7color85ffc9 te!t7align8left9 font7famil 8verdana9 border7;idth849 padding8,p!9 border8 "p! dotted 5fa49 margin8,p!9 : No haremos un an*lisis de estas reglas ya )ue corresponden al tema 8C del curso de #SS 3a "Creacin de un men vertical configurando las pseudoclases"2 puede re+rescar los conceptos all. :nclusive si todava conoce poco de #SS y no )uiere estudiarlo por ahora puede anular el archivo no incorpor*ndolo en la p*gina !ML suprimiento el elemento linB.

Ahora viene uno de los puntos claves donde de-emos prestar m*s atencin2 esto se encuentra en las rutinas JavaScript )ue de-emos implementar para comunicarnos con el servidor2 adem*s de lo ya conocido de $ !ML para aAadir elementos !ML en +orma din*mica. Deamos el archivo en su totalidad y e4pli)uemos en +orma muy glo-al (recuerde )ue a lo largo de este curso iremos pro+undi,ando todos estos conceptos de comunicacin con el servidor(. funciones.js

add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob9 for=f="9f<="&9fAA@ 6 ob=document.get2lementB Cd=>enlace>Af@9 add2vent=ob<>click><presion2nlace<false@9 : : function presion2nlace=e@ 6 if =;indo;.event@ 6 ;indo;.event.return/alue=false9 var url=;indo;.event.src2lement.get%ttribute=>href>@9 cargarDoroscopo=url@9 : else if =e@ 6 e.preventEefault=@9 var url=e.target.get%ttribute=>href>@9 cargarDoroscopo=url@9 : : var cone!ion"9 function cargarDoroscopo=url@ 6 if=url==>>@ 6 return9 : cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=")2'"< url< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var detalles = document.get2lementB Cd="detalles"@9 if=cone!ion".read State == *@ 6 detalles.innerD'G- = cone!ion".response'e!t9 : else 6 detalles.innerD'G- = >+argando...>9 : :

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 :

'n este punto si es indispensa-le ha-er reali,ado el curso de $ !ML 3a para entender como registramos los eventos para los doce hipervnculos. ?ecordemos )ue siempre llamaremos a la +uncin add'vent ()ue se encuentra codi+icada en el mismo archivo( para hacer compati-le nuestro cdigo con el navegador :' (recordemos )ue no cumple los est*ndares re+erente a eventos(. Lo primero )ue se ejecuta es la llamada a la +uncin iniciali,ar'ventos(( inmediatamente luego )ue la p*gina se a cargado por completo en el navegador. function iniciali ar!ventos"# $ var o%& for"f=1&f<=1'&f((# $ o%=)ocument.get!lement*y+)",enlace,(f#& a))!vent"o%-,click,-presion!nlace-false#& . . 'n esta +uncin registramos el evento clicB para los doce enlaces de los signos del horscopo. %ara +acilitar la codi+icacin recordemos )ue todos tienen casi el mismo nom-re2 di+ieren por un n1mero al +inal. Luego dentro de un +or rescatamos la re+erencia a cada enlace y registramos el evento clicB indicando )ue se de-e llamar a la +uncin presion'nlace. La +uncin presin enlace.

10

function presion!nlace"e# $ if "/in)o/.event# $ /in)o/.event.return0alue=false& var url=/in)o/.event.src!lement.get1ttri%ute",href,#& cargar2oroscopo"url#& . else if "e# $ e.prevent3efault"#& var url=e.target.get1ttri%ute",href,#& cargar2oroscopo"url#& . . %rimero detecta )ue navegador se trata y procede a desactivar el evento por de+ecto para el hipervnculo2 luego llama a la +uncin cargar oroscopo pasandole como re+erencia la url )ue contiene el hipervnculo. !odo lo comentado hasta ac* se estudi en cursos anteriores. !ML2 JavaScript2 #SS2 $ !ML. Deamos ahora la +uncin cargar oroscopo. var conexion1& function cargar2oroscopo"url# $ if"url==,,# $ return& . conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open""9!:"- url- true#& conexion1.sen)"null#& . %revio a la de+inicin de esta +uncin de+inimos una varia-le glo-al llamada cone4ion6 )ue ser* utili,ada en esta y la siguiente +uncin. La +uncin reci-e como par*metro la url a la )ue de-e hacer la peticin de datos. Lo primero )ue veri+icamos )ue el par*metro no llegue vaco2 en caso de estar vaco salimos con el comando return. 'l siguiente paso es llamar a la +uncin crearXML ttp?e)uest )ue crea y retorna un o-jeto de la clase XML ttp?e)uest (luego veremos )ue este o-jeto nos permite comunicarnos con el servidor de +orma asincrnica(. conexion1=crear4562ttp7e8uest"# 'sta +uncin se encuentra codi+icada m*s a-ajo dentro del mismo archivo y tiene por o-jetivo retornar un o-jeto de la clase XML ttp?e)uest. La creacin del o-jeto de la clase XML ttp?e)uest se implementa separada en otra +uncin por)ue depende del navegador )ue se trate la sinta4is cam-ia. function crear4562ttp7e8uest"#

11

$ var xml2ttp=null& if "/in)o/.1ctive4;%ject# xml2ttp = ne/ 1ctive4;%ject""5icrosoft.4562::<"#& else if "/in)o/.4562ttp7e8uest# xml2ttp = ne/ 4562ttp7e8uest"#& return xml2ttp&

#omo podemos o-servar veri+icamos si se trata del navegador :'2 en caso a+irmativo la creacin del o-jeto XML ttp?e)uest es. if "/in)o/.1ctive4;%ject# xml2ttp = ne/ 1ctive4;%ject""5icrosoft.4562::<"#& Si no se trata del navegador :' veri+icamos si e4iste la clase XML ttp?e)uest en el o-jeto EindoE2 en caso a+irmativo creamos un o-jeto de dicha clase. if "/in)o/.4562ttp7e8uest# xml2ttp = ne/ 4562ttp7e8uest"#& %or la di+erencia en la +orma de crear un o-jeto de la clase XML ttp?e)uest hemos movido esta actividad a esta +uncin. La +uncin retorna la re+erencia del o-jeto creado. return xml2ttp&

?etornemos a la +uncin cargar oroscopo y veamos )ue hacemos con el o-jeto de la clase XML ttp?e)uest )ue aca-amos de crear. conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open""9!:"- url- true#& conexion1.sen)"null#& La propiedad onreadystatechange se iniciali,a con la re+erencia de una +uncin )ue ser* la encargada de procesar los datos enviados por el servidor2 veremos el cdigo de esta +uncin m*s adelante. Seguidamente llamamos al m5todo open )ue tiene tres par*metros. %rimero el m5todo de envo de datos (F'! o %0S!( ?ecordemos )ue si los datos se envan como par*metros (como es nuestro ejemplo( de-emos indicar )ue utili,amos el m5todo F'! 'l segundo par*metro es la url y la p*gina )ue procesar* los datos )ue le eviemos. 'l tercer par*metro indicamos si se procesar*n los datos de +orma asncrona (true( o sncrona (+alse(

%or 1ltimo nos +alta llamar al m5todo send para )ue comience el proceso. conexion1.sen)"null#&

12

Nos )ueda e4plicar la +uncin procesar'ventos )ue se ejecuta cada ve, )ue el o-jeto cone4ion6 de la clase XML ttp?e)uest cam-ia de estado. !engamos en cuenta )ue los estados posi-les de este o-jeto son. G No iniciali,ado. 6 #argando. 8 #argado. 9 :nteractivo. ; #ompletado.

%ara conocer el estado del o-jeto de-emos acceder a la propiedad readyState )ue almacena alguno de los cinco valores )ue enunciamos. Nuestra +uncin procesar'ventos es. function procesar!ventos"# $ var )etalles = )ocument.get!lement*y+)"")etalles"#& if"conexion1.rea)yState == =# $ )etalles.inner2:56 = conexion1.response:ext& . else $ )etalles.inner2:56 = ,>argan)o...,& . . $ecamos )ue cuando la propiedad readyState almacena ; signi+ica )ue todos los datos han llegado desde el servidor2 luego mediante el m5todo response!e4t recuperamos la in+ormacin enviada por el servidor. Luego cual)uier otro valor )ue contenga la propiedad readyState mostramos dentro del div el mensaje Hcargando...H. 's seguro )ue muchas dudas han surgido de este primer pantalla,o de AJAX2 pero no se preocupe a medida )ue avancemos en el curso se ir*n aclarando e internali,ando. %ero todava nos )ueda la p*gina )ue contiene el programa en el servidor2 en nuestro caso empleamos el lenguaje % % (tener en cuenta )ue podemos emplear otro lenguaje de servidor para esto(

13

Deamos el cdigo de esta p*gina. if =MNH2OP2S'Q>cod>R=="@ echo "<strong>%ries8</strong> Do los cambios serSn fTsicos< personales< de carScter< 'e sentirSs impulsivo tomarSs iniciativas. PerTodo en donde considerarSs unirte a agrupaciones de beneficencia< o de a uda a los demSs."9 if =MNH2OP2S'Q>cod>R==&@ echo "<strong>'auro8</strong> Do los cambios serSn privados< Tntimos. Hecuerdos. % uda< solidaridad. %suntos en lugares de retiro. 'u c#n uge puede aportar buen status a tu vida o apo o a tu profesi#n."9 if =MNH2OP2S'Q>cod>R==(@ echo "<strong>)Uminis8</strong> -os asuntos de ho tienen Iue ver con las amistades< reuniones< actividades con ellos. ETa esperan?ado< ilusiones. Gucha energTa se!ual fuer?a emocional. Eeseos difTciles de controlar."9 if =MNH2OP2S'Q>cod>R==*@ echo "<strong>+ancer8</strong> 2ste dTa la profesi#n las relaciones con superiores con tu madre serSn de importancia. %ctividad en relaci#n a estos temas. Gomentos positivos con compaVeros de trabajo. %ctividad laboral agradable."9 if =MNH2OP2S'Q>cod>R==,@ echo "<strong>-eo8</strong> 2ste dTa los estudios< los viajes< el e!tranjero la espiritualidad serSn lo importante. Pensamientos< religi#n filosofTa tambiUn. /ivencias kSrmicas de la Upoca te vuelven responsable tomando decisiones."9 if =MNH2OP2S'Q>cod>R==.@ echo "<strong>/irgo8</strong> Para este dTa toma importancia tu vida se!ual< tal ve? miedos< temas legales< juicios o herencias. 2!periencias e!traVas. Da karma de prueba durante este perTodo en tu parte psicol#gica< generSndose algunos replanteos."9 if =MNH2OP2S'Q>cod>R==0@ echo "<strong>-ibra8</strong> Do todo asunto tiene Iue ver con tu pareja< tambiUn con socios< con la gente o el pWblico. 2llos serSn lo mSs importante del dTa. )anancias a travUs de especulaciones o del juego. %ctividades vocacionales artTsticas."9 if =MNH2OP2S'Q>cod>R==1@ echo "<strong>2scorpio8</strong> Do todo asunto tiene Iue ver con temas de trabajo de salud. Presta atenci#n a ambos. 2!periencias diversas con compaVeros. Eurante este perTodo tendrSs muchos recursos para ganar dinero."9 if =MNH2OP2S'Q>cod>R==3@ echo "<strong>Sagitario8</strong> Eurante este dTa se vivirSn cambios en relaci#n a los novia?gos

14

o a los hijos. +reatividad< actividad< diversiones salidas. PerTodo de encuentros con personas o situaciones Iue te impresionan."9 if =MNH2OP2S'Q>cod>R=="4@ echo "<strong>+apricornio8</strong> -os cambios del dTa tienen Iue ver con tu hogar< con la convivencia con el padre. %suntos relativos al carScter en la convivencia. 2l karma de responsabilidad de estos momentos te acercarS al mundo de lo desconocido< mucha madure? contacto con el mSs allS."9 if =MNH2OP2S'Q>cod>R==""@ echo "<strong>%cuario8</strong> Do todo asunto tiene Iue ver con el entorno inmediato< hermanos vecinos< con la comunicaci#n< los viajes cortos o traslados frecuentes. 2l hablar trasladarse serS importante ho . Gentalidad e ideas activas."9 if =MNH2OP2S'Q>cod>R=="&@ echo "<strong>Piscis8</strong> Eurante este dTa se vivirSn cambios en la economTa< movimientos en los ingresos< negocios< valores. Gomentos de gran fuer?a decisi#n profesionales< buscarSs el lidera?go."9 $> Mediante el vector asociativo IJ?'K7'S! recuperamos el valor del par*metro cod y mediante una serie de i+ veri+icamos si almacena el valor 6 procedemos a generar un te4to re+erente al signo Aries2 si tiene un 8 generamos un te4to re+erente al signo !auro y as sucesivamente. ay )ue tener en cuenta )ue no se estar* enviando una p*gina !ML completa2 por eso no tiene los elementos ead2 /ody etc. sino es m*s -ien un archivo de te4to )ue luego ser* aAadido en +orma din*mica al div de la p*gina !ML. $e-e )uedar claro )ue los datos se podran ha-er rescatado per+ectamente de una -ase de datos2 pero por simplicidad hemos dispuesto estos 68 i+ y generado el te4to respectivo. Deremos m*s adelante pro-lemas )ue acceden a -ases de datos.

asta ac* el primer pro-lema de AJAX. Le recomiendo pasar a la seccin de L%ro-lemas ?esueltosL y ejecutar este ejercicio2 releer nuevamente estos conceptos y tratar de hacer modi+icaciones sencillas al pro-lema.

+ - E* mi!mo ejemp*o !i' A"A#.

Dolveremos a con+eccionar el mismo pro-lema )ue muestra una lista de hipervnculos con los distintos signos del horscopo2 a di+erencia del pro-lema e4puesta en el concepto anterior ahora no emplearemos AJAX2 es decir recargaremos la p*gina completamente al presionar alguno de los hipervnculos. #omo de-emos recargar la p*gina y actuali,ar en el servidor los datos del signo del horscopo seleccionado con+eccionaremos solo una p*gina php.

15

pagina6.php <html> <head> <title>Problema</title> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <h">Signos del hor#scopo.</h"> <div id="menu"> <p><a id="enlace"" href="pagina".php$cod="">%ries</a></p> <p><a id="enlace&" href="pagina".php$cod=&">'auro</a></p> <p><a id="enlace(" href="pagina".php$cod=(">)eminis</a></p> <p><a id="enlace*" href="pagina".php$cod=*">+ancer</a></p> <p><a id="enlace," href="pagina".php$cod=,">-eo</a></p> <p><a id="enlace." href="pagina".php$cod=.">/irgo</a></p> <p><a id="enlace0" href="pagina".php$cod=0">-ibra</a></p> <p><a id="enlace1" href="pagina".php$cod=1">2scorpio</a></p> <p><a id="enlace3" href="pagina".php$cod=3">Sagitario</a></p> <p><a id="enlace"4" href="pagina".php$cod="4">+apricornio</a></p> <p><a id="enlace""" href="pagina".php$cod=""">%cuario</a></p> <p><a id="enlace"&" href="pagina".php$cod="&">Piscis</a></p> </div> <div id="detalles"> <$php if =Xisset=MNH2OP2S'Q>cod>R@@ echo "Seleccione su signo."9 if =MNH2OP2S'Q>cod>R=="@ echo "<strong>%ries8</strong> Do los cambios serSn fTsicos< personales< de carScter< 'e sentirSs impulsivo tomarSs iniciativas. PerTodo en donde considerarSs unirte a agrupaciones de beneficencia< o de a uda a los demSs."9 if =MNH2OP2S'Q>cod>R==&@ echo "<strong>'auro8</strong> Do los cambios serSn privados< Tntimos. Hecuerdos. % uda< solidaridad. %suntos en lugares de retiro. 'u c#n uge puede aportar buen status a tu vida o apo o a tu profesi#n."9 if =MNH2OP2S'Q>cod>R==(@ echo "<strong>)Uminis8</strong> -os asuntos de ho tienen Iue ver con las amistades< reuniones< actividades con ellos. ETa esperan?ado< ilusiones. Gucha energTa se!ual fuer?a emocional. Eeseos difTciles de controlar."9 if =MNH2OP2S'Q>cod>R==*@ echo "<strong>+ancer8</strong> 2ste dTa la profesi#n las relaciones con superiores con tu madre serSn de importancia. %ctividad en relaci#n a estos temas. Gomentos positivos con compaVeros de trabajo. %ctividad laboral agradable."9 if =MNH2OP2S'Q>cod>R==,@ echo "<strong>-eo8</strong> 2ste dTa los estudios< los viajes< el e!tranjero la espiritualidad serSn lo importante. Pensamientos< religi#n filosofTa tambiUn. /ivencias kSrmicas de la Upoca te vuelven responsable tomando decisiones."9 if =MNH2OP2S'Q>cod>R==.@ echo "<strong>/irgo8</strong> Para este dTa toma importancia tu vida se!ual< tal ve? miedos< temas legales< juicios o herencias. 2!periencias e!traVas. Da karma de prueba durante este perTodo en tu parte psicol#gica< generSndose algunos replanteos."9

16

if =MNH2OP2S'Q>cod>R==0@ echo "<strong>-ibra8</strong> Do todo asunto tiene Iue ver con tu pareja< tambiUn con socios< con la gente o el pWblico. 2llos serSn lo mSs importante del dTa. )anancias a travUs de especulaciones o del juego. %ctividades vocacionales artTsticas."9 if =MNH2OP2S'Q>cod>R==1@ echo "<strong>2scorpio8</strong> Do todo asunto tiene Iue ver con temas de trabajo de salud. Presta atenci#n a ambos. 2!periencias diversas con compaVeros. Eurante este perTodo tendrSs muchos recursos para ganar dinero."9 if =MNH2OP2S'Q>cod>R==3@ echo "<strong>Sagitario8</strong> Eurante este dTa se vivirSn cambios en relaci#n a los novia?gos o a los hijos. +reatividad< actividad< diversiones salidas. PerTodo de encuentros con personas o situaciones Iue te impresionan."9 if =MNH2OP2S'Q>cod>R=="4@ echo "<strong>+apricornio8</strong> -os cambios del dTa tienen Iue ver con tu hogar< con la convivencia con el padre. %suntos relativos al carScter en la convivencia. 2l karma de responsabilidad de estos momentos te acercarS al mundo de lo desconocido< mucha madure? contacto con el mSs allS."9 if =MNH2OP2S'Q>cod>R==""@ echo "<strong>%cuario8</strong> Do todo asunto tiene Iue ver con el entorno inmediato< hermanos vecinos< con la comunicaci#n< los viajes cortos o traslados frecuentes. 2l hablar trasladarse serS importante ho . Gentalidad e ideas activas."9 if =MNH2OP2S'Q>cod>R=="&@ echo "<strong>Piscis8</strong> Eurante este dTa se vivirSn cambios en la economTa< movimientos en los ingresos< negocios< valores. Gomentos de gran fuer?a decisi#n profesionales< buscarSs el lidera?go."9 $> </div> </bod > </html> #omo podemos o-servar los hipervnculos llaman a la misma p*gina. href="pagina1.php?co)=1">1ries</a></p> Luego el cdigo % % )ue se ejecuta en el servidor veri+ica el valor )ue llega como par*metro y muestra el detalle del signo del horscopo seleccionado. if "@A7!BC!S:D,co),E==1# echo "<strong>1riesF</strong> 2oy los cam%ios serGn fHsicospersonales- )e carGcter- :e sentirGs impulsivo y tomarGs iniciativas. <erHo)o en )on)e consi)erarGs unirte a agrupaciones )e %eneficencia- o )e ayu)a a los )emGs."& 'n caso de no llegar par*metros a la p*gina (normalmente la primer ve, )ue cargamos la p*gina( el primer i+ se veri+ica verdadero. if "Iisset"@A7!BC!S:D,co),E## echo "Seleccione su signo."&

17

Si comparamos este ejemplo con el anterior veremos )ue utili,ar AJAX reduce la cantidad de in+ormacin )ue pedimos al servidor2 tam-i5n evitamos la recarga completa de la p*gina (imaginemos un sitio )ue contiene muchos elementos el redi-ujado es lento y engorroso( La hoja de estilo no tiene cam-ios con respecto al pro-lema anterior. 5menu 6 font7famil 8 %rial9 margin8,p!9 : 5menu p 6 margin84p!9 padding84p!9 : 5menu a 6 displa 8 block9 padding8 (p!9 ;idth8 ".4p!9 background7color8 5f0f1e19 border7bottom8 "p! solid 5eee9 te!t7align8center9 : 5menu a8link< 5menu a8visited 6 color8 5f449 te!t7decoration8 none9 : 5menu a8hover 6 background7color8 5(.39 color8 5fff9 : 5detalles 6 background7color85ffc9 te!t7align8left9 font7famil 8verdana9 border7;idth849 padding8,p!9 border8 "p! dotted 5fa49 margin8,p!9 :

, - -.jeto #ML/ttp0e1ue!t
'l o-jeto XML ttp?e)uest es un elemento +undamental para la comunicacin asincrnica con el servidor. 'ste o-jeto nos permite enviar y reci-ir in+ormacin en +ormato XML y en general en cual)uier +ormato (como vimos en el ejercicio anterior retornando un tro,o de archivo !ML( La creacin de un o-jeto de esta clase vara si se trata del :nternet '4plorer de Microso+t2 ya )ue este no lo incorpora en JavaScript sino )ue se trata de una ActiveX.

18

if "/in)o/.1ctive4;%ject# xml2ttp = ne/ 1ctive4;%ject""5icrosoft.4562::<"#& 'n cam-io en <ire<o4 y otros navegadores lo incorpora JavaScript y procedemos para su creacin de la siguiente manera. if "/in)o/.4562ttp7e8uest# xml2ttp = ne/ 4562ttp7e8uest"#& #omo hemos visto en el pro-lema anterior siempre implementaremos una +uncin )ue nos retorne un o-jeto XML ttp?e)uest haciendo transparente el proceso en cuanto a navegador donde se est5 ejecutando. function crear4562ttp7e8uest"# $ var xml2ttp=null& if "/in)o/.1ctive4;%ject# xml2ttp = ne/ 1ctive4;%ject""5icrosoft.4562::<"#& else if "/in)o/.4562ttp7e8uest# xml2ttp = ne/ 4562ttp7e8uest"#& return xml2ttp& . 's decir la +uncin crearXML ttp?e)uest se encargar* de retornarnos un o-jeto de la clase XML ttp?e)uest. Las propiedade! principales del o-jeto XML ttp?e)uest son. onreadystatechange Almacena el nom-re de la +uncin )ue se ejecutar* cuando el o-jeto XML ttp?e)uest cam-ie de estado. readyState Almacena el estado del re)uerimiento hecho al servidor2 pudiendo ser. o G No iniciali,ado (el m5todo open no a sido llamado( o 6 #argando (se llam al m5todo open( o 8 #argado (se llam al m5todo send y ya tenemos la ca-ecera de la peticin !!% y el status( o 9 :nteractivo (la propiedad response!e4t tiene datos parciales( o ; #ompletado (la propiedad response!e4t tiene todos los datos pedidos al servidor( responseText Almacena el string devuelto por el servidor2 luego de ha-er hecho una peticin. responseXML Similar a la anterior (response!e4t( con la di+erencia )ue el string devuelto por el servidor se encuentra en +ormato XML.

Los m todo! principales del o-jeto XML ttp?e)uest son. open A-re un re)uerimiento !!% al servidor. send 'nva el re)uerimiento al servidor.

#on+eccionaremos otro pro-lema para +ijar conceptos vistos hasta el momento. #on+eccionar una p*gina )ue muestre una imagen y permita cali+icarla con un valor entre 6 y 6G. %ermitir ingresar el nom-re del visitante. $isponer de un control de tipo select para seleccionar el valor. Luego al presionar un -otn enviar el valor seleccionado utili,ando el o-jeto XML ttp?e)uest al servidor donde almacenaremos en un archivo de te4to el nom-re del

19

visitante y el puntaje. ?etornar luego todos los votos hasta el momento. Actuali,aremos la p*gina !ML con todos los nom-res y votos hasta el momento. 'l archivo !ML es. pagina1.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h">/ote esta foto</h"> <p> <img src="../foto".jpg" alt="cuadro sobre geometria generativa"> </p> Yombre8<input t pe="te!t" id="nombre" si?e="&4"><br> /oto8<select id="voto"> <option value="4" selected>seleccione</option> <option value=""">"</option> <option value="&">&</option> <option value="(">(</option> <option value="*">*</option> <option value=",">,</option> <option value=".">.</option> <option value="0">0</option> <option value="1">1</option> <option value="3">3</option> <option value=""4">"4</option> </select><br> <input t pe="button" id="boton"" value="votar"> <div id="resultados"></div> </bod > </html> Lo primero )ue podemos o-servar es )ue no utili,aremos una hoja de estilo para reducir la complejidad del pro-lema y concentrarnos en la lgica. Si vemos utili,amos controles de tipo input2 select y -utton2 pero no disponemos ning1n +ormulario. 'sto se de-e a )ue los datos ingresados se enviar*n en +orma asncrona mediante el o-jeto XML ttp?e)uest. 0tro punto a destacar )ue a cada control le de+inimos la propiedad id2 esta es de suma importancia para poder accederla desde JavaScript. No de+inimos la propiedad name ya )ue no se enviar*n los datos por medio de +ormulario. Nuestro archivo con las +unciones JavaScript es. funciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9

20

: function presionBoton=e@ 6 var ob"=document.get2lementB Cd=>voto>@9 var ob&=document.get2lementB Cd=>nombre>@9 cargar/oto=ob".value<ob&.value@9 : var cone!ion"9 function cargar/oto=voto<nom@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$puntaje=>AvotoA>Znombre=>Anom< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = cone!ion".response'e!t9 : else 6 resultados.innerD'G- = >+argando...>9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@

21

!mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : #omo podemos o-servar tiene mucho en com1n con el primer ejemplo de AJAX )ue ha-amos desarrollado. Lo primero )ue hacemos es iniciali,ar el evento load con la +uncin iniciali,ar'ventos2 en esta iniciali,amos el evento clicB del 1nico -otn )ue contiene la p*gina. a))!vent"/in)o/-,loa),-iniciali ar!ventos-false#& function iniciali ar!ventos"# $ var o%=)ocument.get!lement*y+)",%oton1,#& a))!vent"o%-,click,-presion*oton-false#& . #uando se presiona el -otn se dispara la +uncin presion/oton2 donde o-tenemos la re+erencia a los dos controles (select y te4t( )ue tienen almacenados los valores. Llamamos +inalmente a la +uncin cargarDoto. function presion*oton"e# $ var o%1=)ocument.get!lement*y+)",voto,#& var o%'=)ocument.get!lement*y+)",nom%re,#& cargar0oto"o%1.value-o%'.value#& . La +uncin cargarDoto reci-e como par*metro el valor del voto y el nom-re del visitante2 seguidamente llama a la +uncin crearXML ttp?e)uest. %or 1ltimo iniciali,amos la propiedad onreadystatechange y llamamos a los m5todos open y send. 'n el m5todo open pasamos los dos datos en la ca-ecera de la peticin de p*gina. var conexion1& function cargar0oto"voto-nom# $ conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?puntaje=,(voto(,Jnom%re=,(nomtrue#& conexion1.sen)"null#& . Nos )ueda la +uncin procesar'ventos2 )ue cuando la propiedad readyState del o-jeto XML ttp?e)uest tiene un valor ; (proceso completado( recupera el valor de la propiedad response!e4t con la in+ormacin )ue se retorn desde el servidor. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $

22

resulta)os.inner2:56 = conexion1.response:ext& . else $ resulta)os.inner2:56 = ,>argan)o...,& .

'l archivo % % )ue se ejecuta en el servidor es el siguiente. pagina1.php <$php header=>+ontent7' pe8 te!t/html9 charset=CSL711,37">@9 Mar=fopen="puntaje.t!t"<"a"@ or die="Yo se pudo abrir el archivo"@9 fputs=Mar<"Yombre8".MNH2OP2S'Q>nombre>R."<br>"@9 fputs=Mar<"/oto8".MNH2OP2S'Q>puntaje>R."<br><br>"@9 fclose=Mar@9 Mar=fopen="puntaje.t!t"<"r"@ or die="Yo se pudo abrir el archivo"@9 ;hile =Xfeof=Mar@@ 6 Mlinea=fgets=Mar@9 echo Mlinea9 : fclose=Mar@9 $> Lo primero )ue hacemos es a-rir el archivo para agregar datos2 es decir no -orramos los votos e4istentes (puede pro-ar de cam-iar LaL de append por LEL )ue crea el archivo(. @ar=fopen""puntaje.txt"-"a"# or )ie""Ko se pu)o a%rir el archivo"#& Luego recuperamos los par*metros )ue llegan a la p*gina y los gra-amos. fputs"@ar-"Kom%reF".@A7!BC!S:D,nom%re,E."<%r>"#& fputs"@ar-"0otoF".@A7!BC!S:D,puntaje,E."<%r><%r>"#& #erramos y a-rimos nuevamente el archivo2 pero ahora con el o-jetivo de leerlo. fclose"@ar#& @ar=fopen""puntaje.txt"-"r"# or )ie""Ko se pu)o a%rir el archivo"#& %or 1ltimo generamos el archivo a retornar al navegador. /hile "Ifeof"@ar## $ @linea=fgets"@ar#& echo @linea& .

23

#on este segundo ejemplo de-emos poder identi+icar )ue partes son comunes al pro-lema anterior.

2 - 3a!a'do dato! a* !er(idor por e* m todo 4E5.

%ara indicar cual es el m5todo de envo de los datos al servidor lo hacemos en el primer par*metro del m5todo open del o-jeto XML ttp?e)uest. conexion1.open",9!:,-,pagina1.php?puntaje=,(voto(,Jnom%re=,(nomtrue#& 'n este ejemplo vemos como indicamos )ue el envo de los datos se hace por el m5todo F'!. Si lo hacemos de esta +orma tenemos )ue tener mucho cuidado en la codi+icacin del segundo par*metro del m5todo open donde indicamos el nom-re de la p*gina a pedir. Seguido al nom-re de la p*gina de-e ir el signo de interrogacin2 el nom-re del par*metro2 luego un igual y el valor del par*metro. 'n caso de ha-er m*s de un par*metro de-emos separarlos mediante el caracter ampersand. %or 1ltimo el tercer par*metro del m5todo open normalmente se pasa el valor true indicando )ue el re)uerimiento de la p*gina es asncrona (esto permite al visitante continuar interactuando con la p*gina sin )ue se congele hasta llegar la solicitud(

#on+eccionaremos un pro-lema similar al anterior2 es decir )ue nos permita cali+icar una +oto con un valor de 6 al 6G. La di+erencia es )ue la cali+icacin ser* por medio de una lista de hipervnculos del 6 al 6G. Adem*s haremos )ue la -arra de seleccin de la cali+icacin cam-ie de color cuando ingresamos con el mouse. Deremos )ue la mayor di+icultad se encuentra en la codi+icacin de esta 1ltima caracterstica m*s )ue en la comunicacin asincrnica. 'l archivo !ML es (pagina6.html(. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <h">/ote esta foto</h"> <p> <img src="../foto".jpg" alt="cuadro sobre geometria generativa"> </p> <ul class="voto" id="votofoto""> <li><a href="pagina".php$voto="">"</a></li> <li><a href="pagina".php$voto=&">&</a></li> <li><a href="pagina".php$voto=(">(</a></li> <li><a href="pagina".php$voto=*">*</a></li> <li><a href="pagina".php$voto=,">,</a></li>

24

<li><a href="pagina".php$voto=.">.</a></li> <li><a href="pagina".php$voto=0">0</a></li> <li><a href="pagina".php$voto=1">1</a></li> <li><a href="pagina".php$voto=3">3</a></li> <li><a href="pagina".php$voto="4">"4</a></li> </ul> <br> <div id="resultados"></div> <a href="votos.t!t">/er resultados</a> </bod > </html> La +oto se encuentra en el directorio inmediatamente superior por eso indicamos el ..& . <img src="../foto1.jpg" alt="cua)ro so%re geometria generativa"> %ara no complicar m*s el pro-lema el archivo de resultados se almacena en un archivo de te4to llamado votos.t4t (al presionar el hipervnculo procedemos a mostrarlo en el navegador2 esto nos podr* permitir veri+icar si realmente el voto se registr en el servidor(. <a href="votos.txt">0er resulta)os</a> #ada hipervnculo pasa como par*metro la cali+icacin respectiva. <li><a href="pagina1.php?voto=1">1</a></li> <li><a href="pagina1.php?voto='">'</a></li> <li><a href="pagina1.php?voto=L">L</a></li> La hoja de estilo )ueda de+inida como sigue (estilos.css(. .voto 6 padding84p!9 : .voto a 6 float8left9 ;idth8",p!9 te!t7decoration8none9 te!t7align8center9 color85f449 background7color85f0f1e19 border7right8"p! solid ;hite9 font7si?e8"(p!9 : .voto li 6 displa 8inline9 : #omo la lista de hipervnculos los )ueremos todos en la misma lnea iniciali,amos la propiedad display con el valor inline. .voto li $ )isplayFinline& .

25

Luego donde se encuentra la complejidad mayor es en +unciones.js. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>votofoto">@9 var vec= ref.get2lementsB 'agYame=>li>@9 var vec&=ref.get2lementsB 'agYame=>a>@9 for=f=49f<vec&.length9fAA@ 6 add2vent=vecQfR<>mouseover><entrar<false@9 add2vent=vecQfR<>mouseout><salir<false@9 add2vent=vec&QfR<>click><presionBoton<false@9 : : function entrar=e@ 6 var ref9 if =;indo;.event@ ref=;indo;.event.src2lement9 else if =e@ ref=e.target9 var ob=document.get2lementB Cd=>votofoto">@9 var vec=ob.get2lementsB 'agYame=>li>@9 for=f=49f<ref.first+hild.node/alue9fAA@ 6 vecQfR.first+hild.st le.background=>5f44>9 vecQfR.first+hild.st le.color=>5fff>9 : : function salir=e@ 6 var ref9 if =;indo;.event@ ref=;indo;.event.src2lement9 else if =e@ ref=e.target9 var ob=document.get2lementB Cd=>votofoto">@9 var vec=ob.get2lementsB 'agYame=>li>@9 for=f=49f<ref.first+hild.node/alue9fAA@ 6 vecQfR.first+hild.st le.background=>5f0f1e1>9 vecQfR.first+hild.st le.color=>5f44>9 : : function presionBoton=e@ 6 var ref9

26

if =;indo;.event@ 6 ;indo;.event.return/alue=false9 ref=;indo;.event.src2lement9 : else if =e@ 6 e.preventEefault=@9 ref=e.target9 : cargar/oto=ref.first+hild.node/alue@9

var cone!ion"9 function cargar/oto=voto@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 var aleatorio=Gath.random=@9 cone!ion".open=>)2'><>pagina".php$voto=>AvotoA"Zaleatorio="Aaleatorio< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = >)racias.>9 : else 6 resultados.innerD'G- = >Procesando...>9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 :

27

else return false9

function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : La primera +uncin )ue se ejecuta cuando se termina de cargar por completo la p*gina es iniciali,ar'ventos. 0-tenemos la re+erencia al div )ue contiene la +oto. var ref=)ocument.get!lement*y+)",votofoto1,#& Luego o-tenemos a partir de la re+erencia de dicho div todos los elementos li (list item( y a (anchor(. var vec= ref.get!lements*y:agKame",li,#& var vec'=ref.get!lements*y:agKame",a,#& %asamos a la asignacin de eventos a estos elementos dentro de un +or2 a los elementos de tipo li le de+inimos los eventos mouseover y mouseout2 luego a los elementos a le de+inimos el evento clicB. for"f=M&f<vec'.length&f((# $ a))!vent"vecDfE-,mouseover,-entrar-false#& a))!vent"vecDfE-,mouseout,-salir-false#& a))!vent"vec'DfE-,click,-presion*oton-false#& . La +uncin entrar se ejecuta cuando la +lecha del mouse se dispone dentro de alg1n elemento de la lista. Luego dentro de un +or cam-iamos el color de todos los elementos menores e incluyendo al )ue emiti el evento. function entrar"e# $ var ref& if "/in)o/.event# ref=/in)o/.event.src!lement& else if "e# ref=e.target& var o%=)ocument.get!lement*y+)",votofoto1,#& var vec=o%.get!lements*y:agKame",li,#& for"f=M&f<ref.first>hil).no)e0alue&f((# $ vecDfE.first>hil).style.%ackgroun)=,NfMM,& vecDfE.first>hil).style.color=,Nfff,&

28

. . 'l algoritmo es similar cuando sacamos la +lecha del mouse de un elemento de tipo li. function salir"e# $ var ref& if "/in)o/.event# ref=/in)o/.event.src!lement& else if "e# ref=e.target& var o%=)ocument.get!lement*y+)",votofoto1,#& var vec=o%.get!lements*y:agKame",li,#& for"f=M&f<ref.first>hil).no)e0alue&f((# $ vecDfE.first>hil).style.%ackgroun)=,NfOfPeP,& vecDfE.first>hil).style.color=,NfMM,& . . La +uncin presion/oton se ejecuta cuando alguno de los elementos a (anchor( es presionado. function presion*oton"e# $ var ref& if "/in)o/.event# $ /in)o/.event.return0alue=false& ref=/in)o/.event.src!lement& . else if "e# $ e.prevent3efault"#& ref=e.target& . cargar0oto"ref.first>hil).no)e0alue#& . 'n la +uncin presion/oton desactivamos la accin por de+ecto de un elemento LaL llamando a la +uncin e.prevent$e+ault(( o en su de+ecto si nos encontramos con el navegador :' iniciali,amos la propiedad returnDalue con +alse (EindoE.event.returnDalueM+alse(. %rocedemos luego a llamar a la +uncin cargarDoto pasando como re+erencia el valor contenido el el elemento LaL. Deamos ahora la +uncin cargarDoto. var conexion1& function cargar0oto"voto# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& var aleatorio=5ath.ran)om"#& conexion1.open",9!:,-,pagina1.php? voto=,(voto("Jaleatorio="(aleatorio- true#& conexion1.sen)"null#&

29

. #reamos un o-jeto de la clase XML ttp?e)uest llamando a la +uncin crearXML ttp?e)uest((. :niciali,amos la propiedad onreadystatechage con el nom-re de la +uncin )ue se disparar* cada ve, )ue el o-jeto XML ttp?e)uest cam-ie de estado. Ahora llamamos a la +uncin open del o-jeto XML ttp?e)uest indicando. var aleatorio=5ath.ran)om"#& conexion1.open",9!:,-,pagina1.php? voto=,(voto("Jaleatorio="(aleatorio- true#& 'l m5todo de cone4in utili,ado2 en este caso es HF'!H2 como segundo par*metro la p*gina )ue procesar* el dato enviado al servidor (en nuestro caso enviamos el valor entero comprendido entre 6 y 6G2 m*s precisamente el )ue seleccion el operador( 'l dato a enviar se llama voto y almacena el contenido de la varia-le voto )ue llega como par*metro a esta +uncin. 0tra cosa )ue vamos a incorporar es el envo de un valor aleatorio. 'sto es necesario si el navegador est* con+igurado )ue recupere las p*ginas del cache. :maginemos )ue votamos y asignamos el valor 6G2 luego si volvemos a seleccionar el 6G puede recuperar la pagina6.phpN votoM6G del cache y no actuali,ar el archivo de te4to con el voto seleccionado. La solucin mas sencilla es enviar un par*metro con un valor aleatorio2 lo cual el navegador interpretar* )ue se trata de otra p*gina. ?ecordemos )ue el tercer par*metro de la +uncin open indica )ue el proceso se e+ect1e en +orma asincrnica (esto si le pasamos el valor true( La +uncin procesar'ventos o-tiene una re+erencia al div llamado detalles y mustra inicialmente el te4to. H#argando...H2 luego cuando el servidor in+orma )ue los datos se registraron pasa a mostrar el te4to. HFraciasH. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ resulta)os.inner2:56 = ,9racias.,& . else $ resulta)os.inner2:56 = ,<rocesan)o...,& . . %or 1ltimo la p*gina )ue se ejecuta en el servidor (pagina6.php( tiene por o-jetivo registrar en un archivo de te4to el valor seleccionado por el visitante. <$php header=>+ontent7' pe8 te!t/html9 charset=CSL711,37">@9 Mar=fopen="votos.t!t"<"a"@ or die="Yo se pudo abrir el archivo"@9 fputs=Mar<MNH2OP2S'Q>voto>R."7[n"@9 fclose=Mar@9 $>

30

6 - 3a!a'do dato! a* !er(idor por e* m todo 3-75.

%odemos enviar los datos por el m5todo F'!2 como hemos visto hasta ahora2 pero tam-i5n podemos enviar los datos por el m5todo %0S!. 'l m5todo %0S! se utili,a cuando hay )ue enviar mucha in+ormacin al servidor. ay varios puntos a tener en cuenta para cuando codi+icamos los datos para el envo por el m5todo %0S!. 6. #uando llamamos al m5todo open del o-jeto XML ttp?e)uest como primer par*metro indicamos el string H%0S!H '. conexion1.open",<;S:,-,pagina1.php,- true#&

9. Llamamos al m5todo set?e)uest eader indicando )ue los datos a enviarse est*n codi+icados como un +ormulario. =. conexion1.set7e8uest2ea)er"">ontentQ:ype"-"application/xQ///Q formQurlenco)e)"#& =. Llamamos al m5todo send del o-jeto XML ttp?e)uest pasando los datos. R. conexion1.sen)""nom%re=juanJclave= PM"#& %odemos concatenar datos e4traidos de un +ormulario y enviarlos a trav5s del m5todo send.

#on+eccionaremos un pro-lema completo para pro-ar la +uncionalidad del envo de datos por el m5todo %0S!. aremos una serie de p*ginas )ue nos permitan enviar los datos cargados en un +ormulario al servidor en +orma asincrnica y por lo tanto no tendremos )ue re+rescar la p*gina luego de enviado los datos. 'l +ormulario solicitar* )ue ingrese el nom-re y comentarios del sitio. 'l archivo !ML es el siguiente (pagina6.html(. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <form action="pagina".php" method="post" id="formulario"> Yombre8<input t pe="te!t" name="nombre" id="nombre" si?e="&4"><br> +omentarios8<br> <te!tarea name="comentarios" id="comentarios" ro;s=""4" cols=",4"></te!tarea><br>

31

<input t pe="submit" value="2nviar" id="enviar"> <div id="resultados"></div> <a href="comentarios.t!t">/er resultados</a> </form> </bod > </html> 'ste archivo !ML no tiene nada de especial2 -*sicamente es un +ormulario con un control de tipo input2 otro de tipo te4tarea y +inalmente un -otn para el envo de los datos al servidor. Adem*s contiene un div vaco para mostrar mensajes so-re el resultado del envo de los datos al servidor. $isponemos un hipervnculo al archivo de te4to )ue almacenar* los datos cargados2 esto con el o-jetivo de poder controlar si los datos realmente se cargaron en el servidor. 'n un pro-lema m*s grande seguramente los datos los almacenaremos en una -ase de datos. 'l archivo +unciones.js es. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>formulario>@9 add2vent=ref<>submit><enviarEatos<false@9 : function enviarEatos=e@ 6 if =;indo;.event@ ;indo;.event.return/alue=false9 else if =e@ e.preventEefault=@9 enviarKormulario=@9 : function retornarEatos=@ 6 var cad=>>9 var nom=document.get2lementB Cd=>nombre>@.value9 var com=document.get2lementB Cd=>comentarios>@.value9 cad=>nombre=>AencodePHC+omponent=nom@ A>Zcomentarios=>AencodePHC+omponent=com@9 return cad9 : var cone!ion"9 function enviarKormulario=@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>PLS'><>pagina".php>< true@9 cone!ion".setHeIuestDeader="+ontent7' pe"<"application/!7;;;7form7 urlencoded"@9

32

cone!ion".send=retornarEatos=@@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = >)racias.>9 : else 6 resultados.innerD'G- = >Procesando...>9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : Lo primero )ue hacemos en la +uncin iniciali,ar'ventos es. var ref=)ocument.get!lement*y+)",formulario,#& a))!vent"ref-,su%mit,-enviar3atos-false#& 0-tener la re+erencia del +ormulario e iniciali,ar el evento su-mit para poder capturar el momento en )ue los datos se enviar*n al servidor. 's decir la +uncin enviar$atos se ejecutar* cuando el operador presione el -otn de tipo su-mit.

33

La +uncin enviar<ormulario. var conexion1& function enviarSormulario"# $ conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",<;S:,-,pagina1.php,- true#& conexion1.set7e8uest2ea)er"">ontentQ:ype"-"application/xQ///QformQ urlenco)e)"#& conexion1.sen)"retornar3atos"##& . :niciali,a el o-jeto XML ttp?e)uest indicando en el m5todo open )ue los datos se enviar*n mediante el comando %0S!. Luego llamamos al m5todo set?e)uest eader indicando el tipo de contenido a enviar al servidor. <inalmente llamamos al m5todo send con los datos. 'stos datos los recuperamos del +ormulario llamando a la +uncin retornar$atos(( )ue a continuacin la e4plicaremos. function retornar3atos"# $ var ca)=,,& var nom=)ocument.get!lement*y+)",nom%re,#.value& var com=)ocument.get!lement*y+)",comentarios,#.value& ca)=,nom%re=,(enco)eC7+>omponent"nom# (,Jcomentarios=,(enco)eC7+>omponent"com#& return ca)& . 0-tenemos el valor contenido en cada control (input y te4tarea( y luego concatenamos nom-re del dato y valor separ*ndolos por el caracter *mpersand. 0tra cosa importante es llamar a la +uncin JavaScript encode7?:#omponent para codi+icar los datos ingresados por el visitante y se puedan enviar correctamente al servidor. La +uncin procesar'ventos. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ resulta)os.inner2:56 = ,9racias.,& . else $ resulta)os.inner2:56 = ,<rocesan)o...,& . . $ijimos ya )ue esta +uncin se ejecuta cada ve, )ue cam-ia el estado del o-jeto XML ttp?e)uest. #uando retorna un ; signi+ica )ue el envo de datos se e+ectu en +orma correcta2 mostramos en ese momento el mensaje HFraciasH. 'l 1ltimo archivo. pagina6.php

34

<$php header=>+ontent7' pe8 te!t/html9 charset=CSL711,37">@9 Mar=fopen="comentarios.t!t"<"a"@ or die="Yo se pudo abrir el archivo"@9 fputs=Mar<"Yombre8".MNH2OP2S'Q>nombre>R."[n"@9 fputs=Mar<"+omentarios8".MNH2OP2S'Q>comentarios>R."[n[n"@9 fclose=Mar@9 $>

8 - 0ecupera'do dato! media'te *a propiedad re!po'!e5ext de* o.jeto #ML/ttp0e1ue!t

Ahora nos concentraremos en la propiedad response!e4t del o-jeto XML ttp?e)uest. 'sta propiedad almacena el valor devuelto por el servidor. Normalmente accederemos a la propiedad response!e4t cuando el o-jeto XML ttp?e)uest nos in+orma )ue toda la in+ormacin +ue remitida por el servidor2 esto ocurre cuando la propiedad readyState del o-jeto XML ttp?e)uest almacena el valor ;. Lo m*s com1n es )ue tengamos un cdigo similar al siguiente. function procesar!ventos"# $ var )etalles = )ocument.get!lement*y+)""comentarios"#& if"conexion1.rea)yState == =# $ )etalles.inner2:56 = conexion1.response:ext& . else $ )etalles.inner2:56 = ,>argan)o...,& . . #on+eccionaremos un ejemplo para identi+iar donde utili,ar la propiedad response!e4t. 'l pro-lema consiste en mostrar una lista de hipervnculos )ue representan los comentarios de distintas +echa. 'l o-jetivo es rescatar todos los comentarios para la +echa seleccionada por el visitante y su posterior visuali,acin sin tener )ue recargar nuevamente la p*gina. 'l archivo pagina6.html es. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <h&>Seleccione la fecha8</h&> <p> <div id="fecha"> <a href="pagina".php$fecha="4/4(/&440">ver comentarios del "4/4(/&440</a><br>

35

<a href="pagina".php$fecha=""/4(/&440">ver comentarios del ""/4(/&440</a><br> <a href="pagina".php$fecha="&/4(/&440">ver comentarios del "&/4(/&440</a><br> </div> <div class="recuadro" id="comentarios">+omentarios8</div> </bod > #ada hipervnculo dispone como par*metro la +echa de la cual )ueremos recuperar los comentarios. $isponemos un div donde visuali,aremos los comentarios de la +echa seleccionada. La hoja de estilo estilos.css es. .recuadro 6 background7color85ffffcc9 te!t7align8left9 font7famil 8verdana9 border7;idth849 padding8,p!9 border8 "p! dotted 5ffaa449 : Luego el archivo +unciones.js es. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref9 ref=document.get2lementB Cd=>fecha>@9 var vec=ref.get2lementsB 'agYame=>a>@9 for=f=49f<vec.length9fAA@ 6 add2vent=vecQfR<>click><presion2nlace<false@9 : : function presion2nlace=e@ 6 if =;indo;.event@ 6 ;indo;.event.return/alue=false9 var url=;indo;.event.src2lement.get%ttribute=>href>@9 ver+omentarios=url@9 : else if =e@ 6 e.preventEefault=@9 var url=e.target.get%ttribute=>href>@9 ver+omentarios=url@9 :

36

: var cone!ion"9 function ver+omentarios=url@ 6 if=url==>>@ 6 return9 : cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=")2'"< url< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var detalles = document.get2lementB Cd="comentarios"@9 if=cone!ion".read State == *@ 6 detalles.innerD'G- = cone!ion".response'e!t9 : else 6 detalles.innerD'G- = >+argando...>9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9

37

return !mlDttp9 : La +uncin iniciali,ar'ventos. var ref& ref=)ocument.get!lement*y+)",fecha,#& var vec=ref.get!lements*y:agKame",a,#& for"f=M&f<vec.length&f((# $ a))!vent"vecDfE-,click,-presion!nlace-false#& . 0-tiene la re+erencia a todas las a (anchor( contenidas en el div H+echaH2 luego mediante un +or iniciali,a el evento clicB para cada hipervnculo. La +uncin presion'nlace se dispara cuando se presiona alguno de los hipervnculos. function presion!nlace"e# $ if "/in)o/.event# $ /in)o/.event.return0alue=false& var url=/in)o/.event.src!lement.get1ttri%ute",href,#& ver>omentarios"url#& . else if "e# $ e.prevent3efault"#& var url=e.target.get1ttri%ute",href,#& ver>omentarios"url#& . . %rimero desactivamos el evento por de+ecto y llamamos a la +uncin ver#omentarios pasando como re+erencia el par*metro del hipervnculo. La +uncin ver#omentarios . var conexion1& function ver>omentarios"url# $ if"url==,,# $ return& . conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open""9!:"- url- true#& conexion1.sen)"null#& . Llama a la +uncin crearXML ttp?e)uest )ue retorna un o-jeto de tipo XML ttp?e)uest y procede a almacenarlo en la varia-le cone4ion6 ()ue al ser una varia-le glo-al podr* utili,arse y accederse desde otra +uncin(

38

Las siguientes tres lneas son similares a pro-lemas )ue hemos reali,ado anteriormente. %rimero iniciali,amos la propiedad onreadystatechange con el nom-re de la +uncin )ue procesar* los eventos del o-jeto XML ttp?e)uest. #omo segundo paso llamamos al m5todo open indicando )ue enviaremos la +echa mediante el m5todo F'!2 el siguiente par*metro el nom-re de la p*gina a llamar junto con la +echa a enviar y por 1ltimo pasamos el valor true indicando )ue emplearemos comunicacin asincrnica. 'l tercer paso es llamar al m5todo send. #omo par*metro a este m5todo indicamos el valor null ya )ue los datos viajan en la misma ca-ecera de peticin de p*gina (ej. Hpagina6.phpN +echaM88&66&8GG@( La +uncin procesar'ventos es donde accedemos a la propiedad response!e4t. function procesar!ventos"# $ var )etalles = )ocument.get!lement*y+)""comentarios"#& if"conexion1.rea)yState == =# $ )etalles.inner2:56 = conexion1.response:ext& . else $ )etalles.inner2:56 = ,>argan)o...,& . . 'n esta +uncin mientras la propiedad readyState del o-jeto XML ttp?e)uest almacene un valor distinto a ; signi+ica )ue el proceso no a +inali,ado. #uando identi+icamos )ue tiene el valor ; procedemos a modi+icar el div con el valor devuelto por el servidor. )etalles.inner2:56 = conexion1.response:ext& %ara simpli+icar el pro-lema en el servidor evitamos rescatarlos de una -ase de datos (como ocurre en la realidad(2 luego el contenido de esta p*gina es (pagina6.php(. <$php if =MNH2OP2S'Q>fecha>R==>"4/4(/&440>@ 6 echo "2stos comentarios corresponden a la fecha "4/4(/&440<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9

39

echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 echo "!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!.<br>"9 : if =MNH2OP2S'Q>fecha>R==>""/4(/&440>@ 6 echo "2stos comentarios corresponden a la fecha ""/4(/&440<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 echo " .<br>"9 : if =MNH2OP2S'Q>fecha>R==>"&/4(/&440>@ 6 echo "2stos comentarios corresponden a la fecha "&/4(/&440<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 echo "????????????????? ??????????????? ?????????????? ??????.<br>"9 : $>

9 - 0ecupera'do dato! media'te *a propiedad re!po'!e#ML de* o.jeto #ML/ttp0e1ue!t

La propiedad responseXML a di+erencia de la propiedad response!e4t recupera los datos como XML y de-emos recorrerlo mediante las +unciones del $0M. 's necesario )ue el programa )ue se ejecute en el servidor estructure los datos en +ormato XML. %ara pro-ar el +uncionamiento de esta propiedad del o-jeto XML ttp?e)uest implementaremos una p*gina )ue muestre en un control select los nom-res de una serie de paises. #uando se seleccione uno y se presione un -otn recuperaremos de dicho pais el nom-re de la capital2 su super+icie2 cantidad de ha-itantes y su idioma. 'l servidor generar* un archivo con +ormato XML y lo retornar* al cliente.

40

'l primer archivo (pagina6.html(. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h">Eatos de paises.</h"> <p>Seleccione el pais <select id="pais"> <option value="4" selected>seleccione</option> <option value="%rgentina">%rgentina</option> <option value="Brasil">Brasil</option> <option value="+hile">+hile</option> </select><br> <input t pe="button" id="boton"" value="Hecuperar"> </p> <div id="resultados"></div> </bod > </html> 'ste archivo !ML no tiene nada nuevo. 'l archivo )ue contiene las +unciones JavaScript (+unciones.js(. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9 : function presionBoton=e@ 6 var ob"=document.get2lementB Cd=>pais>@9 recuperarEatos=ob".value@9 : var cone!ion"9 function recuperarEatos=pais@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$pa=>Apais< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 var !ml = cone!ion".responseFG-9

41

: else 6 resultados.innerD'G- = >+argando...>9 : :

var capital=!ml.get2lementsB 'agYame=>capital>@9 var superficie=!ml.get2lementsB 'agYame=>superficie>@9 var idioma=!ml.get2lementsB 'agYame=>idioma>@9 var poblacion=!ml.get2lementsB 'agYame=>poblacion>@9 resultados.innerD'G-=>+apital=>AcapitalQ4R.first+hild.node/alue A ><br>> A >Superficie=>AsuperficieQ4R.first+hild.node/alue A ><br>> A >Cdioma=>AidiomaQ4R.first+hild.node/alue A ><br>> A >Poblacion=>ApoblacionQ4R.first+hild.node/alue 9

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n la primer +uncin )ue se ejecuta enla,amos la +uncin a ejecutar al presionar el -otn. var o%=)ocument.get!lement*y+)",%oton1,#& a))!vent"o%-,click,-presion*oton-false#& #uando se presiona el -otn se ejecuta la +uncin presion/oton. function presion*oton"e# $ var o%1=)ocument.get!lement*y+)",pais,#&

42

recuperar3atos"o%1.value#& . ?ecuperamos el pais seleccionado en el control select y llamamos a la +uncin recuperar$atos pasando como par*metro dicho pais. La +uncin recuperar$atos crea un o-jeto de la clase XML ttp?e)uest y a-re una cone4in con el servidor mediante el m5todo F'! pasando como par*metro el nom-re del pais seleccionado. var conexion1& function recuperar3atos"pais# $ conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?pa=,(pais- true#& conexion1.sen)"null#& . #omo sa-emos la propiedad onreadystatechange se iniciali,a con el nom-re de la +uncin )ue procesar* los cam-ios de estado del o-jeto XML ttp?e)uest. 'n este caso el algoritmo de la +uncin es. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ var xml = conexion1.response456& var capital=xml.get!lements*y:agKame",capital,#& var superficie=xml.get!lements*y:agKame",superficie,#& var i)ioma=xml.get!lements*y:agKame",i)ioma,#& var po%lacion=xml.get!lements*y:agKame",po%lacion,#& resulta)os.inner2:56=,>apital=,(capitalDME.first>hil).no)e0alue ( ,<%r>, ( ,Superficie=,(superficieDME.first>hil).no)e0a lue ( ,<%r>, ( ,+)ioma=,(i)iomaDME.first>hil).no)e0alue ( ,<%r>, ( ,<o%lacion=,(po%lacionDME.first>hil).no)e0alu e & . else $ resulta)os.inner2:56 = ,>argan)o...,& . . #uando los datos han llegado completamente2 es decir la propiedad readyState del o-jeto XML ttp?e)uest almacena el valor ; procedemos a cargar los datos dentro del div HresultadosH. %rimero almacenamos la in+ormacin en la varia-le 4ml. var xml = conexion1.response456& Ahora podemos recorrer el archivo XML mediante las +unciones )ue provee el $0M. var capital=xml.get!lements*y:agKame",capital,#&

43

'sta lnea genera un vector con las re+erencias a todos los elementos llamados HcapitalH ('n nuestro caso hay uno solo( #omo se trata de un vector luego de-emos accederlo por medio de un su-ndice (indicamos el valor cero ya )ue contiene solo un elemento(. capitalDME.first>hil).no)e0alue #omo sa-emos el te4to contenido entre las marcas se trata de otro nodo y lo podemos acceder mediante el m5todo +irst#hild. %or 1ltimo para acceder a la in+ormacin de dicho nodo de te4to lo hacemos mediante la propiedad nodeDalue (!ener en cuenta )ue todos estos conceptos se ven detenidamente en el tutorial de $ !ML(

'l 1ltimo archivo )ue integra este pro-lema es el )ue se ejecuta en el servidor (pagina6.php(. <$php if =MNH2OP2S'Q>pa>R==>%rgentina>@ 6 Msuperficie=&0444449 Mcapital="Buenos %ires"9 Midioma="+astellano"9 Mpoblacion=(14444449 : if =MNH2OP2S'Q>pa>R==>Brasil>@ 6 Msuperficie=1,444449 Mcapital="Brasilia"9 Midioma="Portugues"9 Mpoblacion=".(4444449 : if =MNH2OP2S'Q>pa>R==>+hile>@ 6 Msuperficie=0,44449 Mcapital="Santiago"9 Midioma="+astellano"9 Mpoblacion=",4444449 : M!ml="<$!ml version=["".4["$>[n"9 M!ml.="<pais>[n"9 M!ml.="<superficie>Msuperficie</superficie>[n"9 M!ml.="<capital>Mcapital</capital>[n"9 M!ml.="<idioma>Midioma</idioma>[n"9 M!ml.="<poblacion>Mpoblacion</poblacion>[n"9 M!ml.="</pais>[n"9 header=>+ontent7' pe8 te!t/!ml>@9 echo M!ml9 $> Nuevamente para simpli+icar el pro-lema no hemos almacenado los datos de los paises en una -ase de datos. Mediante una serie de i+ veri+icamos de )ue pais se trata e iniciali,amos cuatro varia-les. %or 1ltimo creamos un string organi,ando la in+ormacin con +ormato XML.

44

Mediante la +uncin header in+ormamos al navegador )ue se trata de un archivo XML. <inalmente procedemos a imprimir la varia-le I4ml luego de enviar la ca-ecera al navegador.

1: - 3ropiedade! o'ready!tatecha';e y ready!tate.

$os propiedades +undamentales del o-jeto XML ttp?e)uest son onreadystatechange y readyState. 'l o-jetivo de cada una es. onreadystatechange Almacena el nom-re de la +uncin )ue se ejecutar* cuando el o-jeto XML ttp?e)uest cam-ie de estado. readyState Almacena el estado del re)uerimiento hecho al servidor2 pudiendo ser. o G No iniciali,ado (el m5todo open no a sido llamado( o 6 #argando (se llam al m5todo open( o 8 #argado (se llam al m5todo send y ya tenemos la ca-ecera de la peticin !!% y el status( o 9 :nteractivo (la propiedad response!e4t tiene datos parciales( o ; #ompletado (la propiedad response!e4t tiene todos los datos pedidos al servidor( Normalmente cuando creamos un o-jeto de la clase XML ttp?e)uest iniciali,amos la propiedad onreadystatechange con el nom-re de la +uncin )ue procesar* los datos enviados por el servidor. function cargar2oroscopo"url# $ if"url==,,# $ return& . conexion1=crear4562ttp7e8uest"#& conexion1.onreadystatechange = procesarEventos; conexion1.open""9!:"- url- true#& conexion1.sen)"null#& . %or otro lado dentro de la +uncin )ue previamente +ue asignada a la propiedad onreadystatechange veri+icamos el estado de la propiedad readyState. function procesar!ventos"# $ var )etalles = )ocument.get!lement*y+)"")etalles"#& if(conexion1.readyState == 4) $ )etalles.inner2:56 = conexion1.response:ext& . else $ )etalles.inner2:56 = ,>argan)o...,& . .

45

%ara ver el paso de estados del o-jeto XML ttp?e)uest implementaremos una aplicacin )ue calcule el cuadrado de un n1mero )ue ingresamos por teclado. 3 adem*s mostraremos mediante un alert el estado actual de la propiedad readyState. pagina6.htmlO <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <form action="pagina".php" method="post" id="formulario"> Cngrese nro8<input t pe="te!t" name="nro" id="nro" si?e=""4"><br> <input t pe="submit" value="+alcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </bod > </html> +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>formulario>@9 add2vent=ref<>submit><enviarEatos<false@9 : function enviarEatos=e@ 6 if =;indo;.event@ ;indo;.event.return/alue=false9 else if =e@ e.preventEefault=@9 enviarKormulario=@9 : var cone!ion"9 function enviarKormulario=@ 6 cone!ion"=crearFG-DttpHeIuest=@ cone!ion".onread statechange = procesar2ventos9 var num=document.get2lementB Cd=>nro>@.value9 alert=>/alor de la propiedad read State8>Acone!ion".read State@9 cone!ion".open=>)2'><>pagina".php$numero=>Anum< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 alert=>/alor de la propiedad read State8>Acone!ion".read State@9

46

var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = cone!ion".response'e!t9 : else if =cone!ion".read State==" \\ cone!ion".read State==& \\ cone!ion".read State==(@ 6 resultados.innerD'G- = >Procesando...>9 : :

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : #omo podemos o-servar si accedemos a la propiedad readyState antes de llamar a los m5todos open y send la misma almacena el valor cero. conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& var num=)ocument.get!lement*y+)",nro,#.value& alert",0alor )e la propie)a) rea)yStateF,(conexion1.rea)yState#& //5uestra cero

47

#uando llamamos al m5todo open se ejecuta por primera ve, la +uncin )ue iniciali,amos en la propiedad onreadystatechange2 al mostrar la propiedad readyState veremos )ue almacena un uno. conexion1.open",9!:,-,pagina1.php?numero=,(num- true#& #uando llamamos al m5todo send se ejecuta por segunda ve, la +uncin )ue iniciali,amos en la propiedad onreadystatechange2 al mostrar la propiedad readyState veremos )ue continua con el valor uno. Luego la +uncin. function procesar!ventos"# $ alert",0alor )e la propie)a) rea)yStateF,(conexion1.rea)yState#& var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ resulta)os.inner2:56 = conexion1.response:ext& . else if "conexion1.rea)yState==1 TT conexion1.rea)yState==' TT conexion1.rea)yState==L# $ resulta)os.inner2:56 = ,<rocesan)o...,& . . mostrar* los valores 829 y ;. ?ecordemos. o o o o o G No iniciali,ado (el m5todo open no a sido llamado( 6 #argando (se llam al m5todo open( 8 #argado (se llam al m5todo send y ya tenemos la ca-ecera de la peticin !!% y el status( 9 :nteractivo (la propiedad response!e4t tiene datos parciales( ; #ompletado (la propiedad response!e4t tiene todos los datos pedidos al servidor(

pagina6.php <$php Mcuadrado=MNH2OP2S'Q>numero>RJMNH2OP2S'Q>numero>R9 echo Mcuadrado9 $>

11 - 3ropiedade! !tatu! y !tatu!5ext.

'stas dos propiedades todava no las ha-amos utili,ado. Deremos )ue las mismas nos permiten hacer un cdigo m*s correcto. !tatu! 'sta propiedad almacena el cdigo del estado de la peticin !!%. 'ntre otros valores )ue puede retornar el servidor. 8GG es el valor para una cone4in e4itosa2 ;G;

48

p*gina ine4istente. 'sta propiedad de solo lectura esta disponi-le cuando readyState toma los valores 9 o ;. !tatu!5ext Almacena el te4to de la peticin !!% enviado por el servidor.

#on estas nuevas propiedades veremos )ue lo m*s correcto cuando readyState contiene el valor ; de-emos adem*s veri+icar si la propiedad status almacena el valor 8GG (es decir el servidor proces correctamente la peticin( %ara pro-ar estas propiedades con+eccionaremos el pro-lema del concepto anterior (retornar del servidor el cuadrado de un n1mero )ue ingresamos por teclado(2 introduciremos un error (el m5todo open llamar* a una p*gina php ine4istente( y veremos cual es el mensaje en pantalla2 luego agregaremos la veri+icacin de la propiedad status. pagina6.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <form action="pagina".php" method="post" id="formulario"> Cngrese nro8<input t pe="te!t" name="nro" id="nro" si?e=""4"><br> <input t pe="submit" value="+alcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </bod > </html> +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>formulario>@9 add2vent=ref<>submit><enviarEatos<false@9 : function enviarEatos=e@ 6 if =;indo;.event@ ;indo;.event.return/alue=false9 else if =e@ e.preventEefault=@9 enviarKormulario=@9 : var cone!ion"9 function enviarKormulario=@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9

49

var num=document.get2lementB Cd=>nro>@.value9 cone!ion".open=>)2'><>pagina!.php$numero=>Anum< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = cone!ion".response'e!t9 : else if =cone!ion".read State==" \\ cone!ion".read State==& \\ cone!ion".read State==(@ 6 resultados.innerD'G- = >Procesando...>9 : :

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n este archivo podemos ver el error )ue hemos introducido. conexion1.open",9!:,-,paginax.php?numero=,(num- true#&

50

emos pasado como nom-re de p*gina. pagina4.php donde de-amos disponer pagina6.php. pagina6.php <$php Mcuadrado=MNH2OP2S'Q>numero>RJMNH2OP2S'Q>numero>R9 echo Mcuadrado9 $> #uando ejecute estas p*ginas de-er* ver un mensaje parecido a. L%age Not <oundL. Luego modi+i)ue el archivo +unciones.js veri+icando el estado de la propipedad status. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ if "conexion1.status=='MM# $ resulta)os.inner2:56 = conexion1.response:ext& . else $ resulta)os.inner2:56=,,& alert"conexion1.status:ext#& . . else if "conexion1.rea)yState==1 TT conexion1.rea)yState==' TT conexion1.rea)yState==L# $ resulta)os.inner2:56 = ,<rocesan)o...,& . . 's decir )ue no solo de-emos veri+icar )ue la propiedad readyState tenga almacenado un ;2 sino )ue la propiedad status retorne un 8GG. 'n este caso por el else solamente -orramos el div donde aparece el te4to H%rocesando...H y mostramos en un alert el te4to del error devuelto por el servidor .

1% - M todo a.ort de* o.jeto #ML/ttp0e1ue!t

'l o-jeto XML ttp?e)uest tiene un m5todo llamado a-ort )ue tiene por o-jetivo detener la cone4in esta-lecida.

51

ay situaciones donde el servidor se encuentra saturado y no puede devolver una peticin. 'n estas situaciones es -ueno mostrar un mensaje al usuario del sitio )ue indi)ue el prl-lema2 adem*s mediante este m5todo (a-ort( cancelamos la peticin. #on+eccionaremos el primer pro-lema planteado en este tutorial. #on+eccionar un pro-lema )ue muestre una lista de hipervnculos con los distintos signos del horscopo y luego al ser presionado no recargue la p*gina completa sino )ue se enve una peticin al servidor y el mismo retorne la in+ormacin de dicho signo2 luego se actualice solo el contenido de un div del archivo !ML. Le agregaremos )ue si en tres segundos el estado de peticin no a +inali,ado mostraremos un mensaje al usuario indicando )ue el servidor se encuentra saturado. %ara simular el e+ecto de saturacin del servidor utili,aremos en el programa % % la llamada a la +uncin sleep )ue tiene por o-jetivo detener una determinada cantidad de segundos la ejecucin del programa % %. Nuestra p*gina !ML es (pagina6.html(. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <h">Signos del hor#scopo.</h"> <div id="menu"> <p><a id="enlace"" href="pagina".php$cod="">%ries</a></p> <p><a id="enlace&" href="pagina".php$cod=&">'auro</a></p> <p><a id="enlace(" href="pagina".php$cod=(">)eminis</a></p> <p><a id="enlace*" href="pagina".php$cod=*">+ancer</a></p> <p><a id="enlace," href="pagina".php$cod=,">-eo</a></p> <p><a id="enlace." href="pagina".php$cod=.">/irgo</a></p> <p><a id="enlace0" href="pagina".php$cod=0">-ibra</a></p> <p><a id="enlace1" href="pagina".php$cod=1">2scorpio</a></p> <p><a id="enlace3" href="pagina".php$cod=3">Sagitario</a></p> <p><a id="enlace"4" href="pagina".php$cod="4">+apricornio</a></p> <p><a id="enlace""" href="pagina".php$cod=""">%cuario</a></p> <p><a id="enlace"&" href="pagina".php$cod="&">Piscis</a></p> </div> <div id="detalles">Seleccione su signo.</div> </bod > </html> 'l archivo estilos.css. 5menu 6 font7famil 8 %rial9 margin8,p!9 : 5menu p 6 margin84p!9

52

padding84p!9 : 5menu a 6 displa 8 block9 padding8 (p!9 ;idth8 ".4p!9 background7color8 5f0f1e19 border7bottom8 "p! solid 5eee9 te!t7align8center9 : 5menu a8link< 5menu a8visited 6 color8 5f449 te!t7decoration8 none9 : 5menu a8hover 6 background7color8 5(.39 color8 5fff9 : 5detalles 6 background7color85ffc9 te!t7align8left9 font7famil 8verdana9 border7;idth849 padding8,p!9 border8 "p! dotted 5fa49 margin8,p!9 : 'l archivo +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob9 for=f="9f<="&9fAA@ 6 ob=document.get2lementB Cd=>enlace>Af@9 add2vent=ob<>click><presion2nlace<false@9 : : function presion2nlace=e@ 6 if =;indo;.event@ 6 ;indo;.event.return/alue=false9 var url=;indo;.event.src2lement.get%ttribute=>href>@9 cargarDoroscopo=url@9 : else

53

if =e@ 6 e.preventEefault=@9 var url=e.target.get%ttribute=>href>@9 cargarDoroscopo=url@9 :

var cone!ion"9 var tiempo9 function cargarDoroscopo=url@ 6 if=url==>>@ 6 return9 : cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=")2'"< url< true@9 cone!ion".send=null@9 tiempo=set'imeout="finEe2spera=@"<(444@9 : function procesar2ventos=@ 6 var detalles = document.get2lementB Cd="detalles"@9 if=cone!ion".read State == *@ 6 clear'imeout=tiempo@9 detalles.innerD'G- = cone!ion".response'e!t9 : else if=cone!ion".read State == "@ 6 detalles.innerD'G- = >+argando...>9 : : function finEe2spera=@ 6 cone!ion".abort=@9 detalles.innerD'G- = >Cntente nuevamente mSs tarde< el servidor esta sobrecargado.>9 : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@

54

6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9

function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n este archivo tenemos )ue cuando comen,amos la cone4in con el servidor iniciali,amos un tempori,ador para )ue si pasan m*s de 9 segundos sin responder el servidor proceda a a-ortar esa cone4in e in+orme al visitante. tiempo=set:imeout""fin3e!spera"#"-LMMM#& La varia-le tiempo guarda una re+erencia al tempori,ador2 con el o-jetivo de poderlo detener si la respuesta demora menos de 9 segundos. if"conexion1.rea)yState == =# $ clear:imeout"tiempo#& )etalles.inner2:56 = conexion1.response:ext& . Aca podemos ver )ue si la peticin +inali,a procedemos a desa-ilitar el tempori,ador llamando a la +uncin clear!imeout. function fin3e!spera"# $ conexion1.a%ort"#& )etalles.inner2:56 = ,+ntente nuevamente mGs tar)e- el servi)or esta so%recarga)o.,& . La +uncin +in$e'spera se ejecutar* si pasan 9 segundos sin +inali,ar el envio de datos del servidor. Aca es donde procedemos a llamar al m5todo a-ort del o-jeto XML ttp?e)uest. Mostramos adem*s un mensaje al usuario del sitio. %or 1ltimo nuestra archivo pagina6.php. <$php sleep=*@9 if =MNH2OP2S'Q>cod>R=="@ echo "<strong>%ries8</strong> Do los cambios serSn fTsicos< personales< de carScter< 'e sentirSs

55

impulsivo tomarSs iniciativas. PerTodo en donde considerarSs unirte a agrupaciones de beneficencia< o de a uda a los demSs."9 if =MNH2OP2S'Q>cod>R==&@ echo "<strong>'auro8</strong> Do los cambios serSn privados< Tntimos. Hecuerdos. % uda< solidaridad. %suntos en lugares de retiro. 'u c#n uge puede aportar buen status a tu vida o apo o a tu profesi#n."9 if =MNH2OP2S'Q>cod>R==(@ echo "<strong>)Uminis8</strong> -os asuntos de ho tienen Iue ver con las amistades< reuniones< actividades con ellos. ETa esperan?ado< ilusiones. Gucha energTa se!ual fuer?a emocional. Eeseos difTciles de controlar."9 if =MNH2OP2S'Q>cod>R==*@ echo "<strong>+ancer8</strong> 2ste dTa la profesi#n las relaciones con superiores con tu madre serSn de importancia. %ctividad en relaci#n a estos temas. Gomentos positivos con compaVeros de trabajo. %ctividad laboral agradable."9 if =MNH2OP2S'Q>cod>R==,@ echo "<strong>-eo8</strong> 2ste dTa los estudios< los viajes< el e!tranjero la espiritualidad serSn lo importante. Pensamientos< religi#n filosofTa tambiUn. /ivencias kSrmicas de la Upoca te vuelven responsable tomando decisiones."9 if =MNH2OP2S'Q>cod>R==.@ echo "<strong>/irgo8</strong> Para este dTa toma importancia tu vida se!ual< tal ve? miedos< temas legales< juicios o herencias. 2!periencias e!traVas. Da karma de prueba durante este perTodo en tu parte psicol#gica< generSndose algunos replanteos."9 if =MNH2OP2S'Q>cod>R==0@ echo "<strong>-ibra8</strong> Do todo asunto tiene Iue ver con tu pareja< tambiUn con socios< con la gente o el pWblico. 2llos serSn lo mSs importante del dTa. )anancias a travUs de especulaciones o del juego. %ctividades vocacionales artTsticas."9 if =MNH2OP2S'Q>cod>R==1@ echo "<strong>2scorpio8</strong> Do todo asunto tiene Iue ver con temas de trabajo de salud. Presta atenci#n a ambos. 2!periencias diversas con compaVeros. Eurante este perTodo tendrSs muchos recursos para ganar dinero."9 if =MNH2OP2S'Q>cod>R==3@ echo "<strong>Sagitario8</strong> Eurante este dTa se vivirSn cambios en relaci#n a los novia?gos o a los hijos. +reatividad< actividad< diversiones salidas. PerTodo de encuentros con personas o situaciones Iue te impresionan."9 if =MNH2OP2S'Q>cod>R=="4@ echo "<strong>+apricornio8</strong> -os cambios del dTa tienen Iue ver con tu hogar< con la convivencia con el padre. %suntos relativos al carScter en la convivencia. 2l karma de

56

responsabilidad de estos momentos te acercarS al mundo de lo desconocido< mucha madure? contacto con el mSs allS."9 if =MNH2OP2S'Q>cod>R==""@ echo "<strong>%cuario8</strong> Do todo asunto tiene Iue ver con el entorno inmediato< hermanos vecinos< con la comunicaci#n< los viajes cortos o traslados frecuentes. 2l hablar trasladarse serS importante ho . Gentalidad e ideas activas."9 if =MNH2OP2S'Q>cod>R=="&@ echo "<strong>Piscis8</strong> Eurante este dTa se vivirSn cambios en la economTa< movimientos en los ingresos< negocios< valores. Gomentos de gran fuer?a decisi#n profesionales< buscarSs el lidera?go."9 $> ay )ue tener en cuenta )ue para poder simular el e+ecto de saturacin del servidor hemos llamado a la +uncin sleep(;( para )ue detenga la ejecucin del programa durante ; segundos2 tiempo su+iciente para )ue el programa JavaScript del navegador a-orte la cone4in e in+orme de la situacin al usuario. %rue-e luego de )uitar la +uncin sleep y comprue-e el +uncionamiento correcto del sitio.

1) - Mo!trar u' ;i< a'imado mie'tra! !e e'(=a' y reci.e' *o! dato! de* !er(idor.
asta ahora mientras se actuali,a la p*gina mostramos un te4to. H%rocesando...H2 es muy com1n utili,ar un gi+ animado )ue represente tal operacin. aremos una serie de p*ginas )ue nos permitan enviar los datos cargados en un +ormulario al servidor en +orma asincrnica y mostraremos un gi+ animado mientras dura el envo de datos. 'l +ormulario solicitar* )ue ingrese el nom-re y sus comentarios. pagina6.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <form action="pagina".php" method="post" id="formulario"> Yombre8<input t pe="te!t" name="nombre" id="nombre" si?e="&4"><br> +omentarios8<br> <te!tarea name="comentarios" id="comentarios" ro;s=""4" cols=",4"></te!tarea><br> <input t pe="submit" value="2nviar" id="enviar"> <span id="resultados"></span><br> <a href="comentarios.t!t">/er resultados</a> </form>

57

</bod > </html> emos dispuesto un elemento span donde insertaremos el gi+ animado. 7tili,amos un span para )ue apare,ca la imagen al lado del -otn su-mit. +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>formulario>@9 add2vent=ref<>submit><enviarEatos<false@9 : function enviarEatos=e@ 6 if =;indo;.event@ ;indo;.event.return/alue=false9 else if =e@ e.preventEefault=@9 enviarKormulario=@9 : function retornarEatos=@ 6 var cad=>>9 var nom=document.get2lementB Cd=>nombre>@.value9 var com=document.get2lementB Cd=>comentarios>@.value9 cad=>nombre=>AencodePHC+omponent=nom@ A>Zcomentarios=>AencodePHC+omponent=com@9 return cad9 : var cone!ion"9 function enviarKormulario=@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>PLS'><>pagina".php>< true@9 cone!ion".setHeIuestDeader="+ontent7' pe"<"application/!7;;;7form7 urlencoded"@9 cone!ion".send=retornarEatos=@@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 if =cone!ion".status==&44@ resultados.innerD'G- = >)racias.>9

58

: else 6 resultados.innerD'G- = ><img src="../cargando.gif">>9 : :

else alert=cone!ion".status'e!t@9

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : Lo nuevo en este pro-lema es. resulta)os.inner2:56 = ,<img src="../cargan)o.gif">,& 's decir insertamos una imagen dentro del elemento span. La imagen se encuentra en el directorio inmediatamente superior a donde se encuentra esta p*gina (por eso disponemos ..& previo al nom-re del archivo( pagina6.html <$php header=>+ontent7' pe8 te!t/html9 charset=CSL711,37">@9 Mar=fopen="comentarios.t!t"<"a"@ or

59

die="Yo se pudo abrir el archivo"@9 fputs=Mar<"Yombre8".MNH2OP2S'Q>nombre>R."[n"@9 fputs=Mar<"+omentarios8".MNH2OP2S'Q>comentarios>R."[n[n"@9 fclose=Mar@9 sleep="@9 $> 'n la p*gina % % gra-amos en un archivo de te4to los datos y mediante la +uncin sleep detenemos la ejecucin del programa en el servidor una determinada cantidad de segundos (esto para poder apreciar en el navegador el gi+2 en la realidad no hay )ue llamar a sleep(

1+ - 3a;i'aci>' co' A"A#

7n lugar donde puede ayudar el uso de AJAX es en la paginacin de datos mientras otro recurso en la p*gina se est* ejecutando. #on+eccionaremos una p*gina )ue muestre un video e inmediatamente en la parte in+erior mostraremos los comentarios del video paginados. Sin utili,ar AJAX estamos o-ligados a recargar completamente la p*gina lo )ue hara imposi-le ver el video y recorrer los comentarios en +orma completa (considerando )ue solo parte de los comentarios est*n en la p*gina( Deamos y e4pli)uemos cada uno de los archivos )ue intervienen. pagina6.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <object ;idth="*&," height="(,4"><param name="movie" value="http8//;;;. outube.com/v/.4og3g;]h"o"></param><param name=";mode" value="transparent"></param><embed src="http8//;;;. outube.com/v/.4og3g;]h"o" t pe="application/!7shock;ave7 flash" ;mode="transparent" ;idth="*&," height="(,4"></embed></object> <br> <div id="detalles"> </div> </bod > </html> 'ste archivo !ML no tiene nada de especial. %odemos decir )ue hemos incrustado un video del sito youtu-e. !am-i5n es importante notar )ue hemos dispuesto un div vaco cuyo id se llama detalles. 's dentro de este div donde iremos mostrando los comentarios en +orma asincrnica. 'l archivo +unciones.js

60

add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 cargarPagina=>pagina&.php>@9 : function presion2nlace=e@ 6 if =;indo;.event@ 6 ;indo;.event.return/alue=false9 var url=;indo;.event.src2lement.get%ttribute=>href>@9 cargarPagina=url@9 : else if =e@ 6 e.preventEefault=@9 var url=e.target.get%ttribute=>href>@9 cargarPagina=url@9 : : var cone!ion"9 function cargarPagina=url@ 6 if=url==>>@ 6 return9 : cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=")2'"< url< true@9 cone!ion".send=null@9

function procesar2ventos=@ 6 var detalles = document.get2lementB Cd="detalles"@9 if=cone!ion".read State == *@ 6 detalles.innerD'G- = cone!ion".response'e!t9 var ob"=document.get2lementB Cd=>sig>@9 if =ob"X=null@ add2vent=ob"<>click><presion2nlace<false@9 var ob&=document.get2lementB Cd=>ant>@9 if =ob&X=null@ add2vent=ob&<>click><presion2nlace<false@9 : else 6

61

detalles.innerD'G- = > : :

>9

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : #omo sa-emos la primer +uncin )ue se ejecuta al terminar de cargar la p*gina es iniciali,ar'ventos. function iniciali ar!ventos"# $ cargar<agina",pagina'.php,#& . $entro de esta +uncin llamamos a la +uncin cargar%agina con el nom-re del archivo php )ue se ejecuta en el servidor y tiene por o-jetivo enviarnos los comentarios. La +uncin cargar%agina es la )ue crea un o-jeto de la clase XML ttp?e)uest. var conexion1& function cargar<agina"url# $ if"url==,,# $ return& .

62

conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& conexion1.open""9!:"- url- true#& conexion1.sen)"null#&

La +uncin procesar'ventos. function procesar!ventos"# $ var )etalles = )ocument.get!lement*y+)"")etalles"#& if"conexion1.rea)yState == =# $ )etalles.inner2:56 = conexion1.response:ext& var o%1=)ocument.get!lement*y+)",sig,#& if "o%1I=null# a))!vent"o%1-,click,-presion!nlace-false#& var o%'=)ocument.get!lement*y+)",ant,#& if "o%'I=null# a))!vent"o%'-,click,-presion!nlace-false#& . else $ )etalles.inner2:56 = , . . ,&

#uando la propiedad readyState tiene un cuatro procedemos a cargar el div LdetallesL con el tro,o de !ML )ue se gener en el servidor. )etalles.inner2:56 = conexion1.response:ext& 0tra cosa muy importante es iniciali,ar el evento clicB para los hipervnculos siguiente y anterior )ue contiene todo listado con paginacin. var o%1=)ocument.get!lement*y+)",sig,#& if "o%1I=null# a))!vent"o%1-,click,-presion!nlace-false#& var o%'=)ocument.get!lement*y+)",ant,#& if "o%'I=null# a))!vent"o%'-,click,-presion!nlace-false#& 's importante notar los i+. 'sto de-ido a )ue cuando no hay m*s registros )ue mostrar no ha-r* un hipervnculo. :magine )ue la primer p*gina no tiene )ue tener un hipervnculo LAnterioresL. %or 1ltimo tenemos el archivo pagina8.php. <$php header=>+ontent7' pe8 te!t/html9 charset=CSL711,37">@9 if =isset=MNH2OP2S'Q>pos>R@@ Minicio=MNH2OP2S'Q>pos>R9 else Minicio=49 Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@

63

or die="Problemas en la seleccion de la base de datos"@9 Mregistros=m sIlNIuer ="select J from comentarios limit Minicio<("< Mcone!ion@ or die="Problemas en el select8".m sIlNerror=@@9 Mimpresos=49 ;hile =Mreg=m sIlNfetchNarra =Mregistros@@ 6 MimpresosAA9 echo "Yombre8".MregQ>nombre>R."<br>"9 echo "Kecha8".MregQ>fecha>R."<br>"9 echo "+omentarios8".MregQ>descripcion>R."<br>"9 echo "<br>"9 : m sIlNclose=Mcone!ion@9 if =Minicio==4@ echo "anteriores "9 else 6 Manterior=Minicio7(9 echo "<a href=["pagina&.php$pos=Manterior[" id=["ant[">%nteriores </a>"9 : if =Mimpresos==(@ 6 Mpro!imo=MinicioA(9 echo "<a href=["pagina&.php$pos=Mpro!imo[" id=["sig[">Siguientes</a>"9 : else echo "siguientes"9 $> Lo primero )ue hacemos es veri+icar si llega el par*metro pos2 como ha-amos visto desde el iniciali,ar eventos indica-amos cargar la p*gina pagina8.php sin especi+icar par*metros. 's decir la varia-le Iincio se iniciali,a con G. Iinicio nos sirve para sa-er a partir de cual registro de-emos rescatar. if "isset"@A7!BC!S:D,pos,E## @inicio=@A7!BC!S:D,pos,E& else @inicio=M& Luego de conectarnos y seleccionar la -ase de datos procedemos a e+ectuar un select utili,ando el limit para rescatar hasta tres registros (es decir p*gina de tamaAo 8(. @registros=mys8lA8uery""select U from comentarios limit @inicio-L"@conexion# or )ie""<ro%lemas en el selectF".mys8lAerror"##& Mediante un Ehile recorremos los registros rescatados y los imprimimos con el comando echo. Adem*s utili,amos un contador para sa-er cuantos registros se imprimieron. @impresos=M& /hile "@reg=mys8lAfetchAarray"@registros## $ @impresos((& echo "Kom%reF".@regD,nom%re,E."<%r>"& echo "SechaF".@regD,fecha,E."<%r>"& echo ">omentariosF".@regD,)escripcion,E."<%r>"& echo "<%r>"&

64

. Si Iinicio vale cero signi+ica )ue no hay registros anteriores2 en caso )ue sea distinto a cero creamos un hipervnculo y pasamos como par*metro el valor de Iinicio menos 9. if "@inicio==M# echo "anteriores "& else $ @anterior=@inicioQL& echo "<a href=V"pagina'.php?pos=@anteriorV" i)=V"antV">1nteriores </a>"& . %ara el hipervnculo de LSiguientesL procedemos de +orma similar2 si Iimpresos vale 9 signi+ica )ue posi-lemente haya m*s registros )ue mostrar2 por lo )ue creamos un hipervnculo y pasamos como par*metro el valor de Iinicio m*s 9. if "@impresos==L# $ @proximo=@inicio(L& echo "<a href=V"pagina'.php?pos=@proximoV" i)=V"sigV">Siguientes</a>"& . else echo "siguientes"&

1, - ?ar;ar u' co'tro* de tipo !e*ect

#on+eccionaremos un pro-lema )ue contenga dos controles de tipo select. 'n el primero almacenaremos una lista de carreras de estudio (LAnalista de SistemasL2L!elecomunicacionesL y LPe-MasterL( #uando se seleccione una carrera enviaremos una peticin al servidor para )ue retorne todas las materias )ue tiene esa carrera y procederemos a la carga del segundo select. 'l archivo !ML es el siguiente (pagina6.html(. <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h">Prueba de cargar un control de tipo select recuperando datos del servidor mediante %J%F</h"> Seleccione la carrera8 <select id="carreras" name="carreras"> <option value="4">Seleccionar....</option> <option value=""">%nalista de sistemas</option> <option value="&">'elecomunicaciones</option> <option value="(">^ebGaster</option> </select><span id="espera"></span><br> Gaterias de la carrera8 <select id="materias" name="materias"> </select><br> </bod >

65

</html> Luego el archivo )ue contiene las +unciones de JavaScript (+unciones.js( es. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var select"=document.get2lementB Cd=>carreras>@9 add2vent=select"<>change><mostrarGaterias<false@9 : var cone!ion"9 function mostrarGaterias=e@ 6 var codigo=document.get2lementB Cd=>carreras>@.value9 if =codigoX=4@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$cod=>Acodigo< true@9 cone!ion".send=null@9 : else 6 var select&=document.get2lementB Cd=>materias>@9 select&.options.length=49 : : function procesar2ventos=@ 6 if=cone!ion".read State == *@ 6 var d=document.get2lementB Cd=>espera>@9 d.innerD'G- = >>9 var !ml = cone!ion".responseFG-9 var pals=!ml.get2lementsB 'agYame=>materia>@9 var select&=document.get2lementB Cd=>materias>@9 select&.options.length=49 for=f=49f<pals.length9fAA@ 6 var op=document.create2lement=>option>@9 var te!to=document.create'e!tYode=palsQfR.first+hild.node/alue@9 op.append+hild=te!to@9 select&.append+hild=op@9 : : else 6 var d=document.get2lementB Cd=>espera>@9 d.innerD'G- = ><img src="../cargando.gif">>9 : :

66

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n la primer +uncin )ue se ejecuta luego de ha-erse cargado completamente la p*gina de+inimos el evento change para el primer select. var select1=)ocument.get!lement*y+)",carreras,#& a))!vent"select1-,change,-mostrar5aterias-false#& 's decir cuando hagamos la seleccin de un item del primer select se dispara la +uncin mostrarMaterias. La +uncin mostrar materias. function mostrar5aterias"e# $ var co)igo=)ocument.get!lement*y+)",carreras,#.value& if "co)igoI=M# $ conexion1=crear4562ttp7e8uest"# conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?co)=,(co)igo- true#& conexion1.sen)"null#& . else $ var select'=)ocument.get!lement*y+)",materias,#& select'.options.length=M& .

67

. ?escata el valor del primer select (es decir donde estan almacenadas los nom-res de carreras. Si est* seleccionada procede a crear un o-jeto de tipo XML ttp?e)uest y le pasa como par*metro el cdigo de la carrera respectiva. 'n caso de seleccionar el primer item del select (contiene el te4to LSeleccionar....L( procedemos a -orrar el contenido del segundo select. La +uncin procesar'ventos. function procesar!ventos"# $ if"conexion1.rea)yState == =# $ var )=)ocument.get!lement*y+)",espera,#& ).inner2:56 = ,,& var xml = conexion1.response456& var pals=xml.get!lements*y:agKame",materia,#& var select'=)ocument.get!lement*y+)",materias,#& select'.options.length=M& for"f=M&f<pals.length&f((# $ var op=)ocument.create!lement",option,#& var texto=)ocument.create:extKo)e"palsDfE.first>hil).no)e0alue#& op.appen)>hil)"texto#& select'.appen)>hil)"op#& . . else $ var )=)ocument.get!lement*y+)",espera,#& ).inner2:56 = ,<img src="../cargan)o.gif">,& . . ?escata el contenido del archivo XML retornado del servidor. var xml = conexion1.response456& #omo sa-emos el archivo XML contiene un conjunto de materias. var pals=xml.get!lements*y:agKame",materia,#& Mediante un +or las rescatamos y las agregamos al segundo select. for"f=M&f<pals.length&f((# $ var op=)ocument.create!lement",option,#& var texto=)ocument.create:extKo)e"palsDfE.first>hil).no)e0alue#& op.appen)>hil)"texto#& select'.appen)>hil)"op#& . Nos )ueda el programa )ue se ejecuta en el servidor para generar el archivo XML con las materias de la carrera seleccionada por el visitante (para +acilitar el pro-lema no hemos dispuesto esta in+ormacin en una -ase de datos.

68

pagina6.php <$php Mcar=MNH2OP2S'Q>cod>R9 if =Mcar=="@ 6 Mmaterias=arra =>Programacion C><>%nalisis Gatematico>< >2structura de las Lrgani?aciones><>2tica Profesional>@9 : if =Mcar==&@ 6 Mmaterias=arra =>Kundamentos de Kisica><>%nalisis Gatematico ">< >Cngles 'ecnico C><>Sistemas de +omunicaciones C >@9 : if =Mcar==(@ 6 Mmaterias=arra =>Cnformatica C><>Gultimedia C><>Bases de Eatos>@9 : M!ml="<$!ml version=["".4["$>[n"9 M!ml.="<materias>[n"9 for=Mf=49Mf<count=Mmaterias@9MfAA@ 6 M!ml.="<materia>".MmateriasQMfR."</materia>[n"9 : M!ml.="</materias>[n"9 header=>+ontent7' pe8 te!t/!ml>@9 echo M!ml9 $> Seg1n el cdigo de carrera se genera un vector Imaterias con todas las materias de esa carrera. Luego generamos la estructura del archivo XML respectivo y disponemos en la ca-ecera de la peticin )ue se trata de un archivo XML. hea)er",>ontentQ:ypeF text/xml,#& echo @xml&

12 - Mo!trar u' too*tip co' dato! recuperado! de* !er(idor e' <orma a!i'cr>'ica
%ara aplicar varios de los conceptos vistos hasta ahora veamos una implementacin de un !ooltip con $ !ML y recuperando la in+ormacin a mostrar del servidor en +orma asincrnica. ?ecordemos )ue un !ooltip es un mensaje )ue aparece so-re un o-jeto cuando disponemos la +lecha del mouse so-re el mismo2 este recuadro nos in+orma el o-jetivo de dicho control. 'l archivo !ML muestra un conjunto de div (cuadrados(2 cuando pasamos la +lecha del mouse so-re el cuadrado aparecer* un mensaje2 este mensaje lo -uscaremos en el servidor. 'l archivo !ML es pagina6.html.

69

<html> <head> <title>Problema</title> <script languaje="javascript" src="funciones.js" t pe="te!t/javascript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <p>2ntre con el mouse al recuadro.</p> <div class="cuadradito" id="c""></div> <div class="cuadradito" id="c&"></div> <div class="cuadradito" id="c("></div> <div class="cuadradito" id="c*"></div> </bod > </html> Luego tenemos el archivo estilos.css. .cuadradito6 background7color8 5f449 height8 ,4p!9 ;idth8 ,4p!9 margin8(p!9 ?7inde!8 7"9 : 5divmensaje 6 background7color8 ello;9 position8 absolute9 visibilit 8 hidden9 padding8 ,p!9 ;idth8&,4p!9 ?7inde!8 "449 : 'l archivo +unciones.js. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var vec=document.get2lementsB 'agYame=>div>@9 for=f=49f<vec.length9fAA@ 6 add2vent=vecQfR<>mouseover><mostrar'ool'ip<false@9 add2vent=vecQfR<>mouseout><ocultar'ool'ip<false@9 add2vent=vecQfR<>mousemove><actuali?ar'ool'ip<false@9 : var ele=document.create2lement=>div>@9 ele.set%ttribute=>id><>divmensaje>@9 vec=document.get2lementsB 'agYame=>bod >@9 vecQ4R.append+hild=ele@9 :

70

function mostrar'ool'ip=e@ 6 var d = document.get2lementB Cd="divmensaje"@9 d.st le.visibilit = "visible"9 if =;indo;.event@ e=;indo;.event9 d.st le.left = e.clientF A document.bod .scroll-eft A ",9 d.st le.top = e.client_ A document.bod .scroll'op A ",9 var ref9 if =;indo;.event@ ref=;indo;.event.src2lement9 else if =e@ ref=e.target9 recuperarServidor'ooltip=ref.get%ttribute=>id>@@9 : function actuali?ar'ool'ip=e@ 6 if =;indo;.event@ e=;indo;.event9 var d = document.get2lementB Cd="divmensaje"@9 d.st le.left = e.clientF A document.bod .scroll-eft A ",9 d.st le.top = e.client_ A document.bod .scroll'op A ",9 : function ocultar'ool'ip=e@ 6 var d = document.get2lementB Cd="divmensaje"@9 d.st le.visibilit = "hidden"9 : var cone!ion"9 function recuperarServidor'ooltip=codigo@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$cod=>Acodigo< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var d = document.get2lementB Cd="divmensaje"@9 d.st le.visibilit = "visible"9 if=cone!ion".read State == *@ 6 d.innerD'G-=cone!ion".response'e!t9 : else 6 d.innerD'G- = ><img src="../cargando.gif">> 9 : :

71

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : %rimero o-tenemos la re+erencia a todos los div de la p*gina. var vec=)ocument.get!lements*y:agKame",)iv,#& $e+inimos las +unciones )ue se disparan para los eventos mouseover2 mouseout y mousemove. for"f=M&f<vec.length&f((# $ a))!vent"vecDfE-,mouseover,-mostrar:ool:ip-false#& a))!vent"vecDfE-,mouseout,-ocultar:ool:ip-false#& a))!vent"vecDfE-,mousemove,-mostrar:ool:ip-false#& . %odemos ver )ue enla,amos la misma +uncin para los eventos mouseover y mousemove2 esto de-ido a )ue en dicha +uncin mostramos el !ooltip en la coordenada actual del mouse. %or otro lado la +uncin iniciali,ar'ventos crea un div y lo aAade al *r-ol de o-jetos2 este nos servir* para mostrar el mensaje. var ele=)ocument.create!lement",)iv,#& ele.set1ttri%ute",i),-,)ivmensaje,#& vec=)ocument.get!lements*y:agKame",%o)y,#& vecDME.appen)>hil)"ele#& La +uncin mostrar!ooltip o-tiene la re+erencia del div )ue muestra el mensaje (hasta este momento est* oculto( y cam-ia la propiedad visi-ility a Lvisi-leL2 luego llama a la +uncin recuperarServidor!ooltip(re+.getAttri-ute(HidH((. function mostrar:ool:ip"e# $

72

var ) = )ocument.get!lement*y+)"")ivmensaje"#& ).style.visi%ility = "visi%le"& if "/in)o/.event# e=/in)o/.event& ).style.left = e.client4 ( )ocument.%o)y.scroll6eft ( 1W& ).style.top = e.clientX ( )ocument.%o)y.scroll:op ( 1W& var ref& if "/in)o/.event# ref=/in)o/.event.src!lement& else if "e# ref=e.target& recuperarServi)or:ooltip"ref.get1ttri%ute",i),##& . La +uncin ocultar!oo!ip solo oculta el div del mensaje. function ocultar:ool:ip"e# $ var ) = )ocument.get!lement*y+)"")ivmensaje"#& ).style.visi%ility = "hi))en"& . La +uncin recuperarServidor!ooltip reci-e el valor del atri-uto id del div donde se encuentra la +lecha del mouse. Se crea un o-jeto de la clase XML ttp?e)uest y se enva el cdigo del div respectivo. var conexion1& function recuperarServi)or:ooltip"co)igo# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?co)=,(co)igo- true#& conexion1.sen)"null#& . Luego la +uncin procesar'ventos carga el div y procede hacerlo visi-le. function procesar!ventos"# $ var ) = )ocument.get!lement*y+)"")ivmensaje"#& ).style.visi%ility = "visi%le"& if"conexion1.rea)yState == =# $ ).inner2:56=conexion1.response:ext& . else $ ).inner2:56 = , ,&

. .

%or 1ltimo el programa del servidor genera un tro,o de !ML dependiendo del cdigo de div enviado (pagina6.php(. <$php if =MNH2OP2S'Q>cod>R==>c">@

73

6 echo "<p>Primer tooltip.</p>"9 echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"9 echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa"9 echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa"9 echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"9 echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>"9 : if =MNH2OP2S'Q>cod>R==>c&>@ 6 echo "<p>Segundo tooltip.</p>"9 echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb"9 echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>"9 : if =MNH2OP2S'Q>cod>R==>c(>@ echo "<p>'ercer tooltip.</p>"9 if =MNH2OP2S'Q>cod>R==>c*>@ echo "<p>+uarto tooltip.</p>"9 $> 'n la realidad estos datos generalmente se rescatan de una -ase de datos2 pero para concentrarnos en lo esencial hemos dejado esto de lado.

16 - Autocomp*etar u' co'tro* de tipo text

:mplementaremos con AJAX el concepto de autocompletar o tam-i5n conocido como lista de sugerencias. A medida )ue tipiemos caracteres dentro de un control de tipo te4t mostraremos un conjunto de pala-ras )ue comien,an con los caracteres ingresados hasta el momento. 'n la realidad los datos se e4traen de una -ase de datos pero para simpli+icar el pro-lema no lo haremos en este caso. Deremos los distintos archivos )ue intervienen para solucionar el pro-lema. pagina6.html <html> <head> <title>Problema</title> <script languaje="javascript" src="funciones.js" t pe="te!t/javascript"></script> <link rel="St leSheet" href="estilos.css" t pe="te!t/css"> </head> <bod > <form action="5"> Cngrese una palabra Iue comience con a8<br> <input t pe="te!t" id="palabra" autocomplete="off"><br>

74

<div id="resultados"></div> <input t pe="submit" value="buscar"> </form> </bod > </html> 'ste p*gina no tiene nada nuevo. 's importante notar )ue hemos dispuesto los elementos para incorporar la hoja de estilo y el archivo donde se encuentran las +unciones en JavaScript. <script languaje="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> La hoja de estilo es estilos.css. 5resultados 6 position8absolute9 background85ff49 : 's importante notar )ue la clase Qresultados hemos de+inido la propiedad position con el valor a-solute. 'sto signi+ica )ue el cuadro donde aparecer* la lista de pala-ras estar* superpuesta a otro contenido de la p*gina. Adem*s el color de +ondo es amarillo. 'l archivo +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>palabra>@9 add2vent=ob<>ke up><presion'ecla<false@9 : var cone!ion"9 function presion'ecla=e@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 palabra=document.get2lementB Cd=>palabra>@.value9 cone!ion".open=>)2'><>pagina".php$palabra=>Apalabra< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 if =cone!ion".status==&44@ 6 var !ml = cone!ion".responseFG-9 var pals=!ml.get2lementsB 'agYame=>palabra>@9 resultados.innerD'G-=>>9

75

for=f=49f<pals.length9fAA@ 6 resultados.innerD'G- = resultados.innerD'G- A palsQfR.first+hild.node/alue A ><br>>9 : : else alert=cone!ion".status'e!t@9 : else 6 resultados.innerD'G- = > >9

: :

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n la +uncin iniciali,ar'ventos. var o%=)ocument.get!lement*y+)",pala%ra,#& a))!vent"o%-,keyup,-presion:ecla-false#& 'nla,amos la +uncin presion!ecla para cuando ocurre el evento Beyup del 1nico control te4t )ue contiene la p*gina. 's decir )ue cada ve, )ue el usuario presione una tecla2 al momento de soltarla se ejecuta la +uncin presion!ecla.

76

La +uncin presion!ecla. var conexion1& function presion:ecla"e# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& pala%ra=)ocument.get!lement*y+)",pala%ra,#.value& conexion1.open",9!:,-,pagina1.php?pala%ra=,(pala%ra- true#& conexion1.sen)"null#& . crea un o-jeto de la clase XML ttp?e)uest2 e4trae el contenido del te4t y procede a e+ectuar la peticin al servidor pasando mediante el m5todo F'! la cadena ingresada hasta ese momento. Luego la +uncin procesar'ventos. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ if "conexion1.status=='MM# $ var xml = conexion1.response456& var pals=xml.get!lements*y:agKame",pala%ra,#& resulta)os.inner2:56=,,& for"f=M&f<pals.length&f((# $ resulta)os.inner2:56 = resulta)os.inner2:56 ( palsDfE.first>hil).no)e0alue ( ,<%r>,& . . else alert"conexion1.status:ext#& . else $ resulta)os.inner2:56 = , . . ,&

#uando la propiedad readyState in+orma )ue llegaron todos los datos y adem*s la propiedad status retorna un 8GG procedemos a rescatar los datos mediante la propiedad responseXML. %or 1ltimo procedemos a mostrar la lista de pala-ras dentro del div resultados. Nos )ueda el archivo )ue se ejecuta en el servidor y nos retorna el archivo XML con la lista de pala-ras (pagina6.php(. <$php Mpal=MNH2OP2S'Q>palabra>R9 Mvec=arra =>alma><>algo><>amo><>aro><>animo><>arbol><>abrir>@9 if =strlen=Mpal@>4@ 6 for=Mf=49Mf<count=Mvec@9MfAA@

77

: M!ml="<$!ml version=["".4["$>[n"9 M!ml.="<palabras>[n"9 if =isset=Mveciguales@@ 6 for=Mf=49Mf<count=Mveciguales@9MfAA@ 6 M!ml.="<palabra>".MvecigualesQMfR."</palabra>[n"9 : : M!ml.="</palabras>[n"9 header=>+ontent7' pe8 te!t/!ml>@9 echo M!ml9 $> Las pala-ras las tenemos en un vector (en la realidad generalmente se e4traen de una -ase de datos(. @vec=array",alma,-,algo,-,amo,-,aro,-,animo,-,ar%ol,-,a%rir,#& Almacenamos en un vector todas las )ue comien,an con la cadena ingresada hasta el momento. for"@f=M&@f<count"@vec#&@f((# $ if "@pal==su%str"@vecD@fE-M-strlen"@pal### @vecigualesDE=@vecD@fE& . Feneramos una cadena cuyo contenido es XML. @xml="<?xml version=V"1.MV"?>Vn"& @xml.="<pala%ras>Vn"& if "isset"@veciguales## $ for"@f=M&@f<count"@veciguales#&@f((# $ @xml.="<pala%ra>".@vecigualesD@fE."</pala%ra>Vn"& . . @xml.="</pala%ras>Vn"& :n+ormamos al navegador )ue enviaremos un archivo XML. hea)er",>ontentQ:ypeF text/xml,#& 3 por 1ltimo indicamos la in+ormacin a enviar. echo @xml&

6 if =Mpal==substr=MvecQMfR<4<strlen=Mpal@@@ MvecigualesQR=MvecQMfR9 :

18 - E'cue'ta co' A"A#

78

#on+eccionaremos un nuevo pro-lema donde podemos utili,ar AJAX. Damos a desarrollar una pe)ueAa aplicacin para hacer una encuesta. La caracterstica principal es )ue cuando el operador haga su seleccin procederemos a enviar la seleccin al servidor y generaremos un gr*+ico en +orma din*mica en el servidor y procederemos a actuali,ar en +orma asincrnica solo una parte de la p*gina. pagina6.php <bod > <h">Cmplementaci#n de una encuesta empleando %J%F.</h"> <form action="pagina".php" method="post" id="formulario"> <fieldset> <h&>Oue lenguaje utili?a para la implementaci#n de pSginas dinSmicas$</h&> <div id="encuesta"> <input t pe="radio" id="radio"" name="radio">PDP<br> <input t pe="radio" id="radio&" name="radio">%SP<br> <input t pe="radio" id="radio(" name="radio">JSP<br> <input t pe="submit" value="2nviar" id="enviar"> </fieldset> </div> </form> </bod > </html> +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>formulario>@9 add2vent=ref<>submit><enviarEatos<false@9 : function enviarEatos=e@ 6 if =;indo;.event@ ;indo;.event.return/alue=false9 else if =e@ e.preventEefault=@9 if =document.get2lementB Cd=>radio">@.checked@ enviarSeleccion="@9 else if =document.get2lementB Cd=>radio&>@.checked@ enviarSeleccion=&@9 else if =document.get2lementB Cd=>radio(>@.checked@ enviarSeleccion=(@9 : var cone!ion"9

79

function enviarSeleccion=cod@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 var aleatorio=Gath.random=@9 cone!ion".open=>)2'><>pagina".php$codigo=>AcodA"Zaleatorio="Aaleatorio< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var encuesta = document.get2lementB Cd="encuesta"@9 if=cone!ion".read State == *@ 6 encuesta.innerD'G- = > : else 6 encuesta.innerD'G- = > >9

: :

>9

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9

80

: %rocedemos a capturar el evento su-mit para enviar los datos en +orma asincrnica. function iniciali ar!ventos"# $ var ref=)ocument.get!lement*y+)",formulario,#& a))!vent"ref-,su%mit,-enviar3atos-false#& . #uando se presiona el -otn su-mit procedemos a llamar a la +uncin enviarSeleccion con el n1mero de opcin seleccionada. function enviar3atos"e# $ if "/in)o/.event# /in)o/.event.return0alue=false& else if "e# e.prevent3efault"#& if ")ocument.get!lement*y+)",ra)io1,#.checke)# enviarSeleccion"1#& else if ")ocument.get!lement*y+)",ra)io',#.checke)# enviarSeleccion"'#& else if ")ocument.get!lement*y+)",ra)ioL,#.checke)# enviarSeleccion"L#& . La +uncin enviarSeleccion procede a crear un o-jeto de la clase XML ttp?e)uest y enva el n1mero de opcin seleccionada de la encuesta y un valor aleatorio para )ue no rescate el navegador una p*gina )ue se encuentre en la cache de la computadora. var conexion1& function enviarSeleccion"co)# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& var aleatorio=5ath.ran)om"#& conexion1.open",9!:,-,pagina1.php? co)igo=,(co)("Jaleatorio="(aleatorio- true#& conexion1.sen)"null#& . La +uncin procesar'ventos carga la imagen generada din*micamente en el servidor. 'sto se hace cuando el o-jeto XML ttp?e)uest nos in+orma )ue los datos +ueron generados completamente. function procesar!ventos"# $ var encuesta = )ocument.get!lement*y+)""encuesta"#& if"conexion1.rea)yState == =# $ encuesta.inner2:56 = , . else ,&

81

$ encuesta.inner2:56 = , ,&

. .

%or 1ltimo el archivo pagina6.php <$php Mpreg=MNH2OP2S'Q>codigo>R9 Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@ or die="Problemas en la seleccion de la base de datos"@9 if =Mpreg=="@ Mregistros=m sIlNIuer ="update encuesta set pregunta"=pregunta"A" ;here codigo=""<Mcone!ion@ or die="Problemas en el select8".m sIlNerror=@@9 if =Mpreg==&@ Mregistros=m sIlNIuer ="update encuesta set pregunta&=pregunta&A" ;here codigo=""<Mcone!ion@ or die="Problemas en el select8".m sIlNerror=@@9 if =Mpreg==(@ Mregistros=m sIlNIuer ="update encuesta set pregunta(=pregunta(A" ;here codigo=""<Mcone!ion@ or die="Problemas en el select8".m sIlNerror=@@9 Mregistro=m sIlNIuer ="select J from encuesta ;here codigo=""<Mcone!ion@ or die=m sIlNerror=@@9 Mreg=m sIlNfetchNarra =Mregistro@9 Mbarra=ne; Barra=,44<(44@9 Mbarra7>fijarprofundidad=&4@9 Mbarra7>sumar=MregQ>pregunta">R<"PDP"@9 Mbarra7>sumar=MregQ>pregunta&>R<"%SP"@9 Mbarra7>sumar=MregQ>pregunta(>R<"JSP"@9 Mbarra7>graficar=@9 class Barra 6 var Mancho9 var Malto9 var Mimagen9 var Mprofundidad9 var Mcolorfondo9 var Mvectorcolorfondo9 var Mcolorbarra9 var Mvectorcolorbarra9 var Mcolorvalores9 //almacena los valores los titulos de cada barra var Mdatos9 function sumar=Mvalor<Mtitulo@ 6 Mindice=count=Mthis7>datos@9 Mthis7>datosQMindiceRQ>valor>R=Mvalor9 Mthis7>datosQMindiceRQ>titulo>R=Mtitulo9

82

: function fijarcolorfondo=Mrojo<Mverde<Ma?ul@ 6 Mthis7>vectorcolorfondoQ4R=Mrojo9 Mthis7>vectorcolorfondoQ"R=Mverde9 Mthis7>vectorcolorfondoQ&R=Ma?ul9 Mthis7>colorfondo=Cmage+olor%llocate =Mthis7>imagen<Mthis7 >vectorcolorfondoQ4R< Mthis7>vectorcolorfondoQ"R<Mthis7>vectorcolorfondoQ&R@9 CmageKill=Mthis7>imagen<4<4<Mthis7>colorfondo@9 : function fijarcolorbarra=Mrojo<Mverde<Ma?ul@ 6 Mthis7>vectorcolorbarraQ4R=Mrojo9 Mthis7>vectorcolorbarraQ"R=Mverde9 Mthis7>vectorcolorbarraQ&R=Ma?ul9 Mthis7>colorbarra=Cmage+olor%llocate=Mthis7>imagen<Mthis7 >vectorcolorbarraQ4R< Mthis7>vectorcolorbarraQ"R<Mthis7>vectorcolorbarraQ&R@9 : function fijarprofundidad=Mprofundidad@ 6 Mthis7>profundidad=Mprofundidad9 : //Getodo privado function ma or=@ 6 Mprimera=true9 Mma =49 foreach =Mthis7>datos as Mval@ 6 if =Mprimera@ 6 Mprimera=false9 Mma =MvalQ>valor>R9 : if =MvalQ>valor>R>Mma @ Mma =MvalQ>valor>R9 : return Mma 9 : function graficarsombrai?Iuierda=Mcolumna<M "<M &@ 6 Mrojo=Mthis7>vectorcolorbarraQ4R7349 if =Mrojo<4@ Mrojo=49 Mverde=Mthis7>vectorcolorbarraQ"R7349 if =Mverde<4@ Mverde=49 Ma?ul=Mthis7>vectorcolorbarraQ&R7349 if =Ma?ul<4@ Ma?ul=49 Mcolorsombra=image+olor%llocate=Mthis7>imagen<Mrojo<Mverde<Ma?ul@9

83

MpuntosQR=Mcolumna9 MpuntosQR=M "9 MpuntosQR=Mcolumna9 MpuntosQR=M &9 MpuntosQR=McolumnaAMthis7>profundidad9 MpuntosQR=M &7Mthis7>profundidad9 MpuntosQR=McolumnaAMthis7>profundidad9 MpuntosQR=M "7Mthis7>profundidad9 imagefilledpol gon=Mthis7>imagen<Mpuntos<*<Mcolorsombra@9 Mcolorbordebarra=image+olor%llocate=Mthis7>imagen<4<4<4@9 imagepol gon=Mthis7>imagen<Mpuntos<*<Mcolorbordebarra@9 : function graficarsombrasuperior=Mcolumna<M "<Manchobarra@ 6 Mrojo=Mthis7>vectorcolorbarraQ4R7*49 if =Mrojo<4@ Mrojo=49 Mverde=Mthis7>vectorcolorbarraQ"R7*49 if =Mverde<4@ Mverde=49 Ma?ul=Mthis7>vectorcolorbarraQ&R7*49 if =Ma?ul<4@ Ma?ul=49 Mcolorsombra=image+olor%llocate=Mthis7>imagen<Mrojo<Mverde<Ma?ul@9 MpuntosQR=Mcolumna9 MpuntosQR=M "9 MpuntosQR=McolumnaAManchobarra9 MpuntosQR=M "9 MpuntosQR=McolumnaAManchobarraAMthis7>profundidad9 MpuntosQR=M "7Mthis7>profundidad9 MpuntosQR=McolumnaAMthis7>profundidad9 MpuntosQR=M "7Mthis7>profundidad9 imagefilledpol gon=Mthis7>imagen<Mpuntos<*<Mcolorsombra@9 Mcolorbordebarra=image+olor%llocate=Mthis7>imagen<4<4<4@9 imagepol gon=Mthis7>imagen<Mpuntos<*<Mcolorbordebarra@9 : function Barra=Mancho<Malto@ 6 Mthis7>ancho=Mancho9 Mthis7>alto=Malto9 Mthis7>imagen=image+reate=Mthis7>ancho<Mthis7>alto@9 Mthis7>vectorcolorfondoQ4R=49 Mthis7>vectorcolorfondoQ"R=49 Mthis7>vectorcolorfondoQ&R=&,,9 Mthis7>colorfondo=Cmage+olor%llocate=Mthis7>imagen<Mthis7 >vectorcolorfondoQ4R< Mthis7>vectorcolorfondoQ"R<Mthis7>vectorcolorfondoQ&R@9 CmageKill=Mthis7>imagen<4<4<Mthis7>colorfondo@9 Mthis7>vectorcolorbarraQ4R=&,,9 Mthis7>vectorcolorbarraQ"R=&,,9 Mthis7>vectorcolorbarraQ&R=49 Mthis7>colorbarra=Cmage+olor%llocate=Mthis7>imagen<Mthis7 >vectorcolorbarraQ4R< Mthis7>vectorcolorbarraQ"R<Mthis7>vectorcolorbarraQ&R@9

84

: function graficar=@ 6 Mma =Mthis7>ma or=@9 Manchobarra==Mthis7>ancho7""4@/count=Mthis7>datos@9 M!"="49 M "=Mthis7>alto7,49 Mcolorbordebarra=image+olor%llocate=Mthis7>imagen<4<4<4@9 foreach=Mthis7>datos as Mreg@ 6 Maltura==MregQ>valor>R/Mma @J=Mthis7>alto714@9 imagefilledrectangle=Mthis7>imagen<M!"<M "7Maltura<M!"AManchobarra< M "<Mthis7>colorbarra@9 imagerectangle=Mthis7>imagen<M!"<M "7Maltura<M!"AManchobarra< M "<Mcolorbordebarra@9 CmageString=Mthis7>imagen<&<M!"A(<M "<MregQ>titulo>R<Mthis7>colorbarra@9 Mthis7>graficarsombrai?Iuierda=M!"AManchobarra<M "7Maltura<M "@9 Mthis7>graficarsombrasuperior=M!"<M "7Maltura<Manchobarra@9 CmageString=Mthis7>imagen<&<M!"A(<M "7MalturaA,<MregQ>valor>R<Mthis7 >colorvalores@9 M!"=M!"AManchobarraA="44/count=Mthis7>datos@@9 : Deader ="+ontent7t pe8 image/png"@9 CmagePY) =Mthis7>imagen<"encuesta.png"@9 CmageEestro =Mthis7>imagen@9 : : $> No anali,aremos mucho este archivo ya )ue no es o-jetivo del curso el aprendi,aje de % %. /*sicamente la clase /arra nos permite crear un gr*+ico de -arra creando un o-jeto de dicha clase y pasando los datos respectivos. @%arra=ne/ *arra"WMM-LMM#& @%arraQ>fijarprofun)i)a)"'M#& @%arraQ>sumar"@regD,pregunta1,E-"<2<"#& @%arraQ>sumar"@regD,pregunta',E-"1S<"#& @%arraQ>sumar"@regD,preguntaL,E-"JS<"#& @%arraQ>graficar"#&

Mthis7>profundidad="49 Mthis7>colorvalores=Cmage+olor%llocate=Mthis7>imagen<4<4<4@9

19 - Qu e! "7-N$
JS0N es el acrnimo de JavaScript 0-ject Notation. JS0N es un +ormato alternativo de envo y recepcin de datos2 es decir rempla,a a XML o el envo de te4to plano. 'ste +ormato de datos es m*s liviano )ue XML.

85

Deremos )ue hace el cdigo m*s sencillo ya )ue utili,a el cdigo JavaScript como modelo de datos. !enemos )ue repasar un poco como se de+inen los array literales y o-jetos literales en JavaScript2 ya )ue ser*n las estructuras para la transmisin de datos. var usuario=D,juan,-'RE& #omo vemos los elementos de un array literal se encierran entre corchetes y los valores contenidos van separados por coma. #uando de+inimos un array literal no le indicamos a cada elemento de )ue tipo se trata2 podemos almacenar cadenas (entre comillas(2 n1meros2 valores lgicos (true2+alse( y el valor null. %ara acceder a los elementos de un array literal lo hacemos por su nom-re y entre corchetes indicamos )ue elementos )ueremos acceder. alert"usuarioDME#& //+mprimimos el primer elemento )el array alert"usuarioD1E#& //+mprimimos el segun)o elemento )el array Deamos como de+inimos los o-jetos literales en JavaScript. var persona=$ ,nom%re,F,juan,,clave,F,xy ,,e)a),F'R .& Los o-jetos literales se de+inen por medio de pares Lnom-reL.LvalorL !odo o-jeto literal tiene un nom-re2 en el ejemplo le llam5 persona. 7n o-jeto literal contiene una serie de propiedades con sus respectivos valores. !odas las propiedades del o-jetos se encuentran encerradas entre llaves. Luego cada propiedad y valor se las separa por dos puntos. 3 por 1ltimo cada propiedad se las separa de las otras propiedades por medio de la coma. %ara acceder a las propiedades del o-jeto literal lo podemos hacer de dos +ormas. alert"persona.nom%re#& o%jeto persona. //+mprime el valor )e la propie)a) nom%re )el

La segunda +orma es indicando la propiedad entre corchetes. alert"personaD,nom%re,E#& Luego se pueden com-inar o-jetos literales y array literales. var persona=$

,nom%re,F,juan,,e)a),F'',estu)ios,FD,primario,-,secun)ario,E

.& #omo podemos ver podemos crear estructuras de datos complejas com-inando o-jetos literales y array literales.

86

Luego para acceder a los distintos elementos tenemos. alert"persona.nom%re#& alert"persona.estu)iosDME#& alert"persona.estu)iosD1E#& La sinta4is de JS0N di+iere levemente de lo visto anteriormente. $

,nom%re,F,juan,,e)a),F'',estu)ios,FD,primario,-,secun)ario,E

. #omo podemos ver en la sinta4is JS0N no aparecen varia-les2 sino directamente indicamos entre llaves las propiedades y sus valores. !am-ien hemos eliminado el punto y como luego de la llave +inal. 'l resto es igual. Ahora veamos la di+erencia entre JS0N y XML utili,ando este ejemplo. XML. <persona> <nom%re>juan</nom%re> <e)a)>''</e)a)> <estu)ios> <estu)io>primario</estu)io> <estu)io>secun)ario</estu)io> </estu)ios> </persona> 3 como vimos en JS0N. $ ,nom%re,F,juan,,e)a),F'',estu)ios,FD,primario,-,secun)ario,E

%odemos ver )ue es mucho m*s directa la de+inicin de esta estructura (de todos modos cuando la estructura a representar es muy compleja XML sigue siendo la opcin principal( #omo podemos ver si tenemos )ue transmitir estas estructuras por internet la notacin JS0N es m*s liviana. 0tra ventaja es como recuperamos los datos en el navegador2 como vimos si se trata de un archivo XML llamamos al m5todo re)uestXML y luego accedemos por medio del $0M 'n cam-io con JS0N al llegar el archivo procedemos a generar una varia-le en JavaScript )ue recree el o-jeto literal2 esto mediante la +uncin eval. var persona=eval",", ( conexion1.response:ext ( ,#,#& 3a veremos en el pr4imo concepto como recuperar los datos del servidor mediante el o-jeto XML ttp?e)uest

87

%ara pro-ar y generar un o-jeto a partir de una notacin JS0N haremos el siguiente pro-lema. #on+eccionar una p*gina )ue contenga un -otn. Al ser presionado evaluar un string )ue almacena un o-jeto literal con notacin JS0N. 'l o-jeto literal de-e representar las caractersticas de una computadora (procesador2 memoria ram2 capacidad de cada disco duro( Mostrar los datos mediante el m5todo alert ay )ue tener -ien en cuenta )ue en este pro-lema no hay nada de AJAX ya )ue no nos comunicaremos con el servidor para el envo de datos. pagina6.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h">2valuar una variable Iue contiene notaci#n JSLY.</h"> <input t pe="button" id="boton"" value="/er"> </bod > </html> +unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9 : function presionBoton=e@ 6 var cadena="6 >microprocesador>8>pentium><" A " >memoria>8"4&*<" A " >discos>8Q14<&,4R" A " :"9 var maIuina=eval=>=> A cadena A >@>@9 alert=>microprocesador8>AmaIuina.microprocesador@9 alert=>Gemoria ram8>AmaIuina.memoria@9 alert=>+apacidad disco "8>AmaIuina.discosQ4R@9 alert=>+apacidad disco &8>AmaIuina.discosQ"R@9 : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9

88

return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9

#uando se presiona el -otn se ejecuta la +uncin presion/oton. 'n esta lo primero )ue hacemos de+inimos un string )ue contiene un o-jeto con notacin JS0N. var ca)ena="$ ,microprocesa)or,F,pentium,-" ( " ,memoria,F1M'=-" ( " ,)iscos,FDPM-'WME" ( " ."& Seguidamente pasamos a evaluar este string. var ma8uina=eval",", ( ca)ena ( ,#,#& Ahora si tenemos un o-jeto JavaScript. 'sto se logra utili,ando la +uncin eval de JavaScript. 's importante )ue siempre al string )ue contiene la notacin JS0N le de-emos anteceder el par5ntesis de apertura y +inali,arlo con el par5ntesis de cerrado (esto para )ue JavaScript no tenga pro-lemas con las llaves de apertura y cierre de la notacin JS0N. 7na ve, )ue tenemos el o-jeto en JavaScript procedemos a acceder a sus atri-utos. alert",microprocesa)orF,(ma8uina.microprocesa)or#& alert",5emoria ramF,(ma8uina.memoria#& alert",>apaci)a) )isco 1F,(ma8uina.)iscosDME#& alert",>apaci)a) )isco 'F,(ma8uina.)iscosD1E#&

%: - 0ecuperar dato! de* !er(idor e' <ormato "7-N

%ara ver como recuperamos datos del servidor en +ormato JS0N en lugar de te4to plano o XML implementaremos el siguiente ejemplo. #on+eccionar un sitio )ue permita ingresar el documento de una persona y nos retorne su apellido2 nom-re y lugar donde de-e votar. %ara reducir el tamaAo del pro-lema y concentrarnos en la +orma de transmisin de datos y su posterior recuperacin en el navegador no implementaremos una -ase de datos en el servidor (en la realidad los datos de los votantes se encontraran en una ta-la( 'l archivo pagina6.html. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script>

89

</head> <bod > Cngrese dni =solo e!isten los valores "<& (@8<input t pe="te!t" name="dni" id="dni" si?e=""4"><br> <input t pe="button" value="2nviar" id="boton""> <div id="resultados"></div> </bod > </html> 'l archivo html no tiene nada especial. $e+inimos el div resultados para mostrar posteriormente los datos devueltos por el servidor. 'l archivo +unciones.js. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9 : function presionBoton=e@ 6 var ob=document.get2lementB Cd=>dni>@9 recuperarEatos=ob.value@9 : var cone!ion"9 function recuperarEatos=dni@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$dni=>Adni< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 var datos=eval="=" A cone!ion".response'e!t A "@"@9 var salida = "%pellido8"Adatos.apellidoA"<br>"9 salida=salidaA"Yombre8"Adatos.nombreA"<br>"9 salida=salidaA"Eirecci#n donde debe votar8"Adatos.direccion9 resultados.innerD'G- = salida9 : else 6 : : resultados.innerD'G- = "+argando..."9

90

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : #uando se presiona el -otn enviar se ejecuta la +uncin. function presion*oton"e# $ var o%=)ocument.get!lement*y+)",)ni,#& recuperar3atos"o%.value#& . 'n esta +uncin recuperamos el documento ingresado por el operador y llamamos a la +uncin recuperar$atos pasando como par*metro el dni de la persona. La +uncin. var conexion1& function recuperar3atos")ni# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?)ni=,()ni- true#& conexion1.sen)"null#& . crea un o-jeto de la clase XML ttp?e)uest y procede a reali,ar una comunicacin asincrnica con el servidor pasando por par*metro F'! el dni ingresado por el visitante al sitio.

91

Luego la +uncin procesar'ventos se ejecuta para cada uno de los estados de la peticin. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ var )atos=eval"""" ( conexion1.response:ext ( "#"#& var sali)a = "1pelli)oF"()atos.apelli)o("<%r>"& sali)a=sali)a("Kom%reF"()atos.nom%re("<%r>"& sali)a=sali)a("3irecciYn )on)e )e%e votarF"()atos.)ireccion& resulta)os.inner2:56 = sali)a& . else $ resulta)os.inner2:56 = ">argan)o..."& . . #uando la propiedad readyState tiene almacenado un ; procedemos a recuperar el string devuelto por la cone4in como veremos un poco m*s a-ajo se trata de un string )ue almacena los datos en +ormato JS0N. %rocedemos mediante la +uncin eval a generar un o-jeto en JavaScript y posteriormente mostramos los datos accediendo a los atri-utos de dicho o-jeto. #omo podemos o-servar es muy +*cil acceder luego a la in+ormacin devuelta por el servidor. %or 1ltimo el archivo pagina6.php. <$php header=>+ontent7' pe8 te!t/t!t9 charset=CSL711,37">@9 Mnombre=>>9 Mapellido=>>9 Mdireccion=>>9 if =MNH2OP2S'Q>dni>R==>">@ 6 Mnombre=>Juan>9 Mapellido=>Hodrigue?>9 Mdireccion=>+olon "&(>9 : if =MNH2OP2S'Q>dni>R==>&>@ 6 Mnombre=>%na>9 Mapellido=>Galdonado>9 Mdireccion=>-ima &*,>9 : if =MNH2OP2S'Q>dni>R==>(>@ 6 Mnombre=>laura>9 Mapellido=>Pue rredon>9 Mdireccion=>-aprida 01,>9 : echo "6 >nombre>8>Mnombre>< >apellido>8>Mapellido>< >direccion>8>Mdireccion>

92

:"9 $> #omo dijimos para concentrarnos en JS0N no e4traemos la in+ormacin de una -ase de datos. %or medio de tres i+ veri+icamos )ue n1mero de documento se trata y procedemos a iniciali,ar tres varia-les. Lo m*s interesante es como procedemos a generar la salida con +ormato JS0N. echo "$ ,nom%re,F,@nom%re,,apelli)o,F,@apelli)o,,)ireccion,F,@)ireccion, ."& ?ecordemos )ue todo o-jeto JS0N de-e ir entre llaves y cada atri-uto le de-e seguir el caracter dos puntos y el valor de dicho atri-uto.

%1 - De 3/3 a "7-N @uti*iAa'do *a *i.rer=a "7-N.phpB

'n el concepto anterior ha-amos visto como generar un archivo con +ormato JS0N en el servidor y envi*rselo al cliente (navegador(. 'sta metodologa de generar el string con +ormato JS0N puede ser muy engorroso cuando las estructuras comien,an a ser m*s complejas. Se cuenta con una clase )ue trans+orma vectores y clases de % % a +ormato JS0N en +orma autom*tica. %ara ver esta li-rera llamada JS0N.php con+eccionaremos un pro-lema )ue rescate un conjunto de registros de una ta-la MySKL y seguidamente los trans+orme en +ormato JS0N. 'n el navegador mediante eval generaremos un vector JavaScript y procederemos a mostrarlo. #omo podemos o-servar mientras sea m*s compleja la estructura a generar2 m*s propenso a errores ser* la generacin. 'l pro-lema )ue resolveremos es el siguiente. Se tiene una ta-la llamada Lperi+ericosL donde almacenamos el cdigo2 descripcin y precio de distintos peri+5ricos de computadoras. Fenerar un archivo JS0N en el servidor y proceder a mostrar los datos de los peri+5ricos en el navegador. pagina6.html. <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h&>Hecuperar datos del servidor almacenados en una base de datos en formato JSLY utili?ando la librerTa JSLY.php</h&> <br> <input t pe="button" value="Hecuperar" id="boton""> <div id="resultados"></div>

93

</bod > </html> 'ste archivo no tiene nada nuevo. Lo m*s interesante y nuevo se presenta en el archivo pagina6.php. <$php Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@ or die="Problemas en la seleccion de la base de datos"@9 Mregistros=m sIlNIuer ="select codigo<descripcion<precio from perifericos"< Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 ;hile =Mreg=m sIlNfetchNarra =Mregistros@@ 6 MvecQR=Mreg9 : reIuire=>../JSLY.php>@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>encode=Mvec@9 echo Mcad9 $>

Lo primero )ue hacemos es guardar todos los registros de la ta-la peri+ericos en el vector llamado Ivec2 esto mediante el ciclo. /hile "@reg=mys8lAfetchAarray"@registros## $ @vecDE=@reg& . Ahora de-emos incluir el archivo llamado LJS0N.phpL y crear un o-jeto de la clase servicesJJS0N. re8uire",../JS;K.php,#& @json=ne/ ServicesAJS;K"#& 'l archivo yo lo almacen5 en una carpeta )ue se encuentra inmediatamente en el nivel superior2 por eso la sinta4is ..& Luego el m5todo )ue autom*ticamente convierte el vector % % en +ormato JS0N es. @ca)=@jsonQ>enco)e"@vec#& Ahora ya tenemos en la varia-le Icad el contenido del vector en +ormato JS0N. %rocedemos seguidamente a la salida de esta cadena. echo @ca)&

94

!engamos en cuenta )ue las cuatro lneas presentadas anteriormente nos evitan tener )ue generar la cadena en +ormato JS0N en +orma manual como podemos ver seguidamente. @ca)=,D,& /hile "@reg=mys8lAfetchAarray"@registros## $ @ca).="$,co)igo,F,".@regD,co)igo,E.",-"& @ca).=",)escripcion,F,".@regD,)escripcion,E.",-"& @ca).=",precio,F,".@regD,precio,E.",.-"& . @ca).=,E,& echo @ca)& 'ste metodologa es engorrosa y propensa a errores. Luego el archivo JavaScript es. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9 : var cone!ion"9 function presionBoton=e@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php>< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 alert=>+adena en formato JSLY8 >Acone!ion".response'e!t@9 var datos=eval="=" A cone!ion".response'e!t A "@"@9 var salida=>>9 for=f=49f<datos.length9fAA@ 6 salida A= >+odigo8>AdatosQfR.codigoA"<br>"9 salida A= >Eescripcion8>AdatosQfR.descripcionA"<br>"9 salida A= >Precio8>AdatosQfR.precioA"<br><br>"9 : resultados.innerD'G- = salida9

: else 6 resultados.innerD'G- = "+argando..."9 : :

95

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : La +uncin procesar'ventos rescata los datos envidos por el servidor y los muestra inicialmente tal como llegan en una ventana mediante el comando alert. alert",>a)ena en formato JS;KF ,(conexion1.response:ext#&

%odemos ver )ue se trata de un string JS0N correctamente +ormado. Ahora s mediante el comando eval procedemos a generar un vector JavaScript y mostramos los datos dentro de un div. var )atos=eval"""" ( conexion1.response:ext ( "#"#& var sali)a=,,& for"f=M&f<)atos.length&f((# $ sali)a (= ,>o)igoF,()atosDfE.co)igo("<%r>"& sali)a (= ,3escripcionF,()atosDfE.)escripcion("<%r>"& sali)a (= ,<recioF,()atosDfE.precio("<%r><%r>"& . resulta)os.inner2:56 = sali)a& %ara este pro-lema posi-lemente es m*s +*cil generar un tro,o de !ML en el servidor y en el navegador solo mostrarlo2 pero hay muchas situaciones )ue necesitamos recuperar una estructura de datos del servidor y proceder a su procesamiento en el navegador.

96

%% - De "a(a7cript a "7-N @uti*iAa'do *a *i.rer=a j!o'.j!B

Ahora veremos otra li-rera2 pero esta li-rera es en JavaScript2 la misma nos permite convertir un o-jeto o array de JavaScript en +ormato JS0N. As de modo inverso nos permite generar un o-jeto o array JavaScript a partir de un string JS0N y esto de modo seguro. 'sta li-rera se encuentra en json.js Solo de-emos descargarla y agregarla en nuestra p*gina. %ara poder pro-arlos en este sitio yo la incorpor5 en una carpeta )ue se encuentra inmediatamente en el nivel superior donde se almacenan las p*ginas )ue est* pro-ando. 's decir )ue para hacer uso en estos ejemplos de-emos tipear. <script src="../json.js" language="JavaScript"></script> La primera +uncin )ue veremos es la )ue nos permite convertir un o-jeto o array a una cadena JS0N. %ara esto implementaremos un pe)ueAo ejercicio donde al presionar un -otn de+inimos un o-jeto )ue almacena tres atri-utos2 de los cuales uno es una array. Luego convertimos dicho o-jeto a +ormato JS0N con un m5todo contenido en la li-rera json.js. pagina6.html. <html> <head> <title>Problema</title> <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h&>+onvertir un objeto JavaScript a formato JSLY</h&> <input t pe="button" value="+onvertir" id="boton""> </bod > </html> 's importante notar )ue hemos insertado dos archivos e4ternos codi+icados en JavaScript. <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> Nuestro archivo con las +unciones en JavaScript (+unciones.js(. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>boton">@9 add2vent=ref<>click><mostrar+onversion<false@9 : function mostrar+onversion=e@ 6 var obj=6 nombre8>juan><

97

edad8&,< sueldos8Q"&44<"044<"334R :9 var cadena=obj.toJSLYString=@9 alert=cadena@9

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : Lo m*s importante lo podemos encontrar en la +uncin mostrar#onversion. function mostrar>onversion"e# $ var o%j=$ nom%reF,juan,e)a)F'Wsuel)osFD1'MM-1OMM-1ZZME .& var ca)ena=o%j.toJS;KString"#& alert"ca)ena#& . %rimero de+inimos un o-jeto en JavaScript. var o%j=$ nom%reF,juan,e)a)F'Wsuel)osFD1'MM-1OMM-1ZZME .& 'l o-jeto o-j contiene tres atri-utos (nom-re2edad y sueldo(2 de los cuales el 1ltimo es un array con tres elementos. Luego simplemente llamando al m5todo toJS0NString retorna un string con el contendio del o-jeto pero codi+icado en +ormato JS0N.

98

var ca)ena=o%j.toJS;KString"#& alert"ca)ena#&

%) - De "7-N a "a(a7cript @uti*iAa'do *a *i.rer=a j!o'.j!B

a-amos visto )ue para convertir una cadena )ue contiene in+ormacin en +ormato JS0N solo de-amos utili,ar la +uncin eval de JavaScript. 'sto lo podemos seguir utili,ando siempre y cuando la in+ormacin del archivo JS0N provenga de nuestro sitio. !engamos en cuenta si el archivo JS0N proviene de un sitio )ue no tenemos la seguridad )ue nos enve solo o-jetos y array literales2 nuestro sitio est* en peligro2 ya )ue eval tam-i5n ejecutar* +unciones en JavaScript si el archivo JS0N las tiene. ay una solucin para el pro-lema )ue hemos planteado y se encuentra en utili,ar un m5todo contenido en la li-rera json.js )ue veri+ica )ue el archivo JS0N solo contenga datos. a-amos resuelto este pro-lema con el siguiente cdigo. var )atos=eval"""" ( conexion1.response:ext ( "#"#& Si utili,amos la li-rera json.js de-emos hacer. var )atos=conexion1.response:ext.parseJS;K"#& ?esolveremos el mismo pro-lema so-re la -ase de datos de peri+5ricos. Luego en el navegador emplearemos la li-rera json.js para convertir el archivo JS0N a JavaScript. pagina6.html <html> <head> <title>Problema</title> <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h&>Hecuperar datos del servidor almacenados en una base de datos en formato JSLY utili?ando la librerTa JSLY.php en el cliente utili?ando la librerTa json.js</h&> <br> <input t pe="button" value="Hecuperar" id="boton""> <div id="resultados"></div> </bod > </html> 's importante importar la li-rera json.js. <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script>

99

+unciones.js add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ob=document.get2lementB Cd=>boton">@9 add2vent=ob<>click><presionBoton<false@9 : var cone!ion"9 function presionBoton=e@ 6 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php>< true@9 cone!ion".send=null@9 : function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 alert=>+adena en formato JSLY8 >Acone!ion".response'e!t@9 var datos=cone!ion".response'e!t.parseJSLY=@9 var salida=>>9 for=f=49f<datos.length9fAA@ 6 salida A= >+odigo8>AdatosQfR.codigoA"<br>"9 salida A= >Eescripcion8>AdatosQfR.descripcionA"<br>"9 salida A= >Precio8>AdatosQfR.precioA"<br><br>"9 : resultados.innerD'G- = salida9

: else 6 resultados.innerD'G- = "+argando..."9 : :

//JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6

100

: else return false9 :

elemento.add2vent-istener=nomevento<funcion<captura@9 return true9

function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : 'n la +uncin procesar eventos de-emos llamar al m5todo parseJS0N. var )atos=conexion1.response:ext.parseJS;K"#& 'sto lo podemos hacer ya )ue la li-rera aAade esta +uncionalidad a los string. el archivo pagina6.php no tiene cam-ios. <$php Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@ or die="Problemas en la seleccion de la base de datos"@9 Mregistros=m sIlNIuer ="select codigo<descripcion<precio from perifericos"< Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 ;hile =Mreg=m sIlNfetchNarra =Mregistros@@ 6 MvecQR=Mreg9 : reIuire=>../JSLY.php>@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>encode=Mvec@9 echo Mcad9 $>

%+ - De "7-N a 3/3 @uti*iAa'do *a *i.rer=a "7-N.phpB

Ahora nos )ueda ver como en el servidor reci-ir datos con +ormato JS0N y proceder a generar una clase en % % mediante la li-rera JS0N.php.

101

La sinta4is es. @json=ne/ ServicesAJS;K"#& @ca)=@jsonQ>)eco)e"stripslashes"@A7!BC!S:D,ca)ena,E##& echo ,Kom%reF,.@ca)Q>nom%re& ... ... 's decir la clase ServicesJJS0N tiene un m5todo llamado decode )ue reci-e como par*metro una cadena con datos codi+icados en JS0N y procede a retornar la in+ormacin en un o-jeto. #on+eccionaremos un pro-lema )ue enve desde el navegador in+ormacin en +ormato JS0N y en el servidor la convertiremos en un o-jeto de % % y procederemos a generar un tro,o de !ML )ue retornaremos al navegador para )ue lo muestre. 'l archivo pagina6.html <html> <head> <title>Problema</title> <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> </head> <bod > <h&>2nviar datos desde el navegador en formato JSLY proceder a la decodificaci#n en una clase PDP con la librerTa JSLY.php</h&> <input t pe="button" value="2nviar" id="boton""> <div id="resultados"></div> </bod > </html> 'l archivo con las +unciones JavaScript es. add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function iniciali?ar2ventos=@ 6 var ref=document.get2lementB Cd=>boton">@9 add2vent=ref<>click><botonPresionado<false@9 : function botonPresionado=e@ 6 var obj=6 nombre8>juan>< edad8&,< sueldos8Q"&44<"044<"334R :9 var cadena=obj.toJSLYString=@9 enviarEatos=cadena@9 : var cone!ion"9 function enviarEatos=cadena@ 6

102

cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php$cadena=>Acadena< true@9 cone!ion".send=null@9

function procesar2ventos=@ 6 var resultados = document.get2lementB Cd="resultados"@9 if=cone!ion".read State == *@ 6 resultados.innerD'G- = cone!ion".response'e!t9 : else 6 resultados.innerD'G- = "+argando..."9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 : function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : #uando se presiona el -otn procedemos a partir de un o-jeto JavaScript generar una cadena en +ormato JS0N2 luego procedemos a llamar a la +uncin enviar$atos. var o%j=$ nom%reF,juan,e)a)F'W-

103

suel)osFD1'MM-1OMM-1ZZME .& var ca)ena=o%j.toJS;KString"#& enviar3atos"ca)ena#& La +uncin enviar$atos procede a crear un o-jeto de la clase XML ttp?e)uest y pasa mediante el par*metro F'! la cadena en +ormato JS0N. var conexion1& function enviar3atos"ca)ena# $ conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php?ca)ena=,(ca)ena- true#& conexion1.sen)"null#& . Solo )ueda mostrar el tro,o de datos en !ML )ue retorna el servidor. function procesar!ventos"# $ var resulta)os = )ocument.get!lement*y+)""resulta)os"#& if"conexion1.rea)yState == =# $ resulta)os.inner2:56 = conexion1.response:ext& . else $ resulta)os.inner2:56 = ">argan)o..."& . . Lo nuevo se centra en el archivo pagina6.php. <$php reIuire=>../JSLY.php>@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>decode=stripslashes=MNH2OP2S'Q>cadena>R@@9 echo >Yombre8>.Mcad7>nombre9 echo ><br>>9 echo >2dad8>.Mcad7>edad9 echo ><br>>9 echo >Primer sueldo8>.Mcad7>sueldosQ4R9 echo ><br>>9 echo >Segundo sueldo8>.Mcad7>sueldosQ"R9 echo ><br>>9 echo >'ercer sueldo8>.Mcad7>sueldosQ&R9 $> 'l m5todo )ue convierte una cadena con +ormato JS0N en un o-jeto de % % es. @ca)=@jsonQ>)eco)e"stripslashes"@A7!BC!S:D,ca)ena,E##& ?ecordemos )ue con la +uncin stripslashes sacamos los caracteres de escape(-arras invertidad para las comillas entre otras( Luego podemos +*cilmente acceder a los atri-utos del o-jeto con la sinta4is.

104

echo echo echo echo echo echo echo echo echo

,Kom%reF,.@ca)Q>nom%re& ,<%r>,& ,!)a)F,.@ca)Q>e)a)& ,<%r>,& ,<rimer suel)oF,.@ca)Q>suel)osDME& ,<%r>,& ,Segun)o suel)oF,.@ca)Q>suel)osD1E& ,<%r>,& ,:ercer suel)oF,.@ca)Q>suel)osD'E&

%, - 3iAarra i'teracti(a mu*tiu!uario

'l 1ltimo ejemplo )ue implementar5 y utili,ar* JS0N para la comunicacin entre el cliente y el servidor ser* una Lpi,arra interactiva multiusuarioL2 -*sicamente desarrollaremos una aplicacin )ue muestre un ta-lero con letras )ue se puedan mover con el mouse. Lo interesante ser* )ue cada un cierto tiempo nos comunicaremos con el servidor e in+ormaremos las letras )ue se han despla,ado dentro de la ventana2 esto permitir* )ue cual)uier otro usuario )ue est5 ejecutando en ese momento la misma p*gina ver* el despla,amiento )ue e+ectu otra persona. %ara pro-ar si realmente +unciona esta caracterstica podemos ejecutar el Lpro-lema resueltoL utili,ando el <ire<o4 y el :nternet '4plorer. %odremos o-servar como se sincroni,an las posiciones de las letras dentro de la ventana (si un usuario mueve una letra hacia la derecha2 luego de algunos segundos todos los otros usuarios ver*n re+lejado el cam-io en sus navegadores. Deamos los distintos archivos )ue intervienen (pagina6.html(. <html> <head> <title>Problema</title> <script src="../json.js" language="JavaScript"></script> <script src="funciones.js" language="JavaScript"></script> </head> <bod st le="background85eee"> <div><strong>Puede despla?ar las letras con el mouse para escribir palabras Iue serSn vistas por otros usuarios Iue visiten la pSgina en este momento o mSs tarde.</strong></div> <div id="letras"></div> </bod > </html> ay )ue tener en cuenta )ue emplearemos JS0N para la trans+erencia de datos entre el cliente y el servidor por lo )ue de-emos disponer. <script src="../json.js" language="JavaScript"></script> 'ste archivo no tiene nada de especial toda la complejidad se encuentra en el archi+o +unciones.js )ue lo incorporamos con la siguiente lnea. <script src="funciones.js" language="JavaScript"></script> Ahora el archivo donde se encuentra toda la complejidad del cdigo )ue se ejecuta en el cliente est* en +unciones.js.

105

add2vent=;indo;<>load><iniciali?ar2ventos<false@9 function desactivarSeleccion=e@ 6 return false : var cone!ion"9 function iniciali?ar2ventos=@ 6 document.onmousedo;n=desactivarSeleccion9 document.onmousemove=desactivarSeleccion9 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos9 cone!ion".open=>)2'><>pagina".php>< true@9 cone!ion".send=null@9

var datos9 var datosYuevos9 var datosGovil9 var vector-etras=ne; %rra =@9 var reloj=null9 var reloj)eneral=null9 var pasos=49 function procesar2ventos=@ 6 if=cone!ion".read State == *@ 6 datos=cone!ion".response'e!t.parseJSLY=@9 crear-etras=@9 reloj)eneral=;indo;.setCnterval=actuali?ar+oordenadas< ,444@9 : : function crear-etras=@ 6 for=f=49f<datos.length9fAA@ 6 var ob=document.create2lement=>div>@9 ob.st le.left=datosQfR.!A>p!>9 ob.st le.top=datosQfR. A>p!>9 ob.st le.;idth=>"0p!>9 ob.st le.height=>"0p!>9 ob.st le.background=>5eee>9 ob.st le.position=>absolute>9 ob.st le.fontSi?e=>"1p!>9 ob.st le.padding=>(p!>9 ob.st le.cursor=>pointer>9 ob.id=>div>Af9 ob.st le.te!t%lign=>center>9 var !=document.get2lementB Cd=>letras>@9 !.append+hild=ob@9

106

var ref=document.get2lementB Cd=>div>Af@9 ref.innerD'G-=datosQfR.letra9 vector-etrasQfR=ne; Hecuadro=ob<datosQfR.letra<fA"<datosQfR.!<datosQfR. @9 : :

function letrasGovidas=cod<!< @ 6 this.codigo=cod9 this.!=!9 this. = 9 : function actuali?ar+oordenadas=@ 6 var let=ne; %rra =@9 var con=49 for=f=49f<vector-etras.length9fAA@ 6 if =datosQfR.!X=vector-etrasQfR.retornarF=@ \\ datosQfR. X=vector-etrasQfR.retornar_=@@ 6 datosQfR.!=vector-etrasQfR.retornarF=@9 datosQfR. =vector-etrasQfR.retornar_=@9 letQconR=ne; letrasGovidas=datosQfR.codigo<vector-etrasQfR.retornarF=@<vector-etrasQfR.re tornar_=@@9 conAA9 : : var aleatorio=Gath.random=@9 var cadena=let.toJSLYString=@9 cone!ion"=crearFG-DttpHeIuest=@9 cone!ion".onread statechange = procesar2ventos+ontinuos9 cone!ion".open=>)2'><>pagina&.php$letras=>AcadenaA"Zaleatorio="Aaleatorio< true@9 cone!ion".send=null@9 : function procesar2ventos+ontinuos=@ 6 if=cone!ion".read State == *@ 6 datosYuevos=cone!ion".response'e!t.parseJSLY=@9 datosGovil=cone!ion".response'e!t.parseJSLY=@9 var cambios=false9 for=f=49f<datosYuevos.length9fAA@ 6 if =datosYuevosQfR.!X=datosQfR.! \\ datosYuevosQfR. X=datosQfR. @ 6 datosGovilQfR.!=datosQfR.!9 datosGovilQfR. =datosQfR. 9 cambios=true9 : :

107

if =cambios@ 6 if =reloj==null@ reloj=;indo;.setCnterval=mover-etras< ,@9 clearCnterval=reloj)eneral@9 pasos=&49 : : :

function mover-etras=@ 6 var cambios=false9 pasos779 for=f=49f<datosYuevos.length9fAA@ 6 if =datosYuevosQfR.!X=datosQfR.! \\ datosYuevosQfR. X=datosQfR. @ 6 cambios=true9 var d!=Gath.abs=datosYuevosQfR.!7datosQfR.!@9 var avance!9 if ==datosYuevosQfR.!7datosQfR.!@>4@ avance!=Gath.round=d!/&4@9 else avance!=Gath.round=7d!/&4@9 datosGovilQfR.!=parseCnt=datosGovilQfR.!@Aavance!9 var d =Gath.abs=datosYuevosQfR. 7datosQfR. @9 var avance 9 if ==datosYuevosQfR. 7datosQfR. @>4@ avance =Gath.round=d /&4@9 else avance =Gath.round=7d /&4@9 datosGovilQfR. =parseCnt=datosGovilQfR. @Aavance 9 cambios=true9 if =pasos==4@ 6 vector-etrasQfR.fijarF=datosYuevosQfR.!@9 vector-etrasQfR.fijar_=datosYuevosQfR. @9 : else 6 vector-etrasQfR.fijarF=datosGovilQfR.!@9 vector-etrasQfR.fijar_=datosGovilQfR. @9 : : : if =pasos==4@ 6 clearCnterval=reloj@9 reloj=null9 reloj)eneral=;indo;.setCnterval=actuali?ar+oordenadas< ,444@9 : :

108

//Erag and Erop Hecuadro=function=div@ 6 tF=49 t_=49 difF=49 dif_=49 add2vent=div<>mousedo;n><inicioErag<false@9 function coordenadaF=e@ 6 if =;indo;.event@ return event.clientFAdocument.bod .scroll'op9 else return e.pageF9 : function coordenada_=e@ 6 if =;indo;.event@ return event.client_Adocument.bod .scroll'op9 else return e.page_9 : function inicioErag=e@ 6 if =;indo;.event@ e=;indo;.event9 var eF=coordenadaF=e@9 var e_=coordenada_=e@9 var oF=parseCnt=div.st le.left@9 var o_=parseCnt=div.st le.top@9 difF=oF7eF9 dif_=o_7e_9 add2vent=document<>mousemove><drag<false@9 add2vent=document<>mouseup><soltar<false@9 : function drag=e@ 6 if =;indo;.event@ e=;indo;.event9 tF=coordenada_=e@Adif_A>p!>9 t_=coordenadaF=e@AdifFA>p!> div.st le.top=tF9 div.st le.left=t_9 : function soltar=e@

109

6 if =;indo;.event@ 6 document.detach2vent=>onmousemove><drag@9 document.detach2vent=>onmouseup><soltar@9 : else 6 document.remove2vent-istener=>mousemove><drag<false@9 document.remove2vent-istener=>mouseup><soltar<false@9 : actuali?ar+oordenadas=@9

this.retornarF=function=@ 6 return parseCnt=div.st le.left@9 : this.retornar_=function=@ 6 return parseCnt=div.st le.top@9 : this.fijarF=function=!!@ 6 div.st le.left=!!A>p!>9 : this.fijar_=function= @ 6 div.st le.top= A>p!>9 : : //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ //Kunciones comunes a todos los problemas //JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ function add2vent=elemento<nomevento<funcion<captura@ 6 if =elemento.attach2vent@ 6 elemento.attach2vent=>on>Anomevento<funcion@9 return true9 : else if =elemento.add2vent-istener@ 6 elemento.add2vent-istener=nomevento<funcion<captura@9 return true9 : else return false9 :

110

function crearFG-DttpHeIuest=@ 6 var !mlDttp=null9 if =;indo;.%ctiveFLbject@ !mlDttp = ne; %ctiveFLbject="Gicrosoft.FG-D''P"@9 else if =;indo;.FG-DttpHeIuest@ !mlDttp = ne; FG-DttpHeIuest=@9 return !mlDttp9 : La primera +uncin )ue se ejecuta es iniciali,ar'ventos donde tenemos. )ocument.onmouse)o/n=)esactivarSeleccion& )ocument.onmousemove=)esactivarSeleccion& #on estas dos asignaciones desactivamos la posi-ilidad de seleccionar te4to dentro de la p*gina2 esto es para )ue no se puedan seleccionar las letras. Luego. conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos& conexion1.open",9!:,-,pagina1.php,- true#& conexion1.sen)"null#& creamos un o-jeto de la clase crearXML ttp?e)uest para recuperar la posicin de cada letra. Deremos m*s adelante )ue tenemos una -ase de datos donde almacenamos las letras y las coordenadas de cada una. La +uncion procesar'ventos. function procesar!ventos"# $ if"conexion1.rea)yState == =# $ )atos=conexion1.response:ext.parseJS;K"#& crear6etras"#& reloj9eneral=/in)o/.set+nterval"actuali ar>oor)ena)as- WMMM#& . . cuando los datos se han enviado por completo del servidor procedemos a rescatarlos y generar un o-jeto literal en JavaScript llamando a la +uncin parseJS0N((. Llamamos seguidamente a la +uncin crearLetras(( y +inalmente creamos un timer o alarma para )ue se dispare cada = segundos2 veremos luego )ue tiene por o-jetivo recuperar las coordenadas de las letras almacenadas en el servidor. reloj9eneral=/in)o/.set+nterval"actuali ar>oor)ena)as- WMMM#& La +uncin crearLetras. function crear6etras"# $ for"f=M&f<)atos.length&f((# $

111

var o%=)ocument.create!lement",)iv,#& o%.style.left=)atosDfE.x(,px,& o%.style.top=)atosDfE.y(,px,& o%.style./i)th=,1Opx,& o%.style.height=,1Opx,& o%.style.%ackgroun)=,Neee,& o%.style.position=,a%solute,& o%.style.fontSi e=,1Ppx,& o%.style.pa))ing=,Lpx,& o%.style.cursor=,pointer,& o%.i)=,)iv,(f& o%.style.text1lign=,center,& var x=)ocument.get!lement*y+)",letras,#& x.appen)>hil)"o%#& var ref=)ocument.get!lement*y+)",)iv,(f#& ref.inner2:56=)atosDfE.letra& vector6etrasDfE=ne/ 7ecua)ro"o%-)atosDfE.letra-f(1-)atosDfE.x-)atosDfE.y#& . . crea elementos !ML de tipo LdivL y los dispone en las coordenadas )ue aca-amos de recuperar del servidor. o%.style.left=)atosDfE.x(,px,& o%.style.top=)atosDfE.y(,px,& 'l ancho y el alto son +ijos. o%.style./i)th=,1Opx,& o%.style.height=,1Opx,& $e+inimos un id distinto a cada uno. o%.i)=,)iv,(f& %or 1ltimo lo aAadimos a la p*gina. ref.inner2:56=)atosDfE.letra& vector6etrasDfE=ne/ 7ecua)ro"o%-)atosDfE.letra-f(1-)atosDfE.x-)atosDfE.y#& y creamos un o-jeto de la clase ?ecuadro )ue nos permitir* despla,arlo con el mouse (esta clase se estudi en el curso de $ !ML 3a. La +uncin actuali,ar#oordenadas se dispara cada = segundos o inmediatamente despu5s )ue un usuario despla,a una letra en la pantalla. function actuali ar>oor)ena)as"# $ var let=ne/ 1rray"#& var con=M& for"f=M&f<vector6etras.length&f((# $ if ")atosDfE.xI=vector6etrasDfE.retornar4"# TT )atosDfE.yI=vector6etrasDfE.retornarX"## $ )atosDfE.x=vector6etrasDfE.retornar4"#&

112

)atosDfE.y=vector6etrasDfE.retornarX"#& letDconE=ne/ letras5ovi)as")atosDfE.co)igo-vector6etrasDfE.retornar4"#-vec tor6etrasDfE.retornarX"##& con((& . . var aleatorio=5ath.ran)om"#& var ca)ena=let.toJS;KString"#& conexion1=crear4562ttp7e8uest"#& conexion1.onrea)ystatechange = procesar!ventos>ontinuos& conexion1.open",9!:,-,pagina'.php? letras=,(ca)ena("Jaleatorio="(aleatorio- true#& conexion1.sen)"null#& . $entro del +or identi+icamos si alguna de las letras +ue despla,ada con el mouse. if ")atosDfE.xI=vector6etrasDfE.retornar4"# TT )atosDfE.yI=vector6etrasDfE.retornarX"## 'n caso a+irmativo actuali,amos la estructura datos. )atosDfE.x=vector6etrasDfE.retornar4"#& )atosDfE.y=vector6etrasDfE.retornarX"#& y adem*s creamos una componente del a clase letrasMoviles. letDconE=ne/ letras5ovi)as")atosDfE.co)igo-vector6etrasDfE.retornar4"#-vec tor6etrasDfE.retornarX"##& 'ste vector let tiene los cam-ios e+ectuados en pantalla para ser eviados al servidor. <uera del +or creamos un o-jeto de la clase XML ttp?e)uest y procedemos a enviar los datos al servidor. conexion1.open",9!:,-,pagina'.php? letras=,(ca)ena("Jaleatorio="(aleatorio- true#& ?ecordemos )ue para convertir el vector de JavaScript a JS0N lo hacemos. var ca)ena=let.toJS;KString"#& La +uncin procesar'ventos#ontinuos. function procesar!ventos>ontinuos"# $ if"conexion1.rea)yState == =# $ )atosKuevos=conexion1.response:ext.parseJS;K"#& )atos5ovil=conexion1.response:ext.parseJS;K"#& var cam%ios=false& for"f=M&f<)atosKuevos.length&f((# $ if ")atosKuevosDfE.xI=)atosDfE.x TT )atosKuevosDfE.yI=)atosDfE.y#

113

$ )atos5ovilDfE.x=)atosDfE.x& )atos5ovilDfE.y=)atosDfE.y& cam%ios=true&

. . if "cam%ios# $ if "reloj==null# reloj=/in)o/.set+nterval"mover6etras- W#& clear+nterval"reloj9eneral#& pasos='M& . . .

?ecupera las coordenadas actuales de las letras )ue se encuentran registradas en el servidor. )atosKuevos=conexion1.response:ext.parseJS;K"#& )atos5ovil=conexion1.response:ext.parseJS;K"#& 7tili,amos dos varia-les ya )ue una la utili,aremos para ir despla,ando lentamente la letra por la pantalla. $entro de un +or veri+icamos si hay coordenadas distintas entre las )ue administra nuestro navegador y las registradas en el servidor. if ")atosKuevosDfE.xI=)atosDfE.x TT )atosKuevosDfE.yI=)atosDfE.y# $ 'n caso de ha-er di+erencias. if "cam%ios# $ if "reloj==null# reloj=/in)o/.set+nterval"mover6etras- W#& clear+nterval"reloj9eneral#& pasos='M& . desactivamos el timer relojFeneral y activamos un timer para despla,ar lentamente las letras entre la posicin actual y la registrada en el servidor (la +uncin moverLetras se dispara cada = milisegundos. La +uncin moverLetra. function mover6etras"# $ var cam%ios=false& pasosQQ& for"f=M&f<)atosKuevos.length&f((# $ if ")atosKuevosDfE.xI=)atosDfE.x TT )atosKuevosDfE.yI=)atosDfE.y# $ cam%ios=true& var )x=5ath.a%s")atosKuevosDfE.xQ)atosDfE.x#& var avancex&

114

if "")atosKuevosDfE.xQ)atosDfE.x#>M# avancex=5ath.roun)")x/'M#& else avancex=5ath.roun)"Q)x/'M#& )atos5ovilDfE.x=parse+nt")atos5ovilDfE.x#(avancex& var )y=5ath.a%s")atosKuevosDfE.yQ)atosDfE.y#& var avancey& if "")atosKuevosDfE.yQ)atosDfE.y#>M# avancey=5ath.roun)")y/'M#& else avancey=5ath.roun)"Q)y/'M#& )atos5ovilDfE.y=parse+nt")atos5ovilDfE.y#(avancey& cam%ios=true& if "pasos==M# $ vector6etrasDfE.fijar4")atosKuevosDfE.x#& vector6etrasDfE.fijarX")atosKuevosDfE.y#& . else $ vector6etrasDfE.fijar4")atos5ovilDfE.x#& vector6etrasDfE.fijarX")atos5ovilDfE.y#& . . . if "pasos==M# $ clear+nterval"reloj#& reloj=null& reloj9eneral=/in)o/.set+nterval"actuali ar>oor)ena)as- WMMM#& . . despla,a las letras )ue han cam-iado de posicin. 'sta +uncin se ejecuta 8G veces hasta )ue la varia-le glo-al pasos almacene el valor G.

Luego tenemos los dos archivos )ue se ejecutan en el servidor (pagina6.php(. <$php Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@ or die="Problemas en la seleccion de la base de datos"@9 Mregistros=m sIlNIuer ="select letra<!< <codigo from letras"<Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 ;hile =Mreg=m sIlNfetchNarra =Mregistros@@ 6 MvecQR=Mreg9 : m sIlNclose=Mcone!ion@9 reIuire=>../JSLY.php>@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>encode=Mvec@9

115

echo Mcad9 $> ?ecupera de la ta-la letras las coordenadas y letras propiamente dichas )ue ser*n mostradas en el servidor. @registros=mys8lA8uery""select letra-x-y-co)igo from letras"@conexion# or )ie""<ro%lemas en el select".mys8lAerror"##& Fuardamos los datos en un vector. /hile "@reg=mys8lAfetchAarray"@registros## $ @vecDE=@reg& . Feneramos un archivo con +ormato JS0N para )ue se enve al cliente. re8uire",../JS;K.php,#& @json=ne/ ServicesAJS;K"#& @ca)=@jsonQ>enco)e"@vec#& echo @ca)& %or 1ltimo nos )ueda el archivo )ue llamamos cada = segundos para indicarle las novedades dentro del navegador (si el usuario despla, alguna letra( y recuperar las novedades registradas en el servidor. <$php reIuire=>../JSLY.php>@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>decode=stripSlashes=MNH2OP2S'Q>letras>R@@9 Mcone!ion=m sIlNconnect="localhost"<"root"<"?14"@ or die="Problemas en la cone!ion"@9 m sIlNselectNdb="bdaja!"<Mcone!ion@ or die="Problemas en la seleccion de la base de datos"@9 Mregistros=m sIlNIuer ="select letra<!< <codigo from letras"<Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 for=Mf=49Mf<count=Mcad@9MfAA@ 6 m sIlNIuer ="update letras set !=".McadQMfR7>!."< =".McadQMfR7> ." ;here codigo=".McadQMfR7>codigo<Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 : Mregistros=m sIlNIuer ="select !< <codigo from letras"<Mcone!ion@ or die="Problemas en el select".m sIlNerror=@@9 ;hile =Mreg=m sIlNfetchNarra =Mregistros@@ 6 MvecQR=Mreg9 : m sIlNclose=Mcone!ion@9 Mjson=ne; ServicesNJSLY=@9 Mcad=Mjson7>encode=Mvec@9 echo Mcad9 $>

116

%rimero recuperamos los datos enviados por el navegador y generamos un vector asociativo en % % a partir de los datos )ue llegan en +ormato JS0N. @ca)=@jsonQ>)eco)e"stripSlashes"@A7!BC!S:D,letras,E##& Modi+icamos las coordenadas de las letras. @registros=mys8lA8uery""select letra-x-y-co)igo from letras"@conexion# or )ie""<ro%lemas en el select".mys8lAerror"##& for"@f=M&@f<count"@ca)#&@f((# $ mys8lA8uery""up)ate letras set x=".@ca)D@fEQ>x."-y=".@ca)D@fEQ>y." /here co)igo=".@ca)D@fEQ>co)igo-@conexion# or )ie""<ro%lemas en el select".mys8lAerror"##& . %or 1ltimo recuperamos todas las letras y sus coordenadas y las enviamos nuevamente al cliente (navegador( )ue las solicit. @registros=mys8lA8uery""select x-y-co)igo from letras"-@conexion# or )ie""<ro%lemas en el select".mys8lAerror"##& /hile "@reg=mys8lAfetchAarray"@registros## $ @vecDE=@reg& . mys8lAclose"@conexion#& @json=ne/ ServicesAJS;K"#& @ca)=@jsonQ>enco)e"@vec#& echo @ca)&

117