menttes
 corporate training




                      AJAX a cuerda
                      Lo básico sobre AJAX y su
      ...
¿Que es AJAX?




 Se refiere a un grupo de tecnologías que se usan para crear contenido web dinámico e
   interactivo.

 ...
Aplicaciones Web con AJAX




Antes de AJAX hubo tecnicas similares, mas bien hacks (frames, iframe, remote scripting).
A ...
Comunicación Síncrona




                        menttes
Comunicación Asíncrona




  Con comunicacion asíncrona no hay que esperar la respuesta para poder
  usar la página.



  ...
Tecnologías AJAX




●   XML
(eXtensible Markup Language) Representa la X en AJAX. Es la Lingua Franca
para el intercambio...
Tecnologías AJAX




●   W3C DOM
Es una representacion orientada a objetos de documentos HTML y XML. provee
una API para m...
Tecnologías AJAX




●   XMLHTTPRequest
Representa la comunicacion en AJAX. Es una clase de JavaScript que envía y
recibe ...
La clase Ajax



En JavaScript se crea una clase usando una funcion constructora.

XMLHTTPRequest funciona tanto con GET c...
El método init



El método init crea un objeto XMLHTTPRequest. En IE6 esta implementado de forma
diferente, con l aclase ...
Enviando un Request




Teniendo el método init, se peude intentar un Request.

