Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Capitulo 4.7 prog iii

241 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

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;

×