SlideShare una empresa de Scribd logo
Expo

 ¿Qué es AJAX?
 ¿Característica fundamental?
 Conocimientos previos.
 Ventajas
 Desventajas
 Un ejemplo con AJAX
 Se puede resolver
 Ventajas de esta actualización parcial
 Archivos requeridos
 Ejemplo
 El ejemplo anterior sin AJAX
 Ejemplo
Agenda.

 Objeto XMLHttpRequest
 Creación del Objeto XMLHttpRequest
 Retornamos el objeto XMLHttpRequest
 Propiedades de XMLHttpRequest
 Métodos principales del objeto XMLHttpRequest
 Ejercicio:
 Pasando datos al servidor por el método GET.
 Ejercicio:
 Conclusión
 Referencias
Agenda

Resultados

 AJAX son las siglas de Asynchronous JavaScript And
XML. (JavaScript y XML asíncronos).
 No es un lenguaje de programación sino un conjunto
de tecnologías (HTML-JavaScript-CSS-DHTML-
PHP/ASP.NET/JSP-XML)
 Nos permiten hacer páginas de internet más
interactivas.
¿Qué es AJAX?

 Permite actualizar parte de una página con
información que se encuentra en el servidor sin tener
que refrescar completamente la página.
 De modo similar podemos enviar información al
servidor.
¿Característica
fundamental?

 HTML o XHTML
 CSS
 JavaScript
 DHTML Básicamente debemos dominar todos los
objetos que proporciona el DOM.
 XML Para el envío y recepción de los datos entre el
cliente y el servidor.
 PHP o algún otro lenguaje que se ejecute en el
servidor (ASP.Net/JSP)
Conocimientos previos.

 Utiliza tecnologías ya existentes.
 Soportada por la mayoría de los navegadores
modernos.
 Interactividad. El usuario no tiene que esperar hasta
que lleguen los datos del servidor.
 Portabilidad (no requiere plug-in como Flash y
Applet de Java)
 Mayor velocidad, esto debido que no hay que
retornar toda la página nuevamente.
 La página se asemeja a una aplicación de escritorio.
Ventajas

 Se pierde el concepto de volver a la página anterior.
 Si se guarda en favoritos no necesariamente al visitar
nuevamente el sitio se ubique donde nos
encontrábamos al grabarla.
 La existencia de páginas con AJAX y otras sin esta
tecnología hace que el usuario se desoriente.
 Problemas con navegadores antiguos que no
implementan esta tecnología.
 No funciona si el usuario tiene desactivado el
JavaScript en su navegador.
Desventajas

 Requiere programadores que conozcan todas las
tecnologías que intervienen en AJAX.
 Dependiendo de la carga del servidor podemos
experimentar tiempos tardíos de respuesta que
desconciertan al visitante.
Desventajas

 Tenemos una lista de hipervínculos con los distintos
signos del horóscopo
 Queremos que al ser presionado no recargue la
página completa sino que se envíe una petición al
servidor y el mismo retorne la información de dicho
signo
 Luego se actualice solo el contenido de un div del
archivo HTML.
Un ejemplo con AJAX

 Si refrescamos la página completamente al presionar
el enlace.
 Pero nuestro objetivo es actualizar una pequeña
parte de la página y más precisamente el div que
debe mostrar los datos del signo seleccionado.
Se puede resolver…

 Reducimos el ancho de banda requerido al no tener
que recuperar toda la página.
 Agilizamos la actualización de la página.
 Reducimos el parpadeo de la página.
 Hacemos más natural la navegación del sitio.
