Etiqueta: Ajax

El dia 31 d’Agost es va fer pública la versió 1.0.1 de JQuery, després de l’aparació amb algun que altre forat de la versió 1.0, el dia 28 del mateix mes.

Dos enllaços útils per a documentar-se sobre JQuery:

• jQuery Docs – API
• Visual JQuery

Si voleu veure la potència de JQuery, podeu retrobar l’exemple de recórrer un XML que vaig publicar fa uns dies.

Un dels objectius d’aquestes vacances era familiaritzar-me amb l’ús de JQuery per tal de poder fer RIA de forma àgil i senzilla i sense haver de carregar macro llibreries com Prototype o Script.aculo.us quan no fos necessari.

Una de les primeres proves que he realitzat, ha estat la petició d’un arxiu XML via AJAX i al posterior lectura del mateix mitjançant l’arbre DOM, realment és força trivial.

Donat un XML com el que segueix:

<items>
	<item>
  		<titol>Element 1</titol>
		<contingut>Contingut element 1</contingut>
	</item>
	<item>
  		<titol>Element 2</titol>
		<contingut>Contingut element 2</contingut>
	</item>
</items>

Teòricament, podem llegir-lo de la següent manera:

url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
		alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
	})
})

Sempre hi ha peros, amb IE sembla que la solució no acaba de funcionar, ja que l’element this.childNodes[0].textContent no està definit i cal afegir un FirstChild al propi element per tal que sàpiga que vols llegir-lo. L’exemple doncs quedarà:

url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		if (this.childNodes[0].textContent == undefined){
			alert("IE - Això és el titol del fill " + i + ":" + this.childNodes[0].firstChild.text);
			alert("IE - Això és el contingut del fill " + i + ":" + this.childNodes[1].firstChild.text);
		} else {
			alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
			alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
		}
	})
})

He provat l’exemple amb Firefox, Opera i IE amb el resultat esperat. Així doncs, mitjançant aquest petit codi, podem fer crides AJAX que retornin un XML i parsejar-lo al navegador.

He penjat l’HTML de l’exemple i l’arxiu XML llegit per si algú vol tafanejar.

A Ajaxian es fan ressó de l’aparició de la nova versió d’Script.aculo.us, una de les llibreries JavaScript per crear interfícies AJAX més popular. Básicament l’actualització és una bug-fix-only release, és a dir una versió que corregeix forats de les seves predecessores.

També seguint amb AJAX com a tema i Ajaxian com a proveïdor de informació, arribo a un manual sobre LaCo -Late Content-, una llibreria per facilitar l’ús d’AJAX als no programadors.

Ahir es va fer pública la versió 0.1-beta 2 del webmail basat en AJAX del que del que parlava no fa massa en un post, anomenat RoundCube.

De moment aquest webmail, que destaca per la seva senzilla instal·lació, suporta les següents features:

• Multilingual capabilities
• Full support for MIME and HTML messages
• Compose messages with attachments
• Multiple sender identities
• Basic address book
• Find-as-you-type address book integration
• Forwarding messages with attachments
• Create or remove custom message folders
• Built-in caching for fast mailbox access
• Support for external SMTP server
• Advanced user interface
• Unlimited users and messages
• Complete customization with skins

Esperem que ben aviat aparegui la versió estable planificada al RoadMap.

Tothom que s’hagi molestat en tafanejar la “web 2.0” haurà topat amb Script.aculo.us, un conjunt de llibreries per fer efectes i pijades amb JavaScript.

Bé doncs, via Ajaxian m’arriba un interessant Full-Resum sobre el funcionament d’aquestes llibreries fet per la gent de Slash7.

Qui més qui menys s’ha trobat amb problemes a l’hora d’encadenar crides a l’Ajax.Updater de Prototype. Després de donar-hi unes voltes a la feina, vaig crear una petita funció (força rudimentaria) per encadenar crides de forma senzilla:

La funció és la següent:

function MultipleAjaxUpdater(param,divid,pos) {
   //param = paràmetres a passar al Ajax.Updater
   //divid = divs a actualitzar pel Ajax.Updater
   //pos = crida que estem executant (inicialment = 0)
    var url = 'gestioajax.php';
    var pars = param[pos];
    var div_desti=divid[pos];
        var myAjax = new Ajax.Updater(
        div_desti,
        url,
            {
                evalScripts: 'true',
                method: 'get',
                parameters: pars,
                onComplete: function() {
                    pos = pos + 1;
                    if (pos < param.length)
                        getAjaxMatriu(param,divid,pos);
                }
            }
        );
}

I un exemple de crida podria ser:

        var param = new Array();
       // Parametres a passar al Ajax.Updater de forma seqüencial:
        param[0] = 'action=comentaris&id=213132';
        param[1] = 'action=dades&id=213132';
        param[2] = 'action=tot&id=213132';

        var divid = new Array();
       // Divs a actualitzar pel Ajax.Updater de forma seqüencial:
        divid[0] = "textajax1";
        divid[1] = "textajax2";
        divid[2] = "textajax3";

        MultipleAjaxUpdater(param,divid,0);

A Ajaxian descobreixo un full-resum amb totes les funcions, objectes i propietats de Prototype, el framework per excel·lència d’AJAX 😉