SlideShare a Scribd company logo
1 of 12
PROGRAMACIÓN III

             AJAX
Modelo de aplicaciones web básicas
   Se realiza un HTTP request al servidor web.
   Retorna una página HTML en respuesta al cliente.


    1.   Submits sent to actions
    2.   Actions perform work and then forward to next page
    3.   Page refresh occur for each submit.

    !!! Comportamiento síncrono mientras dura el
        requerimeinto.
Tecnologías de RIAs (Rich Internet Application)
     Applet: requiere aceptación del usuario.

     Macromedia Flash: requiere plugin.

     DHTML (HTML + Javascript + DOM + CSS):
      comunicación síncrona.

     DHTML + Iframe:
      comunicación asíncrona.                    asíncrono


     Ajax: DHTML + comunicación asíncrona.
Requerimientos Asíncronos
Iframe:
   Elemento HTML que permite insertar o incrustar un
   documento HTML dentro de un documento HTML
   principal.
   Los datos que están en el Iframe se
   envían al servidor. La página no se Nombre:
   bloquea durante el requerimiento, Email:
   solo el iframe.
                                               Enviar

 La respuesta llega al iframe.       Nombre:

                                     Emai
                                     l:
¿Qué es AJAX?
             AJAX = Asynchronous JavaScript and XML.

   AJAX se trata de actualizar partes de una página web, sin tener que
    recargar toda la página (Comunicación asincrónica).

   No es un nuevo lenguaje de programación sino una nueva manera
    de utilizar los estándares existentes.

   Ajax es el arte de intercambiar datos con un servidor y actualizar
    partes de una página web, sin recargar la página entera.

   Para utilizar Ajax, debe tener un conocimiento básico de lo
    siguientes:
       HTML / XHTML
       CSS
       JavaScript / DOM
¿Cómo trabaja AJAX?
.
¿Cómo trabaja AJAX?
   AJAX is based on internet standards, and uses a
    combination of:
   XMLHttpRequest object (to exchange data
    asynchronously with a server)
   JavaScript/DOM (to display/interact with the
    information)
   CSS (to style the data)
   XML (often used as the format for transferring data)
    AJAX applications are browser- and platform-
    independent!

¿Cómo trabaja AJAX?
   <!DOCTYPE html>
    <html>

   <head>
    <script>
    function loadXMLDoc()
    {
    .... AJAX script goes here ...
    }
    </script>
    </head>

    <body>
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
      <button type="button" onclick="loadXMLDoc()">Change
    Content</button>
    </body>
    </html>
¿Cómo trabaja AJAX?
   The keystone of AJAX is the XMLHttpRequest
    object.

   El objeto XMLHttpRequest se utiliza para
    intercambiar datos con el servidor en segundo
    plano. Esto significa que es posible actualizar partes
    de una página web, sin volver a cargar la página
    entera.
¿Cómo trabaja AJAX?
   Sintaxis para crear un XMLHttpRequest object:
       variable = new XMLHttpRequest();


   Versiones anteriores de Internet Explorer (IE5 and
    IE6) utilizan un ActiveX Object:
       variable=new ActiveXObject("Microsoft.XMLHTTP");
¿Cómo trabaja AJAX?
   Enviar una petición al Servidor.
   Para enviar una petición al servidor, utilizamos los
    métodos open() y send() del objeto
    XMLHttpRequest:
       xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
¿Cómo trabaja AJAX?
   Para obtener la respuesta del servidor, utilizamos
    las propiedades responseText() y responseXML() del
    objeto XMLHttpRequest:
       xmlhttp.responseText;
        xmlhttp.ResponseXML;

More Related Content

What's hot

11. Servicios Web Xml
11.  Servicios Web Xml11.  Servicios Web Xml
11. Servicios Web Xml
guest3cf6ff
 
12. Administracion Del Estado
12.  Administracion Del Estado12.  Administracion Del Estado
12. Administracion Del Estado
guest3cf6ff
 
Ajax tecnologia
Ajax tecnologiaAjax tecnologia
Ajax tecnologia
josia321
 
13. Configuracion De Aplicaciones Web Asp.Net
13.  Configuracion De Aplicaciones Web Asp.Net13.  Configuracion De Aplicaciones Web Asp.Net
13. Configuracion De Aplicaciones Web Asp.Net
guest3cf6ff
 
10. Usando Datos Xml
10.  Usando Datos Xml10.  Usando Datos Xml
10. Usando Datos Xml
guest3cf6ff
 

What's hot (20)

Servicio web soap en java con net beans
Servicio web soap en java con net beansServicio web soap en java con net beans
Servicio web soap en java con net beans
 
Introduction AJAX
Introduction AJAXIntroduction AJAX
Introduction AJAX
 
Primeros pasos con ajax
Primeros pasos con ajaxPrimeros pasos con ajax
Primeros pasos con ajax
 
