presentació ajax

Más manuales en: http://www.exabyteinformatica.com/manuales-y-apuntes-freeware

© Roger Casadejús Pérez | http://www.exabyteinformatica.com/tienda/

Presentació d’Ajax

La història d'AJAX està íntimament relacionada amb un objecte de programació anomenat

XMLHttpRequest. L'origen d'aquest objecte es remunta a l'any 2000, amb productes com

Exchange 2000, Internet Explorer 5 i Outlook Web Access.

Tot va començar al 1998, quan Alex Hopmann i el seu equip es trobaven desenvolupant la

llavors futura versió d’Exchange 2000. El punt feble del servidor de correu electrònic era el seu

client via web, anomenat OWA (Outlook Web Access).

Durant el desenvolupament de OWA, es van avaluar dues opcions: un client format només per

pàgines HTML estàtiques que es recarregaven constantment i un client realitzat completament

amb HTML dinàmic DHTML. Alex Hopmann va poder veure les dues opcions i es va decantar

per la basada en DHTML. No obstant això, per ser realment útil aquesta última, li faltava un

component essencial: quelcom que evités haver d'enviar contínuament els formularis amb

dades al servidor.

Motivat per les possibilitats futures de OWA, Alex va crear en un sol cap de setmana la primera

versió del que va anomenar XMLHTTP. La primera demostració de les possibilitats de la nova

tecnologia va ser un èxit, però faltava el més difícil: incloure aquesta tecnologia en el

navegador Internet Explorer.

Si el navegador no incloïa XMLHTTP de forma nativa, l'èxit del OWA s'hauria reduït

enormement. El major problema és que faltaven poques setmanes perquè es llancés l'última

beta d'Internet Explorer 5 prèvia al seu llançament final. Gràcies als seus contactes en

l'empresa, Alex va aconseguir que la seva tecnologia s'inclogués en la llibreria MSXML que

inclou Internet Explorer.

De fet, el nom de l'objecte (XMLHTTP) es va triar per tenir una bona excusa que justifiqués la

seva inclusió en la llibreria XML d'Internet Explorer, ja que aquest objecte està molt més

relacionat amb HTTP que amb XML.

Desenvolupar aplicacions AJAX requereix un coneixement avançat de totes i cadascuna de les

tecnologies de programació.

En les aplicacions web tradicionals, les accions de l'usuari a la pàgina (punxar en un botó,

seleccionar un valor d'una llista, etc.) desencadenen cridades al servidor. Una vegada

processada la petició de l'usuari, el servidor retorna una nova pàgina HTML al navegador de

l'usuari.

Aquesta tècnica tradicional per crear aplicacions web que funcioin correctament, però, no crea

una bona sensació a l'usuari. En realitzar peticions contínues al servidor, l'usuari ha d'esperar

al fet que es recarregui la pàgina amb els canvis sol·licitats. Si l'aplicació ha de realitzar

peticions contínues, el seu ús es converteix en quelcom molest.



Ajax permet millorar completament la interacció de l'usuari amb l'aplicació, evitant les

recarregues constants de la pàgina, ja que l'intercanvi d'informació amb el servidor es produeix

en un segon pla.

Les aplicacions construïdes amb Ajax eliminen la recarrega constant de pàgines mitjançant la

creació d'un element entremig de l'usuari i el servidor. La nova capa intermitja d'Ajax millora la

resposta de l'aplicació, ja que l'usuari mai es troba amb una finestra del navegador buida

esperant la resposta del servidor.

Les peticions HTTP al servidor es substitueixen per peticions Javascript que es realitzen a

l'element encarregat d'Ajax. Les peticions més simples no requereixen intervenció del servidor,

per la qual cosa la resposta és immediata. Si la interacció requereix una resposta del servidor,

la petició es realitza de forma asíncrona mitjançant Ajax. En aquest cas, la interacció de l'usuari

tampoc es veu interrompuda per recarregues de pàgina o llargues esperes per la resposta del

servidor.

