corporate training menttes

Ambrosio, Pablo

pandres@menttes.com

AJAX a cuerdaLo básico sobre AJAX y su funcionamiento

menttes

¿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

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

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.

menttes

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

Tecnologías AJAX

● W3C DOMEs 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

Tecnologías AJAX

● XMLHTTPRequestRepresenta 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.

● JavaScriptJavaScript 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

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

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

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

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

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

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

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

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

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

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

Llamando al script

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

<script type="text/javascript"> var hand = function(str) { alert(str); } var ajax = new Ajax(); ajax.doGet('file:///home/pandres/Codigo/Ajax/ajax1-code/chapter02/ajaxtest.html',

hand);</script>

corporate training menttes

Muchas gracias

Pablo Ambrosio

pandres@gmail.com