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

1. menttes
corporate training
AJAX a cuerda
Lo básico sobre AJAX y su
funcionamiento
Ambrosio, Pablo
pandres@menttes.com

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. 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. Comunicación Síncrona
menttes

5. Comunicación Asíncrona
Con comunicacion asíncrona no hay que esperar la respuesta para poder
usar la página.
menttes

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. menttes
corporate training
Muchas gracias
Pablo Ambrosio
pandres@gmail.com