Des de la seva aparició, s'han creat centenars d'aplicacions web basades en Ajax. En la majoria

de casos, Ajax pot substituir completament a altres tècniques com a Flash. A més, en el cas de

les aplicacions web més avançades, poden arribar a substituir a les aplicacions d'escriptori.

A continuació es mostra una llista d'algunes de les aplicacions més conegudes basades en Ajax:

· Gestors de correu electrònic: Gmail, Yahoo Mail i Windows Live Mail entre d’altres.

· Cartografia: Google Maps, Yahoo Maps i Windows Live Local entre d’altres.

· Aplicacions web i productivitat: Google Docs, Zimbra i Zoho entre d’altres.

Unes altres: Netvibes, Digg (notícies), Meebo (missatgeria), 30 Boxes (calendari), Flickr

(fotografia).

Anàlisis detallat

Una aplicació Ajax es compon de quatre grans blocs: instancia del objecte XMLHttpRequest,

preparar la funció de resposta, realitzar la petició al servidor i executar la funció de resposta.

Totes las aplicacions realitzades amb tècniques d’Ajax reben una instància en primer lloc del

objecte XMLHttpRequest, que és l’objecte clau que permet realitzar comunicacions amb el

servidor en segon pla, sense necessitat de recarregar les pàgines.

La implementació del objecte XMLHttpRequest depen de cada navegador, per tant és

necessari fer servir una discriminació senzilla en funció del navegador en el que se està

executant el codi:

if(window.XMLHttpRequest) { // Navegadors que segueixen els estàndars

peticio_http = new XMLHttpRequest();

}



else if(window.ActiveXObject) { // Navegadors obsolets

peticio_http = new ActiveXObject("Microsoft.XMLHTTP");

}

Els navegadors que segueixen els estàndars (Firefox, Safari, Opera, Internet Explorer 7, 8, 9 i

10) implementen l’objecte XMLHttpRequest de forma nativa, pel que es pot obtenir a través

de l’objecte window. Els navegadores obsolets (Internet Explorer 6 i anteriors) implementen

l’objecte XMLHttpRequest com un objecte de tipus ActiveX.

Una vegada obtinguda l’instancia del objecte XMLHttpRequest, es prepara la funció que s’e

encarrega de processar la resposta del servidor. La propietat onreadystatechange del objecte

XMLHttpRequest permet indicar aquesta funció directament inserint el ssu codi mitjançant

una funció anònima o indicant una referència a una funció independent. En l’exemple anterior

s’indica directament el nom de la funció:

peticio_http.onreadystatechange = mostraContingut;

El codi anterior indica que quan l’aplicació rebi la resposta del servidor, s’ha d’executar la

funció mostraContingut(). Como és habitual, la referència a la funció s’indica mitjançant el seu

nom sense parèntesis, ja que d’una altra manera s’estaria executant la funció i

emmagatzemant el valor retornat en la propietat onreadystatechange.

Després de preparar l’aplicació per al retorn del servidor, es realitza la petició HTTP al

servidor:

peticio_http.open('GET', 'http://localhost/prova.txt', true);

peticio_http.send(null);

Les instruccions anteriors realitzen el tipus de petició més senzilla que es pot enviar al servidor.

En concret, es tracta d’una petició del tipus GET simple que no envia cap paràmetre al

servidor. La petició HTTP es crea mitjançant el mètode open(), en el que s’inclou el tipus de

