p. 1

www.librosweb.es introducción a ajax javier eguíluz pérez

[close]

p. 2

introducción a ajax sobre este libro los contenidos de este libro están bajo una licencia creative commons reconocimiento no comercial sin obra derivada 3.0 http creativecommons.org/licenses/by-nc-nd 3.0/deed.es esta versión impresa se creó el 7 de junio de 2008 y todavía está incompleta la versión más actualizada de los contenidos de este libro se puede encontrar en http www.librosweb.es/ajax si quieres aportar sugerencias comentarios críticas o informar sobre errores puedes enviarnos un mensaje a contacto@librosweb.es www.librosweb.es 2

[close]

p. 3

introducción a ajax capítulo 1 introducción a ajax 5 capítulo 2 javascript básico 9 2.1 sintaxis 9 2.2 variables 10 2.3 palabras reservadas 12 2.4 tipos de variables 13 2.5 operadores 21 2.6 objetos nativos de javascript 26 2.7 funciones 28 2.8 funciones y propiedades básicas de javascript 31 capítulo 3 javascript avanzado 35 3.1 objetos 35 3.2 clases 44 3.3 otros conceptos 52 capítulo 4 dom document object model 57 4.1 introducción a dom 57 4.2 tipos de nodos 58 4.3 la interfaz node 61 4.4 html y dom 62 capítulo 5 bom browser object model 82 5.1 introducción a bom 82 5.2 el objeto window 83 5.3 el objeto document 85 5.4 el objeto location 87 5.5 el objeto navigator 88 5.6 el objeto screen 89 capítulo 6 eventos 90 6.1 modelo básico de eventos 90 6.2 el flujo de eventos 96 6.3 handlers y listeners 99 6.4 el objeto event 101 6.5 tipos de eventos 108 6.6 solución cross browser 111 capítulo 7 primeros pasos con ajax 114 7.1 breve historia de ajax 114 7.2 la primera aplicación 114 7.3 métodos y propiedades del objeto xmlhttprequest 119 7.4 utilidades y objetos para ajax 121 7.5 interacción con el servidor 127 7.6 aplicaciones complejas 133 7.7 seguridad 138 capítulo 8 técnicas básicas con ajax 140 www.librosweb.es 3

[close]

p. 4

introducción a ajax 8.1 listas desplegables encadenadas 140 8.2 teclado virtual 142 8.3 autocompletar 146 capítulo 9 técnicas avanzadas con ajax 149 9.1 monitorización de servidores remotos 149 9.2 lector rss 152 9.3 google maps 154 capítulo 10 frameworks y librerías 164 10.1 el framework prototype 164 10.2 la librería scriptaculous 181 10.3 la librería jquery 182 10.4 otros frameworks importantes 194 capítulo 11 otras utilidades 195 11.1 detener las peticiones http erróneas 195 11.2 mejorar el rendimiento de las aplicaciones complejas 198 11.3 ofuscar el código javascript 199 11.4 evitar el problema de los dominios diferentes 200 capítulo 12 recursos útiles 203 capítulo 13 bibliografía 204 capítulo 14 ejercicios resueltos 205 www.librosweb.es 4

[close]

p. 5

introducción a ajax capítulo 1 introducción a ajax capítulo 1 introducción a ajax el término ajax se presentó por primera vez en el artículo ajax a new approach to web applications http www.adaptivepath.com/publications/essays/archives/000385.php publicado por jesse james garrett el 18 de febrero de 2005 hasta ese momento no existía un término normalizado que hiciera referencia a un nuevo tipo de aplicación web que estaba apareciendo en realidad el término ajax es un acrónimo de asynchronous javascript xml que se puede traducir como javascript asíncrono xml el artículo define ajax de la siguiente forma ajax no es una tecnología en sí mismo en realidad se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes las tecnologías que forman ajax son xhtml y css para crear una presentación basada en estándares dom para la interacción y manipulación dinámica de la presentación xml xslt y json para el intercambio y la manipulación de información xmlhttprequest para el intercambio asíncrono de información javascript para unir todas las demás tecnologías figura 1.1 tecnologías agrupadas bajo el concepto de ajax desarrollar aplicaciones ajax requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores en las aplicaciones web tradicionales las acciones del usuario en la página pinchar en un botón seleccionar un valor de una lista etc desencadenan llamadas al servidor una vez procesada la petición del usuario el servidor devuelve una nueva página html al navegador del usuario en el siguiente esquema la imagen de la izquierda muestra el modelo tradicional de las aplicaciones web la imagen de la derecha muestra el nuevo modelo propuesto por ajax www.librosweb.es 5

