SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
UNIDAD 3
AJAX
Presenta:
Dávila García Beatriz Ivonne – 10410169
Escárcega Enriquez Jesús Javier – 10410567
Ingeniería en Sistemas Computacionales
1
jueves, 8 de mayo
de 2014
 Objetivo de la actividad.
Realizar una actividad para comprender la exposición del
primer acercamiento a AJAX.
 Agenda
13. Mostrar un gif animado mientras se envían y reciben los
datos del servidor.
14. Paginación con AJAX.
15. Controlador de tipo select.
2
jueves, 8 de mayo
de 2014
Mostrar un gif animado mientras se envían y
reciben los datos del servidor.
 Hasta ahora mientras se actualiza la página
mostramos un texto: 'Procesando...', es muy común
utilizar un gif animado que represente tal
operación.
3
jueves, 8 de mayo
de 2014
Mostrar un gif animado mientras se envían y
reciben los datos del servidor.
 Haremos una serie de páginas que nos permitan enviar los
datos cargados en un formulario al servidor en forma
asincrónica y mostraremos un gif animado mientras dura el
envío de datos. El formulario solicitará que ingrese el nombre
y sus comentarios.
4
jueves, 8 de mayo
de 2014
Código HTML
5
jueves, 8 de mayo
de 2014
Código JavaScript
6
jueves, 8 de mayo
de 2014
JavaScript
7
jueves, 8 de mayo
de 2014
JavaScript
8
jueves, 8 de mayo
de 2014
PHP
9
jueves, 8 de mayo
de 2014
13. Ejemplo mostrar gif animado
10
jueves, 8 de mayo
de 2014
14. Paginación con AJAX
 Un lugar donde puede ayudar el uso de AJAX es en la
paginación de datos mientras otro recurso en la página se
está ejecutando. Confeccionaremos una página que muestre
un video e inmediatamente en la parte inferior mostraremos
los comentarios del video paginados.
 Sin utilizar AJAX estamos obligados a recargar completamente
la página lo que haría imposible ver el video y recorrer los
comentarios en forma completa (considerando que solo parte
de los comentarios están en la página)
11
jueves, 8 de mayo
de 2014
14. Ejemplo Paginación con AJAX
 Simulador (Cuando presiona el botón "ejecutar el programa"
se graban todos los cuadros de texto y se ejecuta el primero
de la lista mostrando en una página el resultado.)
 Confeccionar una página que muestre un video e
inmediatamente en la parte inferior mostrar los comentarios
del video paginados. Actualizar los datos de cada página en
forma asíncrona.
12
jueves, 8 de mayo
de 2014
Código HTML
13
jueves, 8 de mayo
de 2014
Código Javascript
14
jueves, 8 de mayo
de 2014
Código PHP
15
jueves, 8 de mayo
de 2014
Código PHP
16
jueves, 8 de mayo
de 2014
Código PHP
17
jueves, 8 de mayo
de 2014
Código PHP
18
jueves, 8 de mayo
de 2014
14. Ejemplo Paginación con AJAX
19
jueves, 8 de mayo
de 2014
15.Cargar un control de tipo Select
 Confeccionaremos un problema que contenga dos controles