petició GET, la URL sol·licitada (http://localhost/prova.txt)i un tercer paràmetre amb el valor

True.

Una vegada creada la petició HTTP, s’envia al servidor mitjançant el mètode send(). Aquest

mètode inclou un paràmetre que en l’exemple anterior té el valor Null.

Per últim, quan es rep la resposta del servidor, l’aplicació executa de forma automàtica la

funció establerta anteriorment.

function mostraContingut() {

if(peticio_http.readyState == 4) {

if(peticio_http.status == 200) {



alert(peticio_http.responseText);

}

}

}

La funció mostraContingut() comprova en primer lloc que s'ha rebut la resposta del servidor

(mitjançant el valor de la propietat readyState). Si s'ha rebut esposta, es comprova que sigui

vàlida i correcta (comprovant si el codi d'estat HTTP retornat és igual a 200). Una vegada

realitzades les comprovacions, simplement es mostra per pantalla el contingut de la resposta

del servidor (en aquest cas, el contingut de l'arxiu sol·licitat) mitjançant la propietat

responseText.

Refactoritzant la primera aplicació

La primera aplicació AJAX mostrada anteriorment presenta algunes mancances importants. A

continuació, es refactoritza el seu codi ampliant-ho i millorant-ho perquè s'adapti millor a

altres situacions. En primer lloc, es defineixen unes variables que s'utilitzen en la funció que

processa la resposta del servidor:

var READY_STATE_UNINITIALIZED = 0;

var READY_STATE_LOADING = 1;

var READY_STATE_LOADED = 2;

var READY_STATE_INTERACTIVE = 3;

var READY_STATE_COMPLETE = 4;

Com es veurà més endavant, la resposta del servidor només pot correspondre a algun dels cinc

estats definits per les variables anteriors. D'aquesta forma, el codi pot utilitzar el nom de cada

estat en comptes del seu valor numèric, per la qual cosa es facilita la lectura i el manteniment

de les aplicacions.

A més a més, la variable que emmagatzema la instància de l'objecte XMLHttpRequest es

transforma en una variable global, de manera que totes les funcios que fan ús d'aquest objecte

tinguin un accés directe sobre el mateix:

var peticio_http;

A continuació, es crea una funció genèrica de carga de continguts mitjançant Ajax:



if(peticio_http.readyState == READY_STATE_COMPLETE) {



}

}

}

Per últim, la funció descarregaArxiu() simplement realitza una crida a la funció

carregaContingut() amb els paràmetres adequats:

function descarregaArxiu() {

carregaContingut("http://localhost/prova2.txt", "GET", mostraContingut);

}

A continuació es mostra el codi complet de la refactorització de la primera aplicació:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Prova desde Ajax</title>

<script type="text/javascript" language="javascript">

var READY_STATE_UNINITIALIZED=0;

var READY_STATE_LOADING=1;

var READY_STATE_LOADED=2;

var READY_STATE_INTERACTIVE=3;



}

}

}

function descarregaArxiu() {

carregaContingut("http://localhost/prova2.txt", "GET", mostraContingut);

}

window.onload = descarregaArxiu;

</script>

</head>

<body></body>

</html>

Utilitats i objectes per a Ajax

Una de les operacions més habituals en les aplicacions Ajax és la d'obtenir el contingut d'un

arxiu o recurs del servidor. Per tant, construirem un objecte que permeti realitzar la càrrega de

dades del servidor simplement indicant el recurs sol·licitat i la funció encarregada de processar

la resposta:

var carregador = new net.CarregadorContingutss("pagina.html", processaResposta);

La lògica comuna d'Ajax s'encapsula en un objecte de manera que sigui fàcilment reutilitzable.

Aplicant els conceptes d'objectes de Javascript, funcios constructores i l'ús de prototype, és

possible realitzar de forma senzilla l'objecte carregador de continguts:

var net = new Object();

net.READY_STATE_UNINITIALIZED=0;

net.READY_STATE_LOADING=1;



net.READY_STATE_LOADED=2;

net.READY_STATE_INTERACTIVE=3;

net.READY_STATE_COMPLETE=4;

// Constructor

net.CarregadorContinguts = function(url, funcio, funcioError) {

this.url = url;

this.req = null;

this.onload = funcio;

this.onerror = (funcioError) ? funcioError : this.defaultError;

this.carregaContingutXML(url);

}

net.CarregadorContinguts.prototype = {

carregaContingutXML: function(url) {


this.req = new XMLHttpRequest();

}


this.req = new ActiveXObject("Microsoft.XMLHTTP");

}

