JavaScript y AJAX JavaScript y AJAX
Pedro J. Muñoz Merino Pedro J. Muñoz Merino
http://www.it.uc3m.es/pedmume/
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
― 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
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?
el servidor esa operación?
― ¿La acción a realizar cargará mucho al servidor cuando hay muchas peticiones a la vez en el mismo?
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
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 s2=“rojo”;
var s3;
s3=s1+” “+s2;
document.write(s3);
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;
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 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)
JavaScript: Operadores
●
Aritméticos entre números enteros:
+ - * / %
●
Comparación:
< > == === != <= >=
< > == === != <= >=
●
Lógicos:
&& || !
JavaScript: Estructuras de Control
●
if
●
while
●
for
●
switch
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
― 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
JavaScript: Impresión de información
●
Se puede dar una respuesta en JavaScript
― Intercalando etiquetas HTML
― En código de JavaScript con document.write()
JavaScript: Ventanas Pop Ups
●
Ventanas emergentes que se abren, con diferentes botones para el usuario:
― alert(texto)
― confirm(texto)
― prompt(texto, valor por defecto)
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
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.) 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
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)
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
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
ejemplos), http://www.w3schools.com/ajax/default.asp
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/
●