this.doReq = function() {
   var self = nu...
Seteando el manejador de eventos


La variable readyState refleja el progreso del request:

●   0:   uninit
●   1:   loadi...
Procesando la respuesta




Se evalúa si:
● La respuesta es un error (status)

● Cual es el formato de la respuesta

● A c...
Procesando la respuesta
 req.onreadystatechange = function() {
  self.readyState = req.readyState;
  if (req.readyState ==...
Seteando el content-type




XML bien formado vuelve en text/xml, application/xml o application/xhtml+xml. En
Firefox, Saf...
Seteando los manejadores




Una respuesta en el rango 200-299 de HTTP es exitosa. Al manejador de respuesta habra
que pas...
Abortando el Request




¿Que pasa con la aplicacion cuando se aprieta el boton de STOP en el browser? Alli es
donde entra...
Armando todo




Entonces, dado el código, la clase AJAX necesita:
● el URL objetivo

● la función manejadora




Proveamo...
Llamando al script




Finalmente metemos en un tag <script> el código AJAX e inicializamos la clase.

<script type=quot;t...
menttes
 corporate training




                      Muchas gracias




                      Pablo Ambrosio

           ...
Upcoming SlideShare
Loading in …5
×

AJAX a cuerda Lo básico sobre AJAX y su funcionamiento

7,155 views
6,974 views

Published on

Qué es Ajax, Aplicaciones web con ajax, comunicación sincrona y asincrona, tecnlogás ajax,

Published in: Business, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
7,155
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
101
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

AJAX a cuerda Lo básico sobre AJAX y su funcionamiento

  1. 1. menttes corporate training AJAX a cuerda Lo básico sobre AJAX y su funcionamiento Ambrosio, Pablo pandres@menttes.com
  2. 2. ¿Que es AJAX? Se refiere a un grupo de tecnologías que se usan para crear contenido web dinámico e interactivo. El término fue acuñado por Jesse J. Garret, de “Adaptive Path”, en su ensayo “AJAX: A new approach to web applications”. Es un acronismo para “Asyncronous Javascript and XML”. menttes
  3. 3. Aplicaciones Web con AJAX Antes de AJAX hubo tecnicas similares, mas bien hacks (frames, iframe, remote scripting). A partir de la disponibilidad de XMLHTTPRequest en los browsers, el marketinero término AJAX y ejemplos como Gmail, Google Maps o Flickr, AJAX tomó mucho impulso. Antes un cambio requería volver a cargar toda la página. Se usa para edición inplace, drag and drop, animaciones CSS, transiciones. Permite a las aplicaciones web tomar un lugar que antes solo ocupaban las aplicaciones de escritorio. menttes
  4. 4. Comunicación Síncrona menttes
  5. 5. Comunicación Asíncrona Con comunicacion asíncrona no hay que esperar la respuesta para poder usar la página. menttes
  6. 6. Tecnologías AJAX ● XML (eXtensible Markup Language) Representa la X en AJAX. Es la Lingua Franca para el intercambio de datos. Es el formato de datos que se usa para la comunicación entre el browser y el servidor. Las páginas web en las aplicaciones AJAX son XHTML (eXtensible HyperText Markup Language) que es XML, y sucesor de HTML. Algunas ventajas de usar XHTML son la disponibilidad de herramientas para manipular los documentos de este tipo, la compatibilidad con XML, funciona tanto con HTML DOM como con XML DOM, y portabilidad a agentes que no sean browsers. menttes
  7. 7. Tecnologías AJAX ● W3C DOM Es una representacion orientada a objetos de documentos HTML y XML. provee una API para manipularlos (estadarizado por W3C). JavaScript implementa una API para DOM, y este provee elemtos estádar para que con JavaScript se puedan asociar eventos a los elementos de una página web. ● CSS (Cascading Style Sheets) Provee una forma unificada de controlar la apariencia de la interface. Usando CSS se puede manipular cualquier especto de la presentacion de la página, colores, tamaños y posiciones. Un uso común de esto es para representar transiciones y cambios en la interface y dar feedback al usuario. menttes
  8. 8. Tecnologías AJAX ● XMLHTTPRequest Representa la comunicacion en AJAX. Es una clase de JavaScript que envía y recibe httprequests y responde desde y hacia servidores. Esto es lo que hace posible que funcione AJAX. Funciona como si el browser estuviera haciendo una pedido normal para cargar una página o enviar un form, pero sin que el usuario tenga que abandonar la página actual. Fue implementado por Microsoft para IE5 como un objeto ActiveX; Mozilla lo implemento para su version 1.0 y Safari para 1.2. ● JavaScript JavaScript es el pegamenteo entre todos los elementos que hacen posible AJAX. La respuesta que da el servidor, ya sea XML o texto plano, la recibe código JavaScript para ser manipulada. menttes
  9. 9. La clase Ajax En JavaScript se crea una clase usando una funcion constructora. XMLHTTPRequest funciona tanto con GET como con POST. function Ajax() { this.req = null; this.url = null; this.status = null; this.statusText = ''; this.method = 'GET'; this.async = true; this.dataPayload = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', 'object' this.mimeType = null; } menttes
  10. 10. El método init El método init crea un objeto XMLHTTPRequest. En IE6 esta implementado de forma diferente, con l aclase ActiveXObject. Pero ambas se comportan igual. this.init = function() { var i = 0; var reqTry = [ function() { return new XMLHttpRequest(); }, function() { return new ActiveXObject('Msxml2.XMLHTTP') }, function() { return new ActiveXObject('Microsoft.XMLHTTP' )} ]; while (!this.req && (i < reqTry.length)) { try { this.req = reqTry[i++](); } catch(e) {} } return true; }; menttes
  11. 11. Enviando un Request Teniendo el método init, se peude intentar un Request. this.doReq = function() { var self = null; var req = null; if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } req = this.req; req.open(this.method, this.url, this.async); }; El método podrá ser GET o POST, el url identifica la página que será requerida (la seguridad del browser impedira generalmente que el URL pertenezca a otro dominio), async es lo que hace que la operacion sea asíncrona, en caso de que valga TRUE. menttes
  12. 12. Seteando el manejador de eventos La variable readyState refleja el progreso del request: ● 0: uninit ● 1: loading ● 2: loaded ● 3: interact ● 4: completed El objeto XMLHTTPRequest avisa de cambios disparando un evento readystatechange. self = this; req.onreadystatechange = function() { var resp = null; self.readyState = req.readyState; if (req.readyState == 4) { //algo }; req.send(this.postData); Con send enviamos el request. menttes
  13. 13. Procesando la respuesta Se evalúa si: ● La respuesta es un error (status) ● Cual es el formato de la respuesta ● A cual manejador se le pasa la respuesta La respuesta puede vovler en tres formatos: ● String en javaScript ● Objeto documento XML accesible por DOM ● El objeto XMLHTTPRequest usado para hacer el request El contenido de la respuesta se puede acceder mediante dos propiedades, responseTxt, que es un string; y responseXML, que es un objeto de tipo documento XML. menttes
  14. 14. Procesando la respuesta req.onreadystatechange = function() { self.readyState = req.readyState; if (req.readyState == 4) { self.status = req.status; self.statusText = req.statusText; self.responseText = req.responseText; self.responseXML = req.responseXML; switch(self.responseFormat) { case 'text': resp = self.responseText; break; case 'xml': resp = self.responseXML; break; case 'object': resp = req; break; } if (self.status > 199 && self.status < 300) { self.handleResp(resp); } else { self.handleErr(resp); } } menttes
  15. 15. Seteando el content-type XML bien formado vuelve en text/xml, application/xml o application/xhtml+xml. En Firefox, Safari, y IE7 hay un método para pisar el content-type, 'overrrideMimeType' en caso de que tengamos un servidor poco coopertativo. req.open(this.method, this,url, this.asunc); if (this.mimeType) { try { req.overrideMimeType(this.mimeType); } catch(e) { //algo } } menttes
  16. 16. Seteando los manejadores Una respuesta en el rango 200-299 de HTTP es exitosa. Al manejador de respuesta habra que pasarle el mensaje. El manejador es definido por el usuario y el código JavaScript verificará si esta configurado. El manejador de errores ya viene configurado por la clase, para setear uno propio usar: this,setHandleErr = function(funcRef) { this.handleErr = funcRef; } Tambien existe “sethandleBoth”, para setear ambos manejadores menttes
  17. 17. Abortando el Request ¿Que pasa con la aplicacion cuando se aprieta el boton de STOP en el browser? Alli es donde entra en juego el método abort. this.abort = function() { if (this.req) { this.req.onreadystatechange = function() { }; this.req.abort(); this.req = null; } } Destruyendo la instancia y reseteando el evento onreadystate, ya que no queremos que el manejador se gatille justo antes de abortar la clase. menttes
  18. 18. Armando todo Entonces, dado el código, la clase AJAX necesita: ● el URL objetivo ● la función manejadora Proveamos el método doGet para configurar ambas y lanzar el request: this.doGet = function(url, hand, format) { this.url = url; this.handleResp = hand; this.responseFormat = format || 'text'; this.doReq(); }; menttes
  19. 19. Llamando al script Finalmente metemos en un tag <script> el código AJAX e inicializamos la clase. <script type=quot;text/javascriptquot;> var hand = function(str) { alert(str); } var ajax = new Ajax(); ajax.doGet('file:///home/pandres/Codigo/Ajax/ajax1-code/chapter02/ajaxtest.html', hand); </script> menttes
  20. 20. menttes corporate training Muchas gracias Pablo Ambrosio pandres@gmail.com

×