de tipo select. En el primero almacenaremos una lista de
carreras de estudio ("Analista de
Sistemas","Telecomunicaciones" y "WebMaster")
 Cuando se seleccione una carrera enviaremos una petición al
servidor para que retorne todas las materias que tiene esa
carrera y procederemos a la carga del segundo select.
20
jueves, 8 de mayo
de 2014
15. Ejemplo
 Simulador (Cuando presiona el botón "ejecutar el programa"
se graban todos los cuadros de texto y se ejecuta el primero
de la lista mostrando en una página el resultado.)
 Confeccionaremos un problema que contenga dos controles
de tipo select. En el primero almacenar una lista de carreras
de estudio ("Analista de Sistemas","Telecomunicaciones" y
"WebMaster") y en el segundo los nombres de las materias de
la carrera seleccionada. Rescatar los datos del servidor en el
momento que se selecciona una carrera.
21
jueves, 8 de mayo
de 2014
Código HTML
22
jueves, 8 de mayo
de 2014
Código Javascript
23
jueves, 8 de mayo
de 2014
Código Javascript
24
jueves, 8 de mayo
de 2014
Código PHP
25
jueves, 8 de mayo
de 2014
Cargar un control de Tipo Select
26
jueves, 8 de mayo
de 2014
 Contratiempos presentados al realizar la actividad.
Se desconocía del funcionamiento exacto de algunas
funciones y métodos.
 Opinión acerca de la dificultad de la actividad y el tiempo y
formato de entrega.
Consideramos ambas cosas adecuadas.
 Tiempo aproximado de realización (en horas).
El tiempo aproximado para realizar la actividad fue de 8 horas
aproximadamente.
27
jueves, 8 de mayo
de 2014
 Ajax es una herramienta bastante útil que viene a
revolucionar la interacción que se tiene con las
aplicaciones web pues gracias a esto se evita
perder tiempo en espera de respuesta de alguna
búsqueda o simplemente se puede continuar
trabajando aún y cuando se haya solicitado alguna
petición al servidor.
28
jueves, 8 de mayo
de 2014
29
Gracias por su
Atención!
jueves, 8 de mayo
de 2014

Más contenido relacionado

Destacado

Les FevribéBéS Et Leur Famille Finale
Les FevribéBéS Et Leur Famille FinaleLes FevribéBéS Et Leur Famille Finale
Les FevribéBéS Et Leur Famille Finaledreamtim35
 
Université d'été
Université d'étéUniversité d'été
Université d'étébasileniane
 
La rue nous appartient
La rue nous appartientLa rue nous appartient
La rue nous appartientmarkeambard
 
Stanley kubrick
Stanley kubrickStanley kubrick
Stanley kubrickfrizzole
 
Importance de l interdiction du riba
Importance de l interdiction du ribaImportance de l interdiction du riba
Importance de l interdiction du ribauuploadpdf
 
Tratamirnto del iam ruben y alex
Tratamirnto del iam ruben y alexTratamirnto del iam ruben y alex
Tratamirnto del iam ruben y alexRuben Aparicio
 
Actividad 3 analizando un objeto tecnologico cotidiano
Actividad 3 analizando un objeto tecnologico cotidianoActividad 3 analizando un objeto tecnologico cotidiano
Actividad 3 analizando un objeto tecnologico cotidianoMaria Garcia
 
l'ecole des cancres
l'ecole des cancresl'ecole des cancres
l'ecole des cancresfouadsimba
 
Journée de ressourcement
Journée de ressourcementJournée de ressourcement
Journée de ressourcementLouise Boisvert
 
Reunion Des Groupes Le 17 Mai
Reunion Des Groupes Le 17 MaiReunion Des Groupes Le 17 Mai
Reunion Des Groupes Le 17 Maicedric39
 
Modeste Zoubabela Message Au Peuple[1]
Modeste Zoubabela Message Au Peuple[1]Modeste Zoubabela Message Au Peuple[1]
Modeste Zoubabela Message Au Peuple[1]guestb6a6099
 
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle Systematic
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle SystematicCompte rendu mission US Big Data - Data Analytics CCI Paris et Pôle Systematic
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle SystematicMatthias Fille
 
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèse
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèseSéminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèse
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèseSCD Paris-Sorbonne
 
Se motiver à travailler n°4
Se motiver à travailler n°4Se motiver à travailler n°4
Se motiver à travailler n°4Helene Weber
 
48503 FêTe Du ChrysanthéMe
48503 FêTe Du ChrysanthéMe48503 FêTe Du ChrysanthéMe
48503 FêTe Du ChrysanthéMeTania Montandon
 

Destacado (20)

07 balafon mars 2012
07 balafon mars 201207 balafon mars 2012
07 balafon mars 2012
 
Les FevribéBéS Et Leur Famille Finale
Les FevribéBéS Et Leur Famille FinaleLes FevribéBéS Et Leur Famille Finale
Les FevribéBéS Et Leur Famille Finale
 
Université d'été
Université d'étéUniversité d'été
Université d'été
 
La rue nous appartient
La rue nous appartientLa rue nous appartient
La rue nous appartient
 
Jrg 20 avril 2010
Jrg 20 avril 2010Jrg 20 avril 2010
Jrg 20 avril 2010
 
Chiots
ChiotsChiots
Chiots
 
Stanley kubrick
Stanley kubrickStanley kubrick
Stanley kubrick
 
Importance de l interdiction du riba
Importance de l interdiction du ribaImportance de l interdiction du riba
Importance de l interdiction du riba
 
Tratamirnto del iam ruben y alex
Tratamirnto del iam ruben y alexTratamirnto del iam ruben y alex
Tratamirnto del iam ruben y alex
 
Actividad 3 analizando un objeto tecnologico cotidiano
Actividad 3 analizando un objeto tecnologico cotidianoActividad 3 analizando un objeto tecnologico cotidiano
Actividad 3 analizando un objeto tecnologico cotidiano
 
Maltrato animal
Maltrato animalMaltrato animal
Maltrato animal
 
l'ecole des cancres
l'ecole des cancresl'ecole des cancres
l'ecole des cancres
 
Journée de ressourcement
Journée de ressourcementJournée de ressourcement
Journée de ressourcement
 
Reunion Des Groupes Le 17 Mai
Reunion Des Groupes Le 17 MaiReunion Des Groupes Le 17 Mai
Reunion Des Groupes Le 17 Mai
 
Modeste Zoubabela Message Au Peuple[1]
Modeste Zoubabela Message Au Peuple[1]Modeste Zoubabela Message Au Peuple[1]
Modeste Zoubabela Message Au Peuple[1]
 
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle Systematic
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle SystematicCompte rendu mission US Big Data - Data Analytics CCI Paris et Pôle Systematic
Compte rendu mission US Big Data - Data Analytics CCI Paris et Pôle Systematic
 
Informatique
InformatiqueInformatique
Informatique
 
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèse
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèseSéminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèse
Séminaire Les Humanités numériques (9/1/2013) : Le circuit de la thèse
 
Se motiver à travailler n°4
Se motiver à travailler n°4Se motiver à travailler n°4
Se motiver à travailler n°4
 
48503 FêTe Du ChrysanthéMe
48503 FêTe Du ChrysanthéMe48503 FêTe Du ChrysanthéMe
48503 FêTe Du ChrysanthéMe
 

Similar a AJAX-Unidad3

Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control ToolkitDesarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkitpabloesp
 
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicas
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicasASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicas
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicasVíctor Acosta Santivañez
 
Web matrix session 3
Web matrix session 3Web matrix session 3
Web matrix session 3Gonzalo C.
 
Clase 5 AJAX - Desarrollo de aplicaciones móviles
Clase 5  AJAX - Desarrollo de aplicaciones móvilesClase 5  AJAX - Desarrollo de aplicaciones móviles
Clase 5 AJAX - Desarrollo de aplicaciones móvilesChristian Cabrera
 
Práctica 1 instalacion del servidor web
Práctica 1   instalacion del servidor webPráctica 1   instalacion del servidor web
Práctica 1 instalacion del servidor webJuan Anaya
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaverLuis Viteri
 
[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajax[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajaxJesus Vargas
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008Mitusin
 
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10Juan Carlos Ruiz Pacheco
 
Reportes En J Developer Parte 1 Y 2
Reportes En J Developer   Parte 1 Y 2Reportes En J Developer   Parte 1 Y 2
Reportes En J Developer Parte 1 Y 2Steven Gomez
 
Aplicaciones Web con Spring Boot
Aplicaciones Web con Spring BootAplicaciones Web con Spring Boot
Aplicaciones Web con Spring BootCarlos E. Salazar
 
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...Pablo Godel
 
Introducción a las aplicaciones web con java
Introducción a las aplicaciones web con javaIntroducción a las aplicaciones web con java
Introducción a las aplicaciones web con javaPedro Arteaga
 

Similar a AJAX-Unidad3 (20)

AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control ToolkitDesarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
 
Asp.net
Asp.netAsp.net
Asp.net
 
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicas
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicasASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicas
ASP.NET Guia de desarrollo de sitios y aplicaciones web dinamicas
 
Web matrix session 3
Web matrix session 3Web matrix session 3
Web matrix session 3
 
expo
expoexpo
expo
 
Clase 5 AJAX - Desarrollo de aplicaciones móviles
Clase 5  AJAX - Desarrollo de aplicaciones móvilesClase 5  AJAX - Desarrollo de aplicaciones móviles
Clase 5 AJAX - Desarrollo de aplicaciones móviles
 
Ajax
AjaxAjax
Ajax
 
Práctica 1 instalacion del servidor web
Práctica 1   instalacion del servidor webPráctica 1   instalacion del servidor web
Práctica 1 instalacion del servidor web
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajax[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajax
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008
 
ProjectZero
ProjectZeroProjectZero
ProjectZero
 
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
 
Reportes En J Developer Parte 1 Y 2
Reportes En J Developer   Parte 1 Y 2Reportes En J Developer   Parte 1 Y 2
Reportes En J Developer Parte 1 Y 2
 
Dar lab1819
Dar lab1819Dar lab1819
Dar lab1819
 
Aplicaciones Web con Spring Boot
Aplicaciones Web con Spring BootAplicaciones Web con Spring Boot
Aplicaciones Web con Spring Boot
 
Ajax
AjaxAjax
Ajax
 
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
 
Introducción a las aplicaciones web con java
Introducción a las aplicaciones web con javaIntroducción a las aplicaciones web con java
Introducción a las aplicaciones web con java
 

Último

#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nóminacuellosameidy
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Tecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaTecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaElizabethLpezSoto
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
Trabajo de Tecnología .pdfywhwhejsjsjsjsjsk
Trabajo de Tecnología .pdfywhwhejsjsjsjsjskTrabajo de Tecnología .pdfywhwhejsjsjsjsjsk
Trabajo de Tecnología .pdfywhwhejsjsjsjsjskbydaniela5
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaYeimys Ch
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y maslida630411
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
Trabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalTrabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalEmanuelCastro64
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdftecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdflauralizcano0319
 

Último (20)

#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nómina
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Tecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestríaTecnología Educativa- presentación maestría
Tecnología Educativa- presentación maestría
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
Trabajo de Tecnología .pdfywhwhejsjsjsjsjsk
Trabajo de Tecnología .pdfywhwhejsjsjsjsjskTrabajo de Tecnología .pdfywhwhejsjsjsjsjsk
Trabajo de Tecnología .pdfywhwhejsjsjsjsjsk
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y mas
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
Trabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamentalTrabajo de tecnología liceo departamental
Trabajo de tecnología liceo departamental
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdftecnologiaactividad11-240323205859-a9b9b9bc.pdf
tecnologiaactividad11-240323205859-a9b9b9bc.pdf
 

AJAX-Unidad3

  • 1. UNIDAD 3 AJAX Presenta: Dávila García Beatriz Ivonne – 10410169 Escárcega Enriquez Jesús Javier – 10410567 Ingeniería en Sistemas Computacionales 1 jueves, 8 de mayo de 2014
  • 2.  Objetivo de la actividad. Realizar una actividad para comprender la exposición del primer acercamiento a AJAX.  Agenda 13. Mostrar un gif animado mientras se envían y reciben los datos del servidor. 14. Paginación con AJAX. 15. Controlador de tipo select. 2 jueves, 8 de mayo de 2014
  • 3. Mostrar un gif animado mientras se envían y reciben los datos del servidor.  Hasta ahora mientras se actualiza la página mostramos un texto: 'Procesando...', es muy común utilizar un gif animado que represente tal operación. 3 jueves, 8 de mayo de 2014
  • 4. Mostrar un gif animado mientras se envían y reciben los datos del servidor.  Haremos una serie de páginas que nos permitan enviar los datos cargados en un formulario al servidor en forma asincrónica y mostraremos un gif animado mientras dura el envío de datos. El formulario solicitará que ingrese el nombre y sus comentarios. 4 jueves, 8 de mayo de 2014
  • 5. Código HTML 5 jueves, 8 de mayo de 2014
  • 9. PHP 9 jueves, 8 de mayo de 2014
  • 10. 13. Ejemplo mostrar gif animado 10 jueves, 8 de mayo de 2014
  • 11. 14. Paginación con AJAX  Un lugar donde puede ayudar el uso de AJAX es en la paginación de datos mientras otro recurso en la página se está ejecutando. Confeccionaremos una página que muestre un video e inmediatamente en la parte inferior mostraremos los comentarios del video paginados.  Sin utilizar AJAX estamos obligados a recargar completamente la página lo que haría imposible ver el video y recorrer los comentarios en forma completa (considerando que solo parte de los comentarios están en la página) 11 jueves, 8 de mayo de 2014
  • 12. 14. Ejemplo Paginación con AJAX  Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.)  Confeccionar una página que muestre un video e inmediatamente en la parte inferior mostrar los comentarios del video paginados. Actualizar los datos de cada página en forma asíncrona. 12 jueves, 8 de mayo de 2014
  • 13. Código HTML 13 jueves, 8 de mayo de 2014
  • 15. Código PHP 15 jueves, 8 de mayo de 2014
  • 16. Código PHP 16 jueves, 8 de mayo de 2014
  • 17. Código PHP 17 jueves, 8 de mayo de 2014
  • 18. Código PHP 18 jueves, 8 de mayo de 2014
  • 19. 14. Ejemplo Paginación con AJAX 19 jueves, 8 de mayo de 2014
  • 20. 15.Cargar un control de tipo Select  Confeccionaremos un problema que contenga dos controles de tipo select. En el primero almacenaremos una lista de carreras de estudio ("Analista de Sistemas","Telecomunicaciones" y "WebMaster")  Cuando se seleccione una carrera enviaremos una petición al servidor para que retorne todas las materias que tiene esa carrera y procederemos a la carga del segundo select. 20 jueves, 8 de mayo de 2014
  • 21. 15. Ejemplo  Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.)  Confeccionaremos un problema que contenga dos controles de tipo select. En el primero almacenar una lista de carreras de estudio ("Analista de Sistemas","Telecomunicaciones" y "WebMaster") y en el segundo los nombres de las materias de la carrera seleccionada. Rescatar los datos del servidor en el momento que se selecciona una carrera. 21 jueves, 8 de mayo de 2014
  • 22. Código HTML 22 jueves, 8 de mayo de 2014
  • 25. Código PHP 25 jueves, 8 de mayo de 2014
  • 26. Cargar un control de Tipo Select 26 jueves, 8 de mayo de 2014
  • 27.  Contratiempos presentados al realizar la actividad. Se desconocía del funcionamiento exacto de algunas funciones y métodos.  Opinión acerca de la dificultad de la actividad y el tiempo y formato de entrega. Consideramos ambas cosas adecuadas.  Tiempo aproximado de realización (en horas). El tiempo aproximado para realizar la actividad fue de 8 horas aproximadamente. 27 jueves, 8 de mayo de 2014
  • 28.  Ajax es una herramienta bastante útil que viene a revolucionar la interacción que se tiene con las aplicaciones web pues gracias a esto se evita perder tiempo en espera de respuesta de alguna búsqueda o simplemente se puede continuar trabajando aún y cuando se haya solicitado alguna petición al servidor. 28 jueves, 8 de mayo de 2014