corporate training menttes
Ambrosio, Pablo
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>