Creando un servicio SOAP en Java con NetBeans
Creando un servicio SOAP en Java con NetBeansCreando un servicio SOAP en Java con NetBeans
Creando un servicio SOAP en Java con NetBeans
 
11. Servicios Web Xml
11.  Servicios Web Xml11.  Servicios Web Xml
11. Servicios Web Xml
 
12. Administracion Del Estado
12.  Administracion Del Estado12.  Administracion Del Estado
12. Administracion Del Estado
 
AJAX
AJAXAJAX
AJAX
 
Web Services
Web ServicesWeb Services
Web Services
 
Servicios web soap java
Servicios web soap javaServicios web soap java
Servicios web soap java
 
Javascript basico
Javascript basicoJavascript basico
Javascript basico
 
Manual de creación y uso de Web Service SOAP
Manual de creación y uso de Web Service SOAPManual de creación y uso de Web Service SOAP
Manual de creación y uso de Web Service SOAP
 
tecnología AJAX
tecnología AJAXtecnología AJAX
tecnología AJAX
 
Ajax tecnologia
Ajax tecnologiaAjax tecnologia
Ajax tecnologia
 
13. Configuracion De Aplicaciones Web Asp.Net
13.  Configuracion De Aplicaciones Web Asp.Net13.  Configuracion De Aplicaciones Web Asp.Net
13. Configuracion De Aplicaciones Web Asp.Net
 
introduccion a Ajax
introduccion a Ajaxintroduccion a Ajax
introduccion a Ajax
 
10. Usando Datos Xml
10.  Usando Datos Xml10.  Usando Datos Xml
10. Usando Datos Xml
 
9 Programación Web con .NET y C#
9 Programación Web con .NET y C#9 Programación Web con .NET y C#
9 Programación Web con .NET y C#
 
ASP.NET MVC - introduccion al web api
ASP.NET MVC - introduccion al web apiASP.NET MVC - introduccion al web api
ASP.NET MVC - introduccion al web api
 
JavaScript
JavaScriptJavaScript
JavaScript
 
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
 

Viewers also liked

Presentacion proyecto punta lagunas
Presentacion proyecto punta lagunasPresentacion proyecto punta lagunas
Presentacion proyecto punta lagunas
Cesar Galan
 
Bombeo hidraulico tipo jet
Bombeo hidraulico tipo jetBombeo hidraulico tipo jet
Bombeo hidraulico tipo jet
None
 
Presentación Proyecto Ramp Peru DifusióN Lima
Presentación Proyecto Ramp Peru DifusióN LimaPresentación Proyecto Ramp Peru DifusióN Lima
Presentación Proyecto Ramp Peru DifusióN Lima
guestac6b8d
 

Viewers also liked (15)

Informe del Presupuesto de Inversion 2008 y 2009
Informe del Presupuesto de Inversion 2008 y 2009Informe del Presupuesto de Inversion 2008 y 2009
Informe del Presupuesto de Inversion 2008 y 2009
 
Inversión en el Perú y requerimeinto de Profesionales
Inversión en el Perú y requerimeinto de ProfesionalesInversión en el Perú y requerimeinto de Profesionales
Inversión en el Perú y requerimeinto de Profesionales
 
Mejoramiento de servicio deportivo ubicado en el
Mejoramiento de servicio deportivo ubicado en elMejoramiento de servicio deportivo ubicado en el
Mejoramiento de servicio deportivo ubicado en el
 
Defensa riberena-gaviones
Defensa riberena-gavionesDefensa riberena-gaviones
Defensa riberena-gaviones
 
Ealuacion
EaluacionEaluacion
Ealuacion
 
Presentacion proyecto punta lagunas
Presentacion proyecto punta lagunasPresentacion proyecto punta lagunas
Presentacion proyecto punta lagunas
 
ElaboracióN De Proyectos En Powerpoint
ElaboracióN De Proyectos En PowerpointElaboracióN De Proyectos En Powerpoint
ElaboracióN De Proyectos En Powerpoint
 
APURIMAC Y LA INVERSION MINERA
APURIMAC Y LA INVERSION MINERAAPURIMAC Y LA INVERSION MINERA
APURIMAC Y LA INVERSION MINERA
 
via expresa-variante-uchumayo
via expresa-variante-uchumayovia expresa-variante-uchumayo
via expresa-variante-uchumayo
 
Planta de Tratamiento de Aguas Residuales de Arequipa
Planta de Tratamiento de Aguas Residuales de ArequipaPlanta de Tratamiento de Aguas Residuales de Arequipa
Planta de Tratamiento de Aguas Residuales de Arequipa
 
Bombeo hidraulico tipo jet
Bombeo hidraulico tipo jetBombeo hidraulico tipo jet
Bombeo hidraulico tipo jet
 
proyectos de inversion
 proyectos de inversion proyectos de inversion
proyectos de inversion
 
PROYECTOS DE INVERSION
PROYECTOS DE INVERSIONPROYECTOS DE INVERSION
PROYECTOS DE INVERSION
 
