PDF de programación - 10-Introducción a AJAX

10-­‐Introducción
 a
 AJAX
 


 Curso:
 Desarrollo
 de
 aplicaciones
 web
 

Cris*na
 Puente,
 Rafael
 Palacios
 

2010-­‐2011
 

1
 

AJAX:
 definición
 

¿Qué
 es
 AJAX?
 
•  No
 es
 otro
 lenguaje
 de
 programación,
 sino
 un
 conjunto
 de
 

tecnologías
 

web
 interac*vas
 

•  Es
 un
 grupo
 de
 metodologías
 de
 desarrollo
 web
 para
 crear
 aplicaciones
 

•  Combina
 HTML,
 CSS,
 JavaScript,
 XML,
 y
 web
 services
 (servicios
 web)
 

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

3
 

¿Qué
 es
 AJAX?
 
•  Definición:
 

–  Asynchronous
 JavaScript
 and
 XML
 

•  Caracterís*cas
 

–  Combina
 JavaScript
 con
 web
 services
 (normalmente
 PHP)
 
–  Aplicaciones
 más
 interac*vas
 
–  Uso
 intensivo
 de
 HTML5
 y
 CSS
 

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

4
 

2
 

Aplicaciones
 AJAX
 

Aplicaciones
 AJAX
 
•  Aplicaciones
 basadas
 en
 JavaScript
 que
 se
 comunican
 con
 

servidores
 web
 para
 obtener/guardar/actualizar
 información.
 

Web server

HTML and JavaScript

2: web service

Database

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

6
 

Ejemplos
 de
 AJAX
 
•  Google
 Auto-­‐complete
 
•  Google
 Docs
 

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

7
 

Código
 AJAX
 (parte
 HTML)
 
 

//HTML objects

<select name="areas" onchange="MyAJAX(this.value);">

<option>--Select Area--</option>
<option value="13">ASI</option>
<option value="11">ADI</option>
<option value="14">GEA</option>
<option value="15">ASF</option>
<option value="1">REDES</option>
<option value="2">MAC</option>
<option value="3">SADSE</option>
<option value="4">RYE</option>

</select>

<br>

<div id="list">
</div>

Función JavaScript a llamar

Contenedor vacío

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

8
 

Código
 AJAX
 (Parte
 JavaScript)
 

//JavaScript function
function MyAJAX(value)
{
var destination=document.getElementById("list");
var doc = null;



doc = new XMLHttpRequest();
if (doc){

var my_url="http://www.iit.upcomillas.es/palacios/cursoAppWeb/areas.php?area="+value;
doc.open("GET", my_url, false);
doc.send(null);

//store result in list object
destination.innerHTML = doc.responseText;
}else{
destination.innerHTML = 'Browser unable to create XMLHttp Object';
}



}

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

9
 

Ejemplo
 de
 AJAX
 

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

10
 

Ejemplo
 de
 AJAX
 

OnChange

Web Service

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

11
 

Ejemplo
 de
 AJAX
 

answer

Nota: Utilizando formularios y PHP, la respuesta siempre es una página HTML
completa.

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

12
 

3
 

Resumen
 

AJAX:
 Resumen
 
•  Ventajas
 

–  Mínimo
 tráfico
 de
 datos
 
–  Aplicaciones
 más
 interac*vas
 
–  No
 es
 necesario
 repintar
 toda
 la
 págin
 
–  No
 es
 necesario
 esperar
 la
 respuesta
 (Ex.
 Google
 maps)
 

•  Desventajas
 

–  JavaScript
 debe
 estar
 ac*vado
 
–  Normalmente
 requiere
 una
 conexión
 de
 Internet
 ac*va
 

Departamento
 de
 Sistemas
 InformáAcos
 
Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 

Desarrollo
 de
 aplicaciones
 web
 
2011
 

14
 

Escuela
 Técnica
 Superior
 de
 Ingeniería
 ICAI
 
Alberto
 Aguilera
 25
 
28015
 Madrid
 
Tel
 +34
 91
 542
 28
 00
 
Fax
 +
 34
 91
 542
 31
 76
 
Iwww.icai.upcomillas.es
 

www.upcomillas.es