if(this.req) {

try {

var loader = this;

this.req.onreadystatechange = function() {

loader.onReadyState.call(loader);



}

this.req.open('GET', url, true);

this.req.send(null);

} catch(err) {

this.onerror.call(this);

}

}

},

onReadyState: function() {

var req = this.req;

var ready = req.readyState;

if(ready == net.READY_STATE_COMPLETE) {

var httpStatus = req.status;

if(httpStatus == 200 || httpStatus == 0) {

this.onload.call(this);

}

else {


}

}

},

defaultError: function() {

alert("S’ha produït un error l’obtenir les dades"

+ "\n\nreadyState:" + this.req.readyState

+ "\nstatus: " + this.req.status



+ "\nheaders: " + this.req.getAllResponseHeaders());

}

}

Una vegada definit l’objecte net amb el seu mètode CarregadorContinguts(), ja és possible

utilitzar-ho en las funcioes que s’encarreguen de mostrar el contingut de l’arxiu del servidor:


alert(this.req.responseText);

}

function carregaContinguts() {

var cargador = new net.CarregadorContinguts("http://localhost/prova2.txt",

mostraContingut);

}

window.onload = carregaContinguts;

En l’exemple anterior, l’aplicació mostra un missatge amb els continguts de la URL indicada:

Missatge mostrat quan el resultat és exitós.

Missatge mostrat quan el resultat és reeixit

D'altra banda, si la URL que es vol carregar no és vàlida o el servidor no respon, l'aplicació

mostra el següent missatge d'error:

Missatge mostrat quan el resultat és erroni.

Missatge mostrat quan el resultat és erroni

El codi del carregador de continguts fa un ús intensiu d'objectes, JSON, funcios anònimes i ús

de l'objecte this. Seguidament, es detalla el funcioament de cadascuna de les seves parts.



El primer element important del codi font és la definició de l'objecte net.

var net = new Object();

Es tracta d'una variable global que encapsula totes les propietats i mètodes relatius a les

operacions relacionades amb les comunicacions per xarxa. En certa manera, aquesta variable

global simula el funcioament dels namespaces ja que evita la col·lisió entre noms de propietats

i mètodes diferents.

Després de definir les constants emprades per l'objecte XMLHttpRequest, es defineix el

constructor de l'objecte CarregadorContinguts:

net.CarregadorContinguts = function(url, funcio, funcioError) {

this.url = url;

this.req = null;

this.onload = funcio;

this.onerror = (funcioError) ? funcioError : this.defaultError;

this.carregaContingutXML(url);

}

Encara que el constructor defineix tres paràmetres diferents, en realitat només els dos primers

són obligatoris. D'aquesta forma, s'inicialitza el valor d'algunes variables de l'objecte, es

comprova si s'ha definit la funció que s'empra en cas d'error (si no s'ha definit, s'empra una

funció genèrica definida més endavant) i s'invoca el mètode responsable de carregar el recurs

sol·licitat (carregaContingutXML).

net.CarregadorContinguts.prototype = {

carregaContingutXML:function(url) {

...

},

onReadyState:function() {

...

},

defaultError:function() {

...

}

}



Els mètodes emprats per l'objecte net.carregaContinguts es defineixen mitjançant el seu

prototip. En aquest cas, es defineixen tres mètodes diferents: carregaContingutXML() per

carregar recursos de servidor, onReadyState() que és la funció que s'invoca quan es rep la

resposta del servidor i defaultError() que és la funció que s'empra quan no s'ha definit de

forma explícita una funció responsable de gestionar els possibles errors que es produeixin en

la petició HTTP.

La funció defaultError() mostra un missatge d'avís de l'error produït i a més mostra el valor

d'algunes de les propietats de la petició HTTP:

defaultError:function() {

alert("S’ha produït un error al obtenir les dades"

+ "\n\nreadyState:" + this.req.readyState

+ "\nstatus: " + this.req.status

+ "\nheaders: " + this.req.getAllResponseHeaders());

}