[close]

p. 6

introducción a ajax capítulo 1 introducción a ajax figura 1.2 comparación gráfica del modelo tradicional de aplicación web y del nuevo modelo propuesto por ajax imagen original creada por adaptive path y utilizada con su permiso esta técnica tradicional para crear aplicaciones web funciona correctamente pero no crea una buena sensación al usuario al realizar peticiones continuas al servidor el usuario debe esperar a que se recargue la página con los cambios solicitados si la aplicación debe realizar peticiones continuas su uso se convierte en algo molesto ajax permite mejorar completamente la interacción del usuario con la aplicación evitando las recargas constantes de la página ya que el intercambio de información con el servidor se produce en un segundo plano las aplicaciones construidas con ajax eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor la nueva capa intermedia de ajax mejora la respuesta de la aplicación ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor el siguiente esquema muestra la diferencia más importante entre una aplicación web tradicional y una aplicación web creada con ajax la imagen superior muestra la interación síncrona propia de las aplicaciones web tradicionales la imagen inferior muestra la comunicación asíncrona de las aplicaciones creadas con ajax www.librosweb.es 6

[close]

p. 7

introducción a ajax capítulo 1 introducción a ajax figura 1.3 comparación entre las comunicaciones síncronas de las aplicaciones web tradicionales y las comunicaciones asíncronas de las aplicaciones ajax imagen original creada por adaptive path y utilizada con su permiso las peticiones http al servidor se sustituyen por peticiones javascript que se realizan al elemento encargado de ajax las peticiones más simples no requieren intervención del servidor por lo que la respuesta es inmediata si la interacción requiere una respuesta del servidor la petición se realiza de forma asíncrona mediante ajax en este caso la interacción del usuario tampoco se ve interrumpida por recargas de página o largas esperas por la respuesta del servidor desde su aparición se han creado cientos de aplicaciones web basadas en ajax en la mayoría de casos ajax puede sustituir completamente a otras técnicas como flash además en el caso de las aplicaciones web más avanzadas pueden llegar a sustituir a las aplicaciones de escritorio a continuación se muestra una lista de algunas de las aplicaciones más conocidas basadas en ajax www.librosweb.es 7

[close]

p. 8

