Tema 14 Iissi 2 - j Query y AJAX PDF

Preview

Summary

Download Tema 14 Iissi 2 - j Query y AJAX PDF

Description

Introducción a la Ingeniería del Software y a los Sistemas de Información II RESUMEN TEMA 14 – JQUERY Y AJAX

•

AJAX: Asynchronous Javascript and XML. Se trata de un conjunto de técnicas de desarrollo de aplicaciones web asíncronas en el lado del cliente.

•

Permite actualizar (parte) de una web sin recargar la página (recibir/enviar información al servidor después de haber cargado la web). Se usa un objeto XMLHttpRequest para hacer peticiones al servidor.

•

Asíncrono vs. Síncrono:

•

Ejemplo de un formulario de alta de usuario: o Síncrono:

1

Introducción a la Ingeniería del Software y a los Sistemas de Información II

o

•

Asíncrono:

Implementación: o Con JavaScript (en cliente):

1. Manejamos el evento que necesitemos. 2. Creamos un objeto XMLHttpRequest. 3. Usamos ese objeto para hacer una petición al servidor web (mediante POST o GET). 4. Recibimos la respuesta del servidor y la procesamos.

o

Con PHP (en servidor):

1. Creamos un script que reciba la petición del cliente mediante POST o GET. 2. Atendemos la petición del cliente y enviamos una respuesta.

2

Introducción a la Ingeniería del Software y a los Sistemas de Información II •

Funciones jQuery para AJAX: o

Load: $(selector).load(URL, [datos, callback]) ▪ Carga en el elemento seleccionado el contenido HTML de la URL. ▪ Podemos pasarle parámetros a través de la URL: • Con GET: “URL?name1 = value1 & name2 = value2” • Con POST: $(selector).load(URL, {name1:value1, name2:value2}) ▪ callback: función que se invoca cuando la llamada load termina. • Callback(resultadoLlamada, status, XMLHttpRequestObj) o En resultadoLlamada podemos ver el contenido HTML devuelto por la URL: ▪ success: llamada terminada con éxito. ▪ notmodified: el documento no cambió. ▪ error: se ha producido un error. ▪ timeout: excesivo tiempo de carga. parsererror: el formato de los datos no es el esperado.

o

Get: $(selector).get(URL, [datos, callback]) ▪ Hace una petición al servidor mediante GET. ▪ Podemos pasarle parámetros en la propia llamada: • $(selector).get(URL, {name1:value1, name2:value2}) ▪ callback es similar al método load. ▪ Existe otro método similar para peticiones $.post() que contiene los mismos procedimientos.

3

Introducción a la Ingeniería del Software y a los Sistemas de Información II •

Ejemplo visto desde el cliente y desde el servidor:

Cliente

Servidor

4...