En aquest cas, l’objecte this es resol a l’objecte net.carregaContinguts, ja que és l’objecte que

conté la funció anònima que s’està executant.

D’altra banda, la funció onReadyState és l’encarregada de gestionar la resposta del servidor:

onReadyState: function() {

var req = this.req;

var ready = req.readyState;

if(ready == net.READY_STATE_COMPLETE) {

var httpStatus = req.status;

if(httpStatus == 200 || httpStatus == 0) {


} else {


}



}

}

Després de comprovar que la resposta del servidor està disponible i és correcta, es realitza la

crida a la funció que realment processa la resposta del servidor d'acord a les necessitats de

l'aplicació.


L'objecte this es resol com net.CarregadorContinguts, ja que és l'objecte que conté la funció

que s'està executant. Per tant, this.onload és la referència a la funció que s'ha definit com a

responsable de processar la resposta del servidor (es tracta d'una referència a una funció

externa).

Normalment, la funció externa encarregada de processar la resposta del servidor, requerirà

accedir a l'objecte XMLHttpRequest que emmagatzema la petició realitzada al servidor. En un

altre cas, la funció externa no serà capaç d'accedir al contingut retornat pel servidor.

Com ja hem vist anteriorment, el mètode call() és un dels mètodes definits per a l'objecte

Function(), i per tant disponible per totes les funcions de Javascript. Emprant el mètode call()

és possible obligar a una funció a ser executada sobre un objecte concret. En altres paraules,

emprant el mètode call() sobre una funció, és possible que dins d'aquesta funció l'objecte this

es resolgui com l'objecte passat com a paràmetre en el mètode call().

Així, la instrucció this.onload.call(this); s'interpreta de la següent forma:

L'objecte this que es passa com a paràmetre de call() es resol com l'objecte

net.CarregadorContinguts.

L'objecte this.onload emmagatzema una referència a la funció externa que es va a emprar per

processar la resposta.

El mètode this.onload.call() executa la funció, la referència de la qual, s'emmagatzema en

this.onload.

La instrucció this.onload.call(this); permet executar la funció externa amb l'objecte

net.CarregadorContinguts accessible a l'interior de la funció mitjançant l'objecte this.

Finalment, el mètode carregaContingutXML s'encarrega d'enviar la petició HTTP i realitzar la

trucada a la funció que processa la resposta:

carregaContingutXML:function(url) {


this.req = new XMLHttpRequest();

}




this.req = new ActiveXObject("Microsoft.XMLHTTP");

}

if(this.req) {

try {

var loader=this;



}



} catch(err) {


}

}

}

En primer lloc, s'obté una instància de l'objecte XMLHttpRequest en funció del tipus de

navegador. Si s'ha obtingut correctament la instància, s'executen les instruccions més

importants del mètode carregaContingutXML:

var loader = this;



}



A continuació, s'emmagatzema la instància de l'objecte actual (this) en la nova variable loader.

Una vegada emmagatzemada la instància de l'objecte net.CarregadorContinguts, es defineix la

funció encarregada de processar la resposta del servidor. En la següent funció anònima:



this.req.onreadystatechange = function() { ... }

A l'interior d'aquesta funció, l'objecte this no es resol en l'objecte net.CarregadorContinguts,

per la qual cosa no es pot emprar la següent instrucció:


this.onReadyState.call(loader);

}

No obstant això, des de l'interior d'aquesta funció anònima si és possible accedir a les variables

definides en la funció exterior que l'engloba. Així, des de l'interior de la funció anònima sí que

és possible accedir a la instància de l'objecte net.CarregadorContinguts que es va

emmagatzemar anteriorment.

En el codi anterior, no és obligatori emprar la crida al mètode call(). Es podria haver definit de

la següent forma:

var loader=this;


// loader.onReadyState.call(loader);

loader.onReadyState();

}

A l'interior de la funció onReadyState, l'objecte this es resol com net.ContentLoader, ja que es

tracta d'un mètode definit en el prototip del propi objecte.

presentació ajax

Documents