introducción a ajax capítulo 1 introducción a ajax gestores de correo electrónico gmail http www.gmail.com yahoo mail http mail.yahoo.com windows live mail http www.hotmail.com cartografía google maps http maps.google.com yahoo maps http maps.yahoo.com windows live local http maps.live.com aplicaciones web y productividad google docs http docs.google.com zimbra http www.zimbra.com zoho http www.zoho.com otras netvibes http www.netvibes.com [metapágina digg http www.digg.com [noticias meebo http www.meebo.com [mensajería 30 boxes http www.30boxes.com [calendario flickr http www.flickr.com [fotografía www.librosweb.es 8

[close]

p. 9

introducción a ajax capítulo 2 javascript básico capítulo 2 javascript básico 2.1 sintaxis la sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben seguirse al escribir el código fuente de los programas para considerarse como correctos para ese lenguaje de programación la sintaxis de javascript es muy similar a la de otros lenguajes como java y c las normas básicas que definen la sintaxis de javascript son las siguientes no se tienen en cuenta los espacios en blanco y las nuevas líneas como sucede con xhtml el intérprete de javascript ignora cualquier espacio en blanco sobrante por lo que el código se puede ordenar de forma adecuada para su manejo tabulando las líneas añadiendo espacios creando nuevas líneas etc se distinguen las mayúsculas y minúsculas al igual que sucede con la sintaxis de las etiquetas y elementos xhtml sin embargo si en una página xhtml se utilizan indistintamente mayúsculas y minúsculas la página se visualiza correctamente y el único problema es que la página no valida por el contrario si en javascript se intercambian mayúsculas y minúsculas las aplicaciones no funcionan correctamente no se define el tipo de las variables al definir una variable no es necesario indicar el tipo de dato que almacenará de esta forma una misma variable puede almacenar diferentes tipos de datos durante la ejecución del programa no es obligatorio terminar cada sentencia con el carácter del punto y coma al contrario de la mayoría de lenguajes de programación en javascript no es obligatorio terminar cada sentencia con el carácter del punto y coma no obstante es muy recomendable seguir la tradición de terminar cada sentencia con el carácter se pueden incluir comentarios los comentarios se utilizan para añadir alguna información relevante al código fuente del programa aunque no se visualizan por pantalla su contenido se envía al navegador del usuario junto con el resto del programa por lo que es necesario extremar las precauciones sobre el contenido de los comentarios javascript define dos tipos de comentarios los de una sola línea y los que ocupan varias líneas los comentarios de una sola línea se definen añadiendo dos barras oblicuas al principio de cada línea que forma el comentario a continuación se muestra un mensaje alert mensaje de prueba también se pueden incluir varios comentarios seguidos de una sola línea a continuación se muestra un mensaje y después se muestra otro mensaje alert mensaje de prueba www.librosweb.es 9

[close]

p. 10

introducción a ajax capítulo 2 javascript básico cuando un comentario ocupa más de una línea es más eficiente utilizar los comentarios multilínea que se definen encerrando el texto del comentario entre los caracteres y los comentarios de varias líneas son muy útiles cuando se necesita incluir bastante información en los comentarios alert mensaje de prueba las normas completas de sintaxis y de cualquier otro aspecto relacionado con javascript se pueden consultar en el estándar oficial del lenguaje que está disponible en http www.ecma-international.org/publications/standards/ecma-262.htm 2.2 variables las variables se definen mediante la palabra reservada var que permite definir una o varias variables simultáneamente var variable1 16 var variable2 hola variable3 mundo var variable4 16 variable5 hola el nombre de las variables debe cumplir las dos siguientes condiciones el primer carácter debe ser una letra o un guión bajo o un dólar el resto de caracteres pueden ser letras números guiones bajos y símbolos de dólar no es obligatorio inicializar una variable al declararla var variable6 si la variable no se declara mediante el operador var automáticamente se crea una variable global con ese identificador y su valor ejemplo var variable1 16 variable2 variable1 4 en el ejemplo anterior la variable2 no ha sido declarada por lo que al llegar a esa instrucción javascript crea automáticamente una variable global llamada variable2 y le asigna el valor correspondiente el ámbito de una variable llamado scope en inglés es la zona del programa en la que se define la variable javascript define dos ámbitos para las variables global y local el siguiente ejemplo ilustra el comportamiento de los ámbitos function muestramensaje var mensaje mensaje de prueba muestramensaje alertmensaje www.librosweb.es 10

[close]

p. 11

introducción a ajax capítulo 2 javascript básico cuando se ejecuta el código javascript anterior su resultado no es el esperado ya que no se muestra por pantalla ningún mensaje la variable mensaje se ha definido dentro de la función y por tanto es una variable local que solamente está definida dentro de la función cualquier instrucción que se encuentre dentro de la función puede hacer uso de la variable sin embargo cualquier instrucción que se encuentre en otras funciones o fuera de cualquier función no tendrá definida la variable mensaje además de variables locales también existe el concepto de variable global que está definida en cualquier punto del programa incluso dentro de cualquier función var mensaje mensaje de prueba function muestramensaje alertmensaje el código javascript anterior define una variable fuera de cualquier función este tipo de variables automáticamente se transforman en variables globales y están disponibles en cualquier punto del programa de esta forma aunque en el interior de la función no se ha definido ninguna variable llamada mensaje la variable global creada anteriormente permite que la instrucción alert dentro de la función muestre el mensaje correctamente si una variable se declara fuera de cualquier función automáticamente se transforma en variable global independientemente de si se define utilizando la palabra reservada var o no sin embargo en el interior de una función las variables declaradas mediante var se consideran locales y el resto se transforman también automáticamente en variables globales por lo tanto el siguiente ejemplo si que funciona como se espera function muestramensaje mensaje mensaje de prueba muestramensaje alertmensaje en caso de colisión entre las variables globales y locales dentro de una función prevalecen las variables locales var mensaje gana la de fuera function muestramensaje var mensaje gana la de dentro alertmensaje alertmensaje muestramensaje alertmensaje el código anterior muestra por pantalla los siguientes mensajes www.librosweb.es 11

[close]

p. 12

introducción a ajax gana la de fuera gana la de dentro gana la de fuera capítulo 2 javascript básico la variable local llamada mensaje dentro de la función tiene más prioridad que la variable global del mismo nombre pero solamente dentro de la función si no se define la variable dentro de la función con la palabra reservada var en realidad se está modificando el valor de la variable global var mensaje gana la de fuera function muestramensaje mensaje gana la de dentro alertmensaje alertmensaje muestramensaje alertmensaje en este caso los mensajes mostrados son gana la de fuera gana la de dentro gana la de dentro la recomendación general es definir como variables locales todas las variables que sean de uso exclusivo para realizar las tareas encargadas a cada función las variables globales se utilizan para compartir variables entre funciones de forma rápida 2.3 palabras reservadas como cualquier otro lenguaje de programación javascript utiliza una serie de palabras para crear las instrucciones que forman cada programa por este motivo estas palabras se consideran reservadas y no se pueden utilizar como nombre de una variable o función el estándar ecma-262 incluye la lista de las palabras reservadas que utiliza actualmente javascript y la lista de las palabras reservadas para su uso futuro utilizadas actualmente break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof reservadas para su uso futuro abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public www.librosweb.es 12

[close]

p. 13

introducción a ajax capítulo 2 javascript básico 2.4 tipos de variables javascript divide los distintos tipos de variables en dos grupos tipos primitivos y tipos de referencia o clases 2.4.1 tipos primitivos javascript define cinco tipos primitivos undefined null boolean number y string además de estos tipos javascript define el operador typeof para averiguar el tipo de una variable 2.4.1.1 el operador typeof el operador typeof se emplea para determinar el tipo de dato que almacena una variable su uso es muy sencillo ya que sólo es necesario indicar el nombre de la variable cuyo tipo se quiere averiguar var variable1 7 typeof variable1 number var variable2 hola mundo typeof variable2 string los posibles valores de retorno del operador son undefined boolean number string para cada uno de los tipos primitivos y object para los valores de referencia y también para los valores de tipo null 2.4.1.2 variables de tipo undefined el tipo undefined corresponde a las variables que han sido definidas y todavía no se les ha asignado un valor var variable1 typeof variable1 devuelve undefined el operador typeof no distingue entre las variables declaradas pero no inicializadas y las variables que ni siquiera han sido declaradas var variable1 typeof variable1 typeof variable2 devuelve undefined aunque la variable1 ha sido declarada devuelve undefined la variable2 no ha sido declarada 2.4.1.3 variables de tipo null se trata de un tipo similar a undefined y de hecho en javascript se consideran iguales undefined null el tipo null se suele utilizar para representar objetos que en ese momento no existen var nombreusuario null www.librosweb.es 13

[close]

p. 14

introducción a ajax capítulo 2 javascript básico 2.4.1.4 variables de tipo boolean además de variables de tipo boolean también se suelen llamar variables lógicas y variables booleanas se trata de una variable que sólo puede almacenar uno de los dos valores especiales definidos y que representan el valor verdadero y el valor falso var variable1 true var variable2 false los valores true y false son valores especiales de forma que no son palabras ni números ni ningún otro tipo de valor este tipo de variables son esenciales para crear cualquier aplicación tal y como se verá más adelante cuando es necesario convertir una variable numérica a una variable de tipo boolean javascript aplica la siguiente conversión el número 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true por este motivo en ocasiones se asocia el número 0 con el valor false y el número 1 con el valor true sin embargo es necesario insistir en que true y false son valores especiales que no se corresponden ni con números ni con ningún otro tipo de dato 2.4.1.5 variables de tipo numérico las variables numéricas son muy utilizadas en las aplicaciones habituales ya que permiten almacenar cualquier valor numérico si el número es entero se indica directamente si el número es decimal se debe utilizar el punto para separar la parte entera de la decimal var variable1 10 var variable2 3.14159265 además del sistema numérico decimal también se pueden indicar valores en el sistema octal si se incluye un cero delante del número y en sistema hexadecimal si se incluye un cero y una x delante del número var variable1 10 var variable_octal 034 var variable_hexadecimal 0xa3 javascript define tres valores especiales muy útiles cuando se trabaja con números en primer lugar se definen los valores infinity y ­infinity para representar números demasiado grandes positivos y negativos y con los que javascript no puede trabajar var variable1 3 variable2 0 alertvariable1/variable2 muestra infinity el otro valor especial definido por javascript es nan que es el acrónimo de not a number de esta forma si se realizan operaciones matemáticas con variables no numéricas el resultado será de tipo nan para manejar los valores nan se utiliza la función relacionada isnan que devuelve true si el parámetro que se le pasa no es un número www.librosweb.es 14

[close]

p. 15

introducción a ajax var variable1 3 var variable2 hola isnanvariable1 false isnanvariable2 true isnanvariable1 variable2 capítulo 2 javascript básico true por último javascript define algunas constantes matemáticas que representan valores numéricos significativos constante math.e math.ln2 math.ln10 math.log2e math.log10e math.pi valor 2.718281828459045 significado constante de euler base de los logaritmos naturales y también llamado número e 0.6931471805599453 logaritmo natural de 2 2.302585092994046 logaritmo natural de 10 1.4426950408889634 logaritmo en base 2 de math.e 0.4342944819032518 logaritmo en base 10 de math.e 3.141592653589793 pi relación entre el radio de una circunferencia y su diámetro math.sqrt1_2 0.7071067811865476 raíz cuadrada de 1/2 math.sqrt2 1.4142135623730951 raíz cuadrada de 2 de esta forma para calcular el área de un círculo de radio r se debe utilizar la constante que representa al número pi var area math.pi r r 2.4.1.6 variables de tipo cadena de texto las variables de tipo cadena de texto permiten almacenar cuaquier sucesión de caracteres por lo que se utilizan ampliamente en la mayoría de aplicaciones javascript cada carácter de la cadena se encuentra en una posición a la que se puede acceder individualmente siendo el primer carácter el de la posición 0 el valor de las cadenas de texto se indica encerrado entre comillas simples o dobles var variable1 hola var variable2 mundo var variable3 hola mundo esta es una frase más larga las cadenas de texto pueden almacenar cualquier carácter aunque algunos no se pueden incluir directamente en la declaración de la variable si por ejemplo se incluye un enter para mostrar el resto de caracteres en la línea siguiente se produce un error en la aplicación var variable hola mundo esta es una frase más larga la variable anterior no está correctamente definida y se producirá un error en la aplicación por tanto resulta evidente que algunos caracteres especiales no se pueden incluir directamente de la misma forma como las comillas doble y simple se utilizan para encerrar los contenidos también se pueden producir errores www.librosweb.es 15

[close]