10#introducción.a.ajax. · 2011. 5. 9. · departamentodesistemasinformácos. 10....
TRANSCRIPT
![Page 1: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/1.jpg)
2010-‐2011
10-‐Introducción a AJAX
Curso: Desarrollo de aplicaciones web
Cris*na Puente, Rafael Palacios
![Page 2: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/2.jpg)
AJAX: definición
1
![Page 3: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/3.jpg)
3 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
¿Qué es AJAX? • No es otro lenguaje de programación, sino un conjunto de tecnologías
• Es un grupo de metodologías de desarrollo web para crear aplicaciones web interac*vas
• Combina HTML, CSS, JavaScript, XML, y web services (servicios web)
![Page 4: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/4.jpg)
4 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
¿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
![Page 5: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/5.jpg)
Aplicaciones AJAX
2
![Page 6: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/6.jpg)
6 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
Aplicaciones AJAX • Aplicaciones basadas en JavaScript que se comunican con servidores web para obtener/guardar/actualizar información.
Database
HTML and JavaScript
Web server
2: web service
![Page 7: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/7.jpg)
7 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
Ejemplos de AJAX • Google Auto-‐complete • Google Docs
![Page 8: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/8.jpg)
8 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
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
![Page 9: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/9.jpg)
9 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
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'; }
}
![Page 10: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/10.jpg)
10 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
Ejemplo de AJAX
![Page 11: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/11.jpg)
11 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
Ejemplo de AJAX
OnChange
Web Service
![Page 12: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/12.jpg)
12 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
Ejemplo de AJAX
answer
Nota: Utilizando formularios y PHP, la respuesta siempre es una página HTML completa.
![Page 13: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/13.jpg)
Resumen
3
![Page 14: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/14.jpg)
14 Departamento de Sistemas InformáAcos Escuela Técnica Superior de Ingeniería ICAI
Desarrollo de aplicaciones web 2011
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
![Page 15: 10#Introducción.a.AJAX. · 2011. 5. 9. · DepartamentodeSistemasInformácos. 10. Escuela.Técnica.Superior.de.Ingeniería.ICAI. Desarrollode aplicacionesweb. 2011 Ejemplo.de.AJAX](https://reader033.vdocuments.site/reader033/viewer/2022060920/60ac61a7b4deef1722349eba/html5/thumbnails/15.jpg)
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