JavaScript y AJAX

Pedro J. Muñoz Merino

http://www.it.uc3m.es/pedmume/
 JavaScript: Introducción
● Tecnología del cliente. Se ejecuta en los navegadores,
que además de HTML, casi todos interpretan este
lenguaje. Se interpreta en el navegador sin compilar
● Algunas aplicaciones que permite
― Chequear la corrección de formularios antes de ir al servidor
― Mostrar ventanas emergentes
― Realizar control en el cliente
― Reaccionar ante determinados eventos como pasar el ratón,
hacer click, etc.
― Proporcionar unos contenidos dinámicos en el cliente sin pasar
por el servidor

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

2
 JavaScript vs Tecnologías de
Servidor
● Algunas preguntas
― ¿Nos interesa realizar un determinado procesado en el cliente o
en el servidor? Usualmente el mismo procesado se puede
realizar en ambas partes
― ¿Se puede realizar el procesado en el cliente o por requisitos de
la aplicación (por ejemplo por seguridad) sólo se puede hacer en
el servidor esa operación?
― ¿La acción a realizar cargará mucho al servidor cuando hay
muchas peticiones a la vez en el mismo?

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

3
 JavaScript: Variables
● Declaración de variables
― var nombre_variable=valor
● Ejemplos
― var a=7
― var direcion=“calle de Arriba”
● No hay que declarar explícitamente el tipo que son, sino
que en JavaScript se interpreta automáticamente según
su declaración
● Para obtener el valor de una variable se pone
directamente la variable, se asigna nuevos valores sin
poner ya la palabra reservada var
● Variables locales/globales
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
4
JavaScript: Operaciones con Strings
● Para concatenar dos strings se usa el “+” entre ellos
― String1 + String2
● Ejemplo
var s1=“El valor es”;
var s2=“rojo”;
var s3;
s3=s1+” “+s2;
document.write(s3);

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

5
 JavaScript: Arrays
● Un array permite tener varios valores, accesibles
mediante un índice numérico
var var1=new array(valor1, valor2, valor3, …, valorn);
var var2=new array();
var2[0]=valor0;
var2[1]=varlor1;
● Para acceder a los valores
nombre_variable[número]
● Actualizar los valores
nombre_variable[número]=valor;

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

6
 JavaScript: Funciones
● La manera genérica de definir una función en JavaScript
function nombre_funcion (var1, var2, …, varn) {
código de la función
}
● La función puede retornar un valor que puede ser una
variable, también un array
return nombre_variable
● A la función se la invoca desde el cuerpo de la siguiente
manera
nombre_funcion(param1, param2, …, paramn)

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

7
 JavaScript: Operadores
● Aritméticos entre números enteros:
+ - * / %

● Comparación:
< > == === != <= >=

● Lógicos:
&& || !

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

8
 JavaScript: Estructuras de Control
● if
● while
● for
● switch

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

9
 JavaScript: Eventos posibles
● Cada elemento HTML tiene una serie de eventos que se
pueden aplicar sobre él, tal que si el evento sucede
asociado a dicha etiqueta, se dispara la función indicada
como valor ante dicho evento. Algunos ejemplos:
― onclick(), ondblclick(). Cuando se presiona un botón
― onload(), onunload(). Cuando se carga una página
― onchange(). Cuando se modifica un campo
― onsubmit(). Cuando se presiona el botón submit
― mouseover(). Cuando se pasa por encima de un elemento HTML
― onkeyup(), onkeydown(), onkeypress(). Cuando se presiona o
libera una tecla

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

10
JavaScript: Impresión de información
● Se puede dar una respuesta en JavaScript
― Intercalando etiquetas HTML
― En código de JavaScript con document.write()

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

11
 JavaScript: Ventanas Pop Ups
● Ventanas emergentes que se abren, con diferentes
botones para el usuario:
― alert(texto)
― confirm(texto)
― prompt(texto, valor por defecto)

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

12
 AJAX: Introducción
● AJAX: Asynchronous JavaScript and XML. Técnica que
combina diferentes tecnologías
― JavaScript en el cliente
― Procedimiento para enviar al servidor peticiones de interés para
que se retorne sólo la parte de la página que cambia para
recargar sólo esa parte en lugar de recargar todo
― XML: En las peticiones y respuestas
― Asíncrono: Cuando se hace la petición, el cliente no se queda a
la espera, sino que puede seguir realizando
cosasXMLHttpRequest
● Ejemplos de aplicaciones que lo utilizan: Youtube, Google Maps,
Gmail

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

13
 AJAX: Secuencia del proceso
● La secuencia de pasos a modo general es la siguiente
― El cliente recibe cierto fichero en JavaScript. En dicho código en
JavaScript están definidas las acciones, eventos, etc. ante los
que reaccionar, algunos de los cuales lanzarán peticiones al
servidor para obtener ciertas respuestas
― El cliente construye un objeto XMLHttpRequest y envía una
petición a cierta página del servidor (ej. Servlet, PHP, ASP, etc.)
― El servidor construye una respuesta para la parte que ha pedido
el cliente y se la envía
― En el fichero JavaScript del cliente se puede obtener la
respuesta y proceder a actualizar lo adecuado en lugar de
recargar toda la página

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

14
 AJAX: Objeto XMLHttpRequest
● Se crea con un constructor según el tipo de navegador
● Métodos del objeto XMLHttpRequest
― open (string1, string2, boolean): Abre la petición a formar según
el método HTTP especificado en string1, hacia la página del
servidor establecido en string2 y de manera asíncrona o síncrona
según el último flag
― send(): Envía la petición al servidor
― setRequestHeader(param1, valor1): Pone parámetros y valores
en peticions POST. En GET van incrustados en la URL
― responseText. Devuelve respuesta como texto
― responseXML. Devuelve respuesta como XML (por ejemplo
manipulable con DOM luego)
― onreadystatechange, readystate, status
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
15
 AJAX: Algunas posibles
combinaciones
● Procesado del XML devuelto en el servidor
● Utilización de acceso a base de datos (el servidor es el
que lo hace y lo puede devolver al cliente)
● Ejercicio: En la aplicación de gestor de actividades
deportivas
― Actualizar sólo en la página del cliente, el listado de actividades
según cierto criterio de búsqueda, sin volver a cargar todo el
layout de la página completo

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

16
Trabajo propio del alumno asociado a
la sesión
● Tutorial de JavaScript (básico, objetos, avanzado,
ejemplos, referencias),
http://www.w3schools.com/js/default.asp
● Tutorial de AJAX (básico, HttpRequest, avanzado,
ejemplos), http://www.w3schools.com/ajax/default.asp

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

17
 Referencias Extra
● David Flanagan, “Javascript: The Definitive Guide”, Third
Edition, O'Reilly Media 1998
● Tutorial de AJAX,
http://www.cristalab.com/tutoriales/tutorial-de-ajax-c162l/
● AJAX books and resources,
http://theopensourcery.com/ajaxlinks.htm

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

18