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 ...
Tecnologías de RIAs (Rich Internet Application)     Applet: requiere aceptación del usuario.     Macromedia Flash: requi...
Requerimientos AsíncronosIframe:   Elemento HTML que permite insertar o incrustar un   documento HTML dentro de un documen...
¿Qué es AJAX?             AJAX = Asynchronous JavaScript and XML.   AJAX se trata de actualizar partes de una página web,...
¿Cómo trabaja AJAX?.
¿Cómo trabaja AJAX?   AJAX is based on internet standards, and uses a    combination of:   XMLHttpRequest object (to exc...
¿Cómo trabaja AJAX?   <!DOCTYPE html>    <html>   <head>    <script>    function loadXMLDoc()    {    .... AJAX script g...
¿Cómo trabaja AJAX?   The keystone of AJAX is the XMLHttpRequest    object.   El objeto XMLHttpRequest se utiliza para  ...
¿Cómo trabaja AJAX?   Sintaxis para crear un XMLHttpRequest object:       variable = new XMLHttpRequest();   Versiones ...
¿Cómo trabaja AJAX?   Enviar una petición al Servidor.   Para enviar una petición al servidor, utilizamos los    métodos...
¿Cómo trabaja AJAX?   Para obtener la respuesta del servidor, utilizamos    las propiedades responseText() y responseXML(...
Upcoming SlideShare
Loading in...5
×

Capitulo 4.7 prog iii

123

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
123
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Capitulo 4.7 prog iii

  1. 1. PROGRAMACIÓN III AJAX
  2. 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. 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. 4. Requerimientos AsíncronosIframe: 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. 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
  6. 6. ¿Cómo trabaja AJAX?.
  7. 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. 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. 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. 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. 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. 12. ¿Cómo trabaja AJAX? Para obtener la respuesta del servidor, utilizamos las propiedades responseText() y responseXML() del objeto XMLHttpRequest:  xmlhttp.responseText; xmlhttp.ResponseXML;

×