Ventajas de esta
actualización parcial.

 El archivo HTML (es la página que se ve en el navegador)
 El archivo JS (contiene todas las rutinas JavaScript que
permiten actualizar dinámicamente la página HTML
(mediante DHTML) y las rutinas que permiten
comunicarse con el servidor para el envío y recepción de
información.
 La hoja de estilo, es decir el archivo CSS
 La página que contiene el script que se ejecuta en el
servidor(en nuestro caso emplearemos el lenguaje PHP)
Archivos requeridos.

Ejemplo:

 Volveremos a confeccionar el mismo problema que
muestra una lista de hipervínculos con los distintos
signos del horóscopo.
 A diferencia del problema expuesta en el concepto
anterior ahora no emplearemos AJAX.
 Recargaremos la página completamente al presionar
alguno de los hipervínculos.
El ejemplo anterior sin
AJAX.

Ejemplo:

 El objeto XMLHttpRequest es un elemento
fundamental para la comunicación asincrónica con el
servidor.
 Este objeto nos permite enviar y recibir información
en formato XML y en general en cualquier formato
(como vimos en el ejercicio anterior retornando un
trozo de archivo HTML)
Objeto XMLHttpRequest

 En Internet Explorer de Microsoft varia, ya que este
no lo incorpora en JavaScript sino que se trata de una
ActiveX:
if (window.ActiveXObject)
xmlHttp = new
ActiveXObject("Microsoft.XMLHTTP");
Creación del Objeto
XMLHttpRequest

 En cambio en FireFox y otros navegadores lo
incorpora JavaScript y procedemos para su creación
de la siguiente manera:
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
Creación del Objeto
XMLHttpRequest

 la función crearXMLHttpRequest se encargará de retornarnos un
objeto de la clase XMLHttpRequest.
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Retornamos el objeto
XMLHttpRequest

 onreadystatechange: Almacena el nombre de la función que se
ejecutará cuando el objeto XMLHttpRequest cambie de estado.
 readyState: Almacena el estado del requerimiento hecho al
servidor, pudiendo ser:
-0 No inicializado (el método open no a sido llamado)
-1 Cargando (se llamó al método open)
-2 Cargado (se llamó al método send y ya tenemos la
cabecera de la petición HTTP y el status)
-3 Interactivo (la propiedad responseText tiene datos
parciales)
-4 Completado (la propiedad responseText tiene
todos los datos pedidos al servidor)
Propiedades de
XMLHttpRequest

 responseText: Almacena el string devuelto por el
servidor, luego de haber hecho una petición.
 responseXML: Similar a la anterior (responseText)
con la diferencia que el string devuelto por el
servidor se encuentra en formato XML.
Propiedades de
XMLHttpRequest

 Open: Abre un requerimiento HTTP al servidor.
 send Envía el requerimiento al servidor.
Métodos principales del
objeto XMLHttpRequest

 Confeccionar una página que muestre una imagen y
permita calificarla con un valor entre 1 y 10.
 Permitir ingresar el nombre del visitante.
 Disponer de un control de tipo select para
seleccionar el valor.
 Luego al presionar un botón enviar el valor
seleccionado utilizando el objeto XMLHttpRequest al
servidor donde almacenaremos en un archivo de
texto el nombre del visitante y el puntaje.
 Retornar luego todos los votos hasta el momento.
Actualizaremos la página HTML con todos los
nombres y votos hasta el momento.
Ejercicio:

 Para indicar cual es el método de envío de los datos al
servidor lo hacemos en el primer parámetro del método
open del objeto XMLHttpRequest:
conexion1.open('GET','pagina1.php?puntaje='+voto+'&nomb
re='+nom, true);
 Seguido al nombre de la página debe ir el signo de
interrogación, el nombre del parámetro, luego un igual y
el valor del parámetro.
Pasando datos al servidor
por el método GET.

 Por último el tercer parámetro del método open
normalmente se pasa el valor true indicando que el
requerimiento de la página es asíncrona (esto
permite al visitante continuar interactuando con la
página sin que se congele hasta llegar la solicitud)
Pasando datos al servidor
por el método GET.

 Confeccionaremos un problema similar al anterior,
es decir que nos permita calificar una foto con un
valor de 1 al 10
 La diferencia es que la calificación será por medio de
una lista de hipervínculos del 1 al 10
 Además haremos que la barra de selección de la
calificación cambie de color cuando ingresamos con
el mouse.
Ejercicio:

 Luego de lo visto sobre AJAX, nos ha parecido una
herramienta muy importante, ya que nos brinda
ciertas funciones que permiten que los sitios web que
creemos, sean mas dinámicos y ligeros, gracias al
hecho de que no es necesario recargar todo el sitio
web al realizar ciertas acciones en el.
Conclusión

 http://www.ajaxya.com.ar/
 http://www.ajaxya.com.ar/temarios/descripcion.php?c
od=34&punto=2
 http://www.ajaxya.com.ar/temarios/descripcion.php?c
od=9&punto=3
 http://www.ajaxya.com.ar/temarios/descripcion.php?c
od=24&punto=4
 http://www.ajaxya.com.ar/temarios/descripcion.php?c
od=10&punto=5
 http://www.ajaxya.com.ar/temarios/descripcion.php?c
od=11&punto=6
Referencias

Más contenido relacionado

La actualidad más candente

Que es AJAX
Que es AJAXQue es AJAX
Que es AJAX
ITSTB
 
Ajax
AjaxAjax
Ajax
Hugoyali
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
Gustavo Salazar Loor
 
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: AjaxIntroducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
David Arango
 
SALUDOS EN INGLES
SALUDOS EN INGLESSALUDOS EN INGLES
SALUDOS EN INGLES
ludiviarosa
 
introduccion a Ajax
introduccion a Ajaxintroduccion a Ajax
introduccion a Ajax
Yair Ambrocio
 
AJAX
AJAXAJAX
AJAX
phidalgo
 
Asp
AspAsp
Asp
adezhiz
 
Taller programación web ajax con jquery
Taller programación web  ajax con jqueryTaller programación web  ajax con jquery
Taller programación web ajax con jquery
Pablo Galeana Bailey
 
Acciones JSP
Acciones JSPAcciones JSP
Acciones JSP
jubacalo
 
TUTORIAL Hot potatoes
TUTORIAL Hot potatoesTUTORIAL Hot potatoes
TUTORIAL Hot potatoes
uts
 
Charla Evento TestingUY 2018 - 911: Automatización para emergencias
Charla Evento TestingUY 2018 - 911: Automatización para emergenciasCharla Evento TestingUY 2018 - 911: Automatización para emergencias
Charla Evento TestingUY 2018 - 911: Automatización para emergencias
TestingUy
 
Servidor de prueba wamp
Servidor de prueba wampServidor de prueba wamp
Servidor de prueba wamp
edinson
 
11. Servicios Web Xml
11.  Servicios Web Xml11.  Servicios Web Xml
11. Servicios Web Xml
guest3cf6ff
 
Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de Ajax
Alvaro Castillo
 
10. Usando Datos Xml
10.  Usando Datos Xml10.  Usando Datos Xml
10. Usando Datos Xml
guest3cf6ff
 
Elementos de script en JSP
Elementos de script en JSPElementos de script en JSP
Elementos de script en JSP
jubacalo
 
Manual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQLManual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQL
pablo
 
Intro phpmin53
Intro phpmin53Intro phpmin53
Intro phpmin53
nptherapies
 
Acceso a BBDD mediante un servlet
Acceso a BBDD mediante un servletAcceso a BBDD mediante un servlet
Acceso a BBDD mediante un servlet
jubacalo
 

La actualidad más candente (20)

Que es AJAX
Que es AJAXQue es AJAX
Que es AJAX
 
Ajax
AjaxAjax
Ajax
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: AjaxIntroducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
 
SALUDOS EN INGLES
SALUDOS EN INGLESSALUDOS EN INGLES
SALUDOS EN INGLES
 
introduccion a Ajax
introduccion a Ajaxintroduccion a Ajax
introduccion a Ajax
 
AJAX
AJAXAJAX
AJAX
 
Asp
AspAsp
Asp
 
Taller programación web ajax con jquery
Taller programación web  ajax con jqueryTaller programación web  ajax con jquery
Taller programación web ajax con jquery
 
Acciones JSP
Acciones JSPAcciones JSP
Acciones JSP
 
TUTORIAL Hot potatoes
TUTORIAL Hot potatoesTUTORIAL Hot potatoes
TUTORIAL Hot potatoes
 
Charla Evento TestingUY 2018 - 911: Automatización para emergencias
Charla Evento TestingUY 2018 - 911: Automatización para emergenciasCharla Evento TestingUY 2018 - 911: Automatización para emergencias
Charla Evento TestingUY 2018 - 911: Automatización para emergencias
 
Servidor de prueba wamp
Servidor de prueba wampServidor de prueba wamp
Servidor de prueba wamp
 
11. Servicios Web Xml
11.  Servicios Web Xml11.  Servicios Web Xml
11. Servicios Web Xml
 
Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de Ajax
 
10. Usando Datos Xml
10.  Usando Datos Xml10.  Usando Datos Xml
10. Usando Datos Xml
 
Elementos de script en JSP
Elementos de script en JSPElementos de script en JSP
Elementos de script en JSP
 
Manual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQLManual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQL
 
Intro phpmin53
Intro phpmin53Intro phpmin53
Intro phpmin53
 
Acceso a BBDD mediante un servlet
Acceso a BBDD mediante un servletAcceso a BBDD mediante un servlet
Acceso a BBDD mediante un servlet
 

Destacado

moodle az ELTE TÓFK-on 3.
moodle az ELTE TÓFK-on 3.moodle az ELTE TÓFK-on 3.
moodle az ELTE TÓFK-on 3.
Tóth Attila
 
April 6 2011 Invest In America
April 6 2011 Invest In AmericaApril 6 2011 Invest In America
April 6 2011 Invest In America
Eliot Norman
 
Rita matriz estrategias de aprendizaje agosto19
Rita matriz estrategias de aprendizaje agosto19Rita matriz estrategias de aprendizaje agosto19
Rita matriz estrategias de aprendizaje agosto19
rititica
 
Ppt 12 juin 2015-finalisee
Ppt 12 juin 2015-finaliseePpt 12 juin 2015-finalisee
Ppt 12 juin 2015-finalisee
Luxemburger Wort
 
Comunicado familias alumnado de religión de p1 b y p1c
Comunicado familias alumnado de religión de p1 b y p1cComunicado familias alumnado de religión de p1 b y p1c
Comunicado familias alumnado de religión de p1 b y p1c
colenavalazarza
 
Olentz.argaz.power point
Olentz.argaz.power pointOlentz.argaz.power point
Olentz.argaz.power point
mgarayar
 
Analisis de una novela
Analisis de una novelaAnalisis de una novela
Analisis de una novela
mgarayar
 
Sementamos
SementamosSementamos
Sementamos
ptaibo
 
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referenciaRita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
rititica
 
USE OF STATISTICS
USE OF STATISTICSUSE OF STATISTICS
USE OF STATISTICS
ADARSH PANDEY
 
Que son las redes sociales parte 2 x d
Que son las redes sociales parte 2 x dQue son las redes sociales parte 2 x d
Que son las redes sociales parte 2 x d
Frutilopis
 
DIGITALISERING - Hur värden och möjligheter fångas
DIGITALISERING - Hur värden och möjligheter fångasDIGITALISERING - Hur värden och möjligheter fångas
DIGITALISERING - Hur värden och möjligheter fångas
Anders Kammenhed
 
Califica Instrucciones
Califica InstruccionesCalifica Instrucciones
Califica Instrucciones
calificabj
 
Presentación perros
Presentación perrosPresentación perros
Presentación perros
JUANWBG
 

Destacado (14)

moodle az ELTE TÓFK-on 3.
moodle az ELTE TÓFK-on 3.moodle az ELTE TÓFK-on 3.
moodle az ELTE TÓFK-on 3.
 
April 6 2011 Invest In America
April 6 2011 Invest In AmericaApril 6 2011 Invest In America
April 6 2011 Invest In America
 
Rita matriz estrategias de aprendizaje agosto19
Rita matriz estrategias de aprendizaje agosto19Rita matriz estrategias de aprendizaje agosto19
Rita matriz estrategias de aprendizaje agosto19
 
Ppt 12 juin 2015-finalisee
Ppt 12 juin 2015-finaliseePpt 12 juin 2015-finalisee
Ppt 12 juin 2015-finalisee
 
Comunicado familias alumnado de religión de p1 b y p1c
Comunicado familias alumnado de religión de p1 b y p1cComunicado familias alumnado de religión de p1 b y p1c
Comunicado familias alumnado de religión de p1 b y p1c
 
Olentz.argaz.power point
Olentz.argaz.power pointOlentz.argaz.power point
Olentz.argaz.power point
 
Analisis de una novela
Analisis de una novelaAnalisis de una novela
Analisis de una novela
 
Sementamos
SementamosSementamos
Sementamos
 
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referenciaRita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
Rita matriz estrategias_de_aprendizaje_agosto 19 matriz de referencia
 
USE OF STATISTICS
USE OF STATISTICSUSE OF STATISTICS
USE OF STATISTICS
 
Que son las redes sociales parte 2 x d
Que son las redes sociales parte 2 x dQue son las redes sociales parte 2 x d
Que son las redes sociales parte 2 x d
 
DIGITALISERING - Hur värden och möjligheter fångas
DIGITALISERING - Hur värden och möjligheter fångasDIGITALISERING - Hur värden och möjligheter fångas
DIGITALISERING - Hur värden och möjligheter fångas
 
Califica Instrucciones
Califica InstruccionesCalifica Instrucciones
Califica Instrucciones
 
Presentación perros
Presentación perrosPresentación perros
Presentación perros
 

Similar a Expo

Capitulo 4.7 prog iii
Capitulo 4.7 prog iiiCapitulo 4.7 prog iii
Capitulo 4.7 prog iii
Karla Abad Sacoto
 
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
pabloesp
 
7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona
Laura Folgado Galache
 
Presentacion ajax
Presentacion   ajaxPresentacion   ajax
Presentacion ajax
Alberto Lara A
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0
Arnulfo Gomez
 
Ajax ya temas 4-6 Equipo 2
Ajax ya temas 4-6 Equipo 2Ajax ya temas 4-6 Equipo 2
Ajax ya temas 4-6 Equipo 2
Guillermo Nassi
 
Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2
Michelle Aguirre
 
Ajax
AjaxAjax
Ajax
ousli07
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
Mayer Horna
 
Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jsp
dtbadboy0
 
Ajax Huancayo
Ajax HuancayoAjax Huancayo
Ajax Huancayo
Jonathan Lara Vasquez
 
Ajax
AjaxAjax
Ajax
jeci666h
 
Expo bañuelos
Expo bañuelosExpo bañuelos
Expo bañuelos
ruveron
 
Ajax
AjaxAjax
expo
expoexpo
expo
alguerrap
 
Ajax Atlas
Ajax AtlasAjax Atlas
Ajax Atlas
Vicente Ordonez
 
Ajax
AjaxAjax
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
cristian giovanny arciniegas
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
cristian giovanny arciniegas
 
Curso Jsp
Curso JspCurso Jsp
Curso Jsp
Luis Cerra
 

Similar a Expo (20)

Capitulo 4.7 prog iii
Capitulo 4.7 prog iiiCapitulo 4.7 prog iii
Capitulo 4.7 prog iii
 
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
 
7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona7. Utilización de mecanismos de comunicación asíncrona
7. Utilización de mecanismos de comunicación asíncrona
 
Presentacion ajax
Presentacion   ajaxPresentacion   ajax
Presentacion ajax
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0
 
Ajax ya temas 4-6 Equipo 2
Ajax ya temas 4-6 Equipo 2Ajax ya temas 4-6 Equipo 2
Ajax ya temas 4-6 Equipo 2
 
Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2
 
Ajax
AjaxAjax
Ajax
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jsp
 
Ajax Huancayo
Ajax HuancayoAjax Huancayo
Ajax Huancayo
 
Ajax
AjaxAjax
Ajax
 
Expo bañuelos
Expo bañuelosExpo bañuelos
Expo bañuelos
 
Ajax
AjaxAjax
Ajax
 
expo
expoexpo
expo
 
Ajax Atlas
Ajax AtlasAjax Atlas
Ajax Atlas
 
Ajax
AjaxAjax
Ajax
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
 
Curso Jsp
Curso JspCurso Jsp
Curso Jsp
 

Último

DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
estudios22
 
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
sunwndniel
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
walter729637
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
sunwndniel
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
Henry W. Zavala
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
cyberquiximies
 
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videosCAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
Iris505525
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
Katia Reyes
 
Presentación Redes Sociales Moderno Morado.pdf
Presentación Redes Sociales Moderno Morado.pdfPresentación Redes Sociales Moderno Morado.pdf
Presentación Redes Sociales Moderno Morado.pdf
anniehuanhuayo80
 
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptxDESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
fortinodominguez78
 
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
bellomiguelangel68
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
gregory760891
 
MATERIAL BASE D A T O S .docx
MATERIAL BASE    D A T O S              .docxMATERIAL BASE    D A T O S              .docx
MATERIAL BASE D A T O S .docx
CarlosAndresLoaizaRe
 
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
KEVINYOICIAQUINOSORI
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
MenaOlortinYherlyEli
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
correodetareas
 

Último (16)

DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
 
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
 
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videosCAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
 
Presentación Redes Sociales Moderno Morado.pdf
Presentación Redes Sociales Moderno Morado.pdfPresentación Redes Sociales Moderno Morado.pdf
Presentación Redes Sociales Moderno Morado.pdf
 
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptxDESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
 
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
 
MATERIAL BASE D A T O S .docx
MATERIAL BASE    D A T O S              .docxMATERIAL BASE    D A T O S              .docx
MATERIAL BASE D A T O S .docx
 
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
 

Expo

  • 2.   ¿Qué es AJAX?  ¿Característica fundamental?  Conocimientos previos.  Ventajas  Desventajas  Un ejemplo con AJAX  Se puede resolver  Ventajas de esta actualización parcial  Archivos requeridos  Ejemplo  El ejemplo anterior sin AJAX  Ejemplo Agenda.
  • 3.   Objeto XMLHttpRequest  Creación del Objeto XMLHttpRequest  Retornamos el objeto XMLHttpRequest  Propiedades de XMLHttpRequest  Métodos principales del objeto XMLHttpRequest  Ejercicio:  Pasando datos al servidor por el método GET.  Ejercicio:  Conclusión  Referencias Agenda
  • 5.   AJAX son las siglas de Asynchronous JavaScript And XML. (JavaScript y XML asíncronos).  No es un lenguaje de programación sino un conjunto de tecnologías (HTML-JavaScript-CSS-DHTML- PHP/ASP.NET/JSP-XML)  Nos permiten hacer páginas de internet más interactivas. ¿Qué es AJAX?
  • 6.   Permite actualizar parte de una página con información que se encuentra en el servidor sin tener que refrescar completamente la página.  De modo similar podemos enviar información al servidor. ¿Característica fundamental?
  • 7.   HTML o XHTML  CSS  JavaScript  DHTML Básicamente debemos dominar todos los objetos que proporciona el DOM.  XML Para el envío y recepción de los datos entre el cliente y el servidor.  PHP o algún otro lenguaje que se ejecute en el servidor (ASP.Net/JSP) Conocimientos previos.
  • 8.   Utiliza tecnologías ya existentes.  Soportada por la mayoría de los navegadores modernos.  Interactividad. El usuario no tiene que esperar hasta que lleguen los datos del servidor.  Portabilidad (no requiere plug-in como Flash y Applet de Java)  Mayor velocidad, esto debido que no hay que retornar toda la página nuevamente.  La página se asemeja a una aplicación de escritorio. Ventajas
  • 9.   Se pierde el concepto de volver a la página anterior.  Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos encontrábamos al grabarla.  La existencia de páginas con AJAX y otras sin esta tecnología hace que el usuario se desoriente.  Problemas con navegadores antiguos que no implementan esta tecnología.  No funciona si el usuario tiene desactivado el JavaScript en su navegador. Desventajas
  • 10.   Requiere programadores que conozcan todas las tecnologías que intervienen en AJAX.  Dependiendo de la carga del servidor podemos experimentar tiempos tardíos de respuesta que desconciertan al visitante. Desventajas
  • 11.   Tenemos una lista de hipervínculos con los distintos signos del horóscopo  Queremos que al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo  Luego se actualice solo el contenido de un div del archivo HTML. Un ejemplo con AJAX
  • 12.   Si refrescamos la página completamente al presionar el enlace.  Pero nuestro objetivo es actualizar una pequeña parte de la página y más precisamente el div que debe mostrar los datos del signo seleccionado. Se puede resolver…
  • 13.   Reducimos el ancho de banda requerido al no tener que recuperar toda la página.  Agilizamos la actualización de la página.  Reducimos el parpadeo de la página.  Hacemos más natural la navegación del sitio. Ventajas de esta actualización parcial.
  • 14.   El archivo HTML (es la página que se ve en el navegador)  El archivo JS (contiene todas las rutinas JavaScript que permiten actualizar dinámicamente la página HTML (mediante DHTML) y las rutinas que permiten comunicarse con el servidor para el envío y recepción de información.  La hoja de estilo, es decir el archivo CSS  La página que contiene el script que se ejecuta en el servidor(en nuestro caso emplearemos el lenguaje PHP) Archivos requeridos.
  • 16.   Volveremos a confeccionar el mismo problema que muestra una lista de hipervínculos con los distintos signos del horóscopo.  A diferencia del problema expuesta en el concepto anterior ahora no emplearemos AJAX.  Recargaremos la página completamente al presionar alguno de los hipervínculos. El ejemplo anterior sin AJAX.
  • 18.   El objeto XMLHttpRequest es un elemento fundamental para la comunicación asincrónica con el servidor.  Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML) Objeto XMLHttpRequest
  • 19.   En Internet Explorer de Microsoft varia, ya que este no lo incorpora en JavaScript sino que se trata de una ActiveX: if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); Creación del Objeto XMLHttpRequest
  • 20.   En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su creación de la siguiente manera: if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); Creación del Objeto XMLHttpRequest
  • 21.   la función crearXMLHttpRequest se encargará de retornarnos un objeto de la clase XMLHttpRequest. function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; } Retornamos el objeto XMLHttpRequest
  • 22.   onreadystatechange: Almacena el nombre de la función que se ejecutará cuando el objeto XMLHttpRequest cambie de estado.  readyState: Almacena el estado del requerimiento hecho al servidor, pudiendo ser: -0 No inicializado (el método open no a sido llamado) -1 Cargando (se llamó al método open) -2 Cargado (se llamó al método send y ya tenemos la cabecera de la petición HTTP y el status) -3 Interactivo (la propiedad responseText tiene datos parciales) -4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor) Propiedades de XMLHttpRequest
  • 23.   responseText: Almacena el string devuelto por el servidor, luego de haber hecho una petición.  responseXML: Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML. Propiedades de XMLHttpRequest
  • 24.   Open: Abre un requerimiento HTTP al servidor.  send Envía el requerimiento al servidor. Métodos principales del objeto XMLHttpRequest
  • 25.   Confeccionar una página que muestre una imagen y permita calificarla con un valor entre 1 y 10.  Permitir ingresar el nombre del visitante.  Disponer de un control de tipo select para seleccionar el valor.  Luego al presionar un botón enviar el valor seleccionado utilizando el objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del visitante y el puntaje.  Retornar luego todos los votos hasta el momento. Actualizaremos la página HTML con todos los nombres y votos hasta el momento. Ejercicio:
  • 26.   Para indicar cual es el método de envío de los datos al servidor lo hacemos en el primer parámetro del método open del objeto XMLHttpRequest: conexion1.open('GET','pagina1.php?puntaje='+voto+'&nomb re='+nom, true);  Seguido al nombre de la página debe ir el signo de interrogación, el nombre del parámetro, luego un igual y el valor del parámetro. Pasando datos al servidor por el método GET.
  • 27.   Por último el tercer parámetro del método open normalmente se pasa el valor true indicando que el requerimiento de la página es asíncrona (esto permite al visitante continuar interactuando con la página sin que se congele hasta llegar la solicitud) Pasando datos al servidor por el método GET.
  • 28.   Confeccionaremos un problema similar al anterior, es decir que nos permita calificar una foto con un valor de 1 al 10  La diferencia es que la calificación será por medio de una lista de hipervínculos del 1 al 10  Además haremos que la barra de selección de la calificación cambie de color cuando ingresamos con el mouse. Ejercicio:
  • 29.   Luego de lo visto sobre AJAX, nos ha parecido una herramienta muy importante, ya que nos brinda ciertas funciones que permiten que los sitios web que creemos, sean mas dinámicos y ligeros, gracias al hecho de que no es necesario recargar todo el sitio web al realizar ciertas acciones en el. Conclusión
  • 30.   http://www.ajaxya.com.ar/  http://www.ajaxya.com.ar/temarios/descripcion.php?c od=34&punto=2  http://www.ajaxya.com.ar/temarios/descripcion.php?c od=9&punto=3  http://www.ajaxya.com.ar/temarios/descripcion.php?c od=24&punto=4  http://www.ajaxya.com.ar/temarios/descripcion.php?c od=10&punto=5  http://www.ajaxya.com.ar/temarios/descripcion.php?c od=11&punto=6 Referencias