Caso practico de un proyecto de inversion
Caso practico de un proyecto de inversionCaso practico de un proyecto de inversion
Caso practico de un proyecto de inversion
 
Presentación Proyecto Ramp Peru DifusióN Lima
Presentación Proyecto Ramp Peru DifusióN LimaPresentación Proyecto Ramp Peru DifusióN Lima
Presentación Proyecto Ramp Peru DifusióN Lima
 

Similar to Capitulo 4.7 prog iii

Ajax
AjaxAjax
Ajax
utpl
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0
Arnulfo Gomez
 
Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de Ajax
Alvaro Castillo
 

Similar to Capitulo 4.7 prog iii (20)

Ajax
AjaxAjax
Ajax
 
Inicios Ajax
Inicios AjaxInicios Ajax
Inicios Ajax
 
Ajax
AjaxAjax
Ajax
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Expo
ExpoExpo
Expo
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
IntroduccióN Ajax
IntroduccióN AjaxIntroduccióN Ajax
IntroduccióN Ajax
 
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
 
AJAX a cuerda Lo básico sobre AJAX y su funcionamiento
AJAX a cuerda
Lo básico sobre AJAX y su funcionamientoAJAX a cuerda
Lo básico sobre AJAX y su funcionamiento
AJAX a cuerda Lo básico sobre AJAX y su funcionamiento
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0
 
Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2
 
Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de Ajax
 
Ajax
AjaxAjax
Ajax
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Adminredes ajax ver2
Adminredes ajax ver2Adminredes ajax ver2
Adminredes ajax ver2
 

Recently uploaded

6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
Wilian24
 

Recently uploaded (20)

AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
1ro Programación Anual D.P.C.C planificación anual del área para el desarroll...
 
Linea del tiempo - Filosofos Cristianos.docx
Linea del tiempo - Filosofos Cristianos.docxLinea del tiempo - Filosofos Cristianos.docx
Linea del tiempo - Filosofos Cristianos.docx
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
prostitución en España: una mirada integral!
prostitución en España: una mirada integral!prostitución en España: una mirada integral!
prostitución en España: una mirada integral!
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 

Capitulo 4.7 prog iii

  • 2. Modelo de aplicaciones web básicas  Se realiza un HTTP request al servidor web.  Retorna una página HTML en respuesta al cliente. 1. Submits sent to actions 2. Actions perform work and then forward to next page 3. Page refresh occur for each submit. !!! Comportamiento síncrono mientras dura el requerimeinto.
  • 3. Tecnologías de RIAs (Rich Internet Application)  Applet: requiere aceptación del usuario.  Macromedia Flash: requiere plugin.  DHTML (HTML + Javascript + DOM + CSS): comunicación síncrona.  DHTML + Iframe: comunicación asíncrona. asíncrono  Ajax: DHTML + comunicación asíncrona.
  • 4. Requerimientos Asíncronos Iframe: Elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Los datos que están en el Iframe se envían al servidor. La página no se Nombre: bloquea durante el requerimiento, Email: solo el iframe. Enviar La respuesta llega al iframe. Nombre: Emai l:
  • 5. ¿Qué es AJAX? AJAX = Asynchronous JavaScript and XML.  AJAX se trata de actualizar partes de una página web, sin tener que recargar toda la página (Comunicación asincrónica).  No es un nuevo lenguaje de programación sino una nueva manera de utilizar los estándares existentes.  Ajax es el arte de intercambiar datos con un servidor y actualizar partes de una página web, sin recargar la página entera.  Para utilizar Ajax, debe tener un conocimiento básico de lo siguientes:  HTML / XHTML  CSS  JavaScript / DOM
  • 7. ¿Cómo trabaja AJAX?  AJAX is based on internet standards, and uses a combination of:  XMLHttpRequest object (to exchange data asynchronously with a server)  JavaScript/DOM (to display/interact with the information)  CSS (to style the data)  XML (often used as the format for transferring data)  AJAX applications are browser- and platform- independent! 
  • 8. ¿Cómo trabaja AJAX?  <!DOCTYPE html> <html>  <head> <script> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head>  <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
  • 9. ¿Cómo trabaja AJAX?  The keystone of AJAX is the XMLHttpRequest object.  El objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una página web, sin volver a cargar la página entera.
  • 10. ¿Cómo trabaja AJAX?  Sintaxis para crear un XMLHttpRequest object:  variable = new XMLHttpRequest();  Versiones anteriores de Internet Explorer (IE5 and IE6) utilizan un ActiveX Object:  variable=new ActiveXObject("Microsoft.XMLHTTP");
  • 11. ¿Cómo trabaja AJAX?  Enviar una petición al Servidor.  Para enviar una petición al servidor, utilizamos los métodos open() y send() del objeto XMLHttpRequest:  xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
  • 12. ¿Cómo trabaja AJAX?  Para obtener la respuesta del servidor, utilizamos las propiedades responseText() y responseXML() del objeto XMLHttpRequest:  xmlhttp.responseText; xmlhttp.ResponseXML;