jblog » jQuery

Scroll automatico e animato con “scrollTop” e il plugin “easing”

Giacomo — Mon, 24 May 2010 09:00:17 +0000

In questi giorni ho aiutato un amico alle prese con un sito web a pagina singola e prendendo spunto dal sito vanadiumjs.com ho voluto implementare lo scroll automatico e animato. Dopo un giretto sul web ho trovato questo interessante script da cui ho imparato un po’ di cose che ti ripropongo.

Il mio non è stato solo uno sfizio: poiché la pagina era molto lunga mi sembrava utile inserire questa funzionalità al fine di evitare all’utente l’utilizzo prolungato della rotellina del mouse per poter scorrere la pagina. Certo, si poteva realizzare tutto con dei link interni di tipo “#id” evitando codice js e plugin jquery. Lo abbiamo fatto ugualmente perché la pagina era solo una e un po’ di dinamismo non guasta mai!

La proprietà “scrollTop”. La utiliziamo per delineare le caratteristiche dell’animazione all’interno del metodo $.animate(). Questa proprietà deve essere impostata con un valore intero pari alla distanza (in pixel) tra l’inizio della pagina e la posizione di destinazione.

Il plugin “easing”. Non è fondamentare per realizzare lo scroll animato in quanto all’animazione ci pensa già il metodo $.animate(). Questo plugin ci serve per aggiungere a jquery altri tipi di animazione. Per saperne di più visita la pagina del plugin in cui potrai provare tutte le animazioni.

Animazione “easeInOutQuad”. Il vero motivo per cui utilizziamo il plugin “easing” è per sfruttare l’animazione “easeInOutQuad” (uguale a quella di vanadiumjs.com) molto adatta per uno scroll animato: parte lenta, scorre veloce, e inizia a rallentare prima di arrivare sulla destinazione del link.

Aspetti positivi

Nessun problema se javascript è disabilitato. Poiché utiliziamo dei link interni (o ancore) per chiamare l’animazione sullo scroll, in caso di javascript disabilitato questi link funzioneranno comunque e faranno in modo di proiettare l’utente sul blocco con l’id specificato nell’attributo href.

Normale scroll della pagina inalterato. Nonostante l’animazione, il normale scroll della pagina non viene alterato in alcun modo e la barra di scorrimento continua a funzionare come ci si aspetterebbe.

Codice riusabile. Il codice javascript (e jquery) non dipende dal numero di link che devono avviare uno scroll animato. Infatti l’unica operazione richiesta è quella di specificare la classe comune ai link che avviano lo scroll animato.

Al lavoro!

RISULTATO FINALE: http://test.jblog.it/autoscroll/

DOWNLOAD: http://download.jblog.it/autoscroll.zip

1. Includere jquery e jquery.easing


...


...

2. Attribuire una la stessa classe a tutti i link per lo scroll animato


Blocco 1
Blocco 2
Blocco 3
Blocco 4
Blocco 5

3. Copiare il blocco di codice per lo scroll animato

Anche se mi sembra superfluo dirlo, il seguente blocco di codice deve essere inserito fra i tag .

4. Impostare la classe dei link che avviano lo scroll animato

Demo e download

Per provare lo script: http://test.jblog.it/basicconfirm/

Per scaricare lo script: http://download.jblog.it/basicconfirm.zip

Il plugin jConfirmAction

e link (uguale a quello per la classica “confirm”)


   Delete me

Implementazione base di jConfirmAction

<-- CSS per la formattazione della finestra di dialogo -->

Demo e download

Anche se sul sito del plugin c’é una pagina dimostrativa ho voluto creare una demo svuotata di tutte le cose superflue in modo da evidenziare meglio il funzionamento del plugin.

Per provare lo script: http://test.jblog.it/jconfirmaction/

Per scaricare lo script: http://download.jblog.it/jconfirmaction.zip

Grafica

Per visualizzare correttamente il “fumetto” della dialog box abbiamo bisogno di almeno 2 componenti grafici:

contenitore del testo e dei pulsanti “ok” e “annulla”
sfondo del singolo pulsante

CSS

Questo plugin ha bisogno di alcune righe di codice css che naturalmente possiamo sistemare in un apposito file o incollare nel principale file .css del nostro sito (consiglio quest’ultima pratica per evitare la richiesta http dovuta al singolo file .css per il plugin).

CONFLITTUALITA’. Il problema è che i nomi delle classi sono abbastanza comuni e potremmo averli già utilizzati per altre classi. La soluzione è quella di andare a modificare direttamente il codice html della dialog box che si trova all’interno del file .js del plugin, come vedremo in seguito.

/* CONTENITORE PRINCIPALE */
.question {
	position: absolute;
	display: inline;
	text-align: center;
	width: 174px;
	height: 78px;
	font-size: 13px;
	line-height: 1.5em;
	/* immagine del contenitore del "fumetto" */
	background: url('images/bubble.png') left top no-repeat;
	padding: 10px 0 0 0;
	text-shadow: 0px 1px 0px #fff;
	margin-left: -7em;
	margin-top: -6em;
	opacity: 0;
}

/* PULSANTI */
.yes, .cancel {
	margin-top: .5em;
	margin-right: .5em;
	cursor: pointer;
	display: inline-block;
	width: 63px;
	height: 21px;
	color: #fff;
	text-shadow: 0px 1px 0px #000;
	/* immagine del pulsante */
	background: url('images/button.png') left top no-repeat;
}

HTML

L’html relativa al box del “fumetto” è molto semplice, quindi non credo che avrai grossi problemi se andrai a modificare la struttura del box.

Un buon motivo per modificare l’html è quello di evitare le possibili conflittualità con le classi del css, modificando i nomi delle classi associate ai div in nomi meno generici.

Nel file del plugin la parte relativa al codice html del box è questa:

$(this).after(
''+theOptions.question+'

     '+theOptions.yesAnswer+'
     '+theOptions.cancelAnswer+'
');

Un plugin alternativo

Una valida alternativa è il plugin jQuery Confirm sviluppato da Nadia Alramli.

La caratteristica che lo distingue da jConfirmAction è che quando si clicca sul link scompare il link e appare la domanda (con relativi link “ok” e “annulla”).

Sicuramente è molto più leggero di jConfirmAction in quanto non richiede immagini e codice css. Inoltre ha moltissime opzioni che consentono di adattarlo al meglio alle esigenze del sito.

Fra i due plugin (che sostanzialmente fanno la stesse cose) io continuo a preferire jConfirmAction perché esteticamente il fumetto è più bello!

Tecniche javascript e jquery per selezionare e scorrere elementi html e nodi

Giacomo — Mon, 25 May 2009 16:31:52 +0000

Dopo aver letto l’interessante articolo di ImpressiveWebs su alcune tecniche javascript mi è venuta un’idea che ti piacerà. Ho deciso di integrarlo con le rispettive tecniche jquery ma, anziché limitarle esclusivamente all’ambito jquery cerco di mantenere comunque un legame con il puro codice javascript.

Per quale motivo? Innanzitutto perché è interessante vedere come da jquery si possa passare ai classici oggetti javascript e poi perché in alcuni casi si preferisce programmare in javascript senza rinunciare ad alcune potenzialità di jquery come, ad esempio, i selettori, spesso argomento di scontro (e confronto) fra i vari framework. Inoltre, come dice ImpressiveWebs, alcuni sviluppatori si trovano a dover lavorare a progetti già avviati nei quali non è possibile (o non è sicuro) utilizzare librerie come jquery, mootools, dojo, ecc.

Un ringraziamento speciale va a ImpressiveWebs che mi ha gentilmente autorizzato a tradurre buona parte dell’articolo orginale.

getElementById: selezionare un elemento conoscendo l’id

Sappiamo che quasi tutti i tag html hanno l’attributo id. Questo attributo serve a identificare univocamente un elemento all’interno del documento html. Non è possibile specificare lo stesso id per due elementi diversi e, se ciò accade, il w3c validator segnalerà l’errore.

Supponiamo di avere un tag html con l’id “my_element_id”:

Questo è un elemento generico

La caratteristica fondamentale dell’id ci permette di selezionare esattamente un elemento che ha come id un certo valore. Non a caso infatti la funzione restituisce un solo elemento e non un array di elementi, come avviene per funzioni che effettuano selezioni più generiche.

var elemento = document.getElementById("my_element_id");

Con jquery è possibile fare lo stesso ma, al contrario della precedente, la funzione jquery prevede la restituzione di un array di elementi poiché viene utilizzata anche per selezioni più generiche. Quindi sarà necessario selezionare il primo, nonché l’unico, elemento dell’array restituito. L’elemento ottenuto è esattamente uguale a quello ottenuto con la funzione getElementById.

var elemento = $("#my_element_id")[0];

Ottenuto l’elemento che si fà?

Si possono utilizzare tutte le proprietà e le funzioni (o meglio, metodi) javascript previste dal quel tipo di oggetto. Ad esempio:

elemento.style.border = "1px solid #000";
elemento.disabled = "true";

Se, invece, preferisci utilizzare jquery dovrai ricorrere necessariamente alle proprietà e ai metodi definiti nella libreria jquery. Ad esempio:

$("#my_element_id").css("border",""1px solid #000"");
$("#my_element_id").attr("disabled","true");

ATTENZIONE. Spesso si sbaglia la scrittura della funzione scrivendo getElementByID anziché getElementById (notare la “d” minuscola).

Vantaggi. L’utilizzo di questa funzione impone la definizione di identificatori per i vari elementi che si vogliono gestire all’interno di funzioni javascript. Questo rappresenta un vantaggio poiché si tende a migliorare la scrittura del codice html. Un’altro possibile vantaggio è la maggior velocità della selezione per id rispetto alla selezione fra un’insieme di più elementi, che vedremo di seguito.

getElementByTagName: selezionare un gruppo di tag

Se per qualche motivo non puoi o non vuoi specificare un id per alcuni elementi, questa funzione ti viene in aiuto. L’unico argomento della funzione è il tag degli elementi da selezionare i quali verranno poi restituiti in un array.

Esempio. Supponiamo di avere una lista di link e di voler selezionare solo quelli che hanno l’attributo “target” uguale a “_blank” in modo da modificare il valore di questo attributo in “_top”.


	Primo link
	Secondo link
	Terzo link
	Quarto link
	Quinto link

Per selezionare i tag “” con l’attributo “target” uguale a “_blank” dobbiamo innanzitutto ottenere un’array di tutti i tag “” e successivamente modificare quelli che rispettano la nostra condizione.

var myLinks = document.getElementsByTagName("a");

for(i=0; i
Con jquery il tutto si riduce a:
$("a[target='_blank']").attr("target","_top");
Con “a” si chiede di selezionare tutti i tag “” e con “[target='_blank']” si chiede che questi tag abbiano l’attributo “target” uguale a “_blank”. Infine con attr("target","_top"), che viene eseguito solo se è stato trovato il tag richiesto, si imposta l’attributo “target” con il valore “_top”.

Miglioramento. Per evitare che la ricerca dei tag “” venga effettuata all’interno dell’intero documento, si può impostare l’id  alla lista in modo da restringere la ricerca agli elementi interni alla lista.

Al tag “” ho precedentemente assegnato l’id “lista_5link”. Ora vediamo come restringere la ricerca.
// Seleziona l'elemento con l'id "lista_5link"
var oggettoLista = document.getElementById("lista_5link");

// Dell'elemento "oggettoLista" ricaviamo l'insieme dei tag 
var myLinks = oggettoLista.getElementsByTagName("a");

// Il ciclo for rimane uguale al precedente
for(i=0; i
Con jquery si aggiunge il vincolo “#lista_5link”:
$("#lista_5link a[target='_blank']").attr("target","_top");
/* Invece di $("a[target='_blank']").attr("target","_top"); */
Soluzione ibrida
// Seleziona gli elementi  con jQuery
var myLinks = $("#lista_5link a")

// Il ciclo for rimane uguale al precedente
for(i=0; i
Osservazione. Potresti dirmi “perché non assegniamo lo stesso id a tutti i tag ?“. Questa operazione non si può fare poiché l’id, per sua natura, deve necessariamente essere unico all’interno del documento, cioè solo un elemento può avere un certo id. Infatti, come spiegato prima, l’id deve servire a identificare univocamente un solo elemento all’interno del documento html.

Leggere e scorrere i nodi del documento
Cosa sono i nodi? Un nodo è un qualsiasi elemento, tag, contenitore, blocco autonomo (es. 
, 
), frammento di testo. I nodi hanno una relazione genitore-figlio. Ad esempio, nel caso della lista illustrata precedentemente,  è il genitore e  il figlio, che a sua volta è il genitore di .
Ogni elemento è un nodo e come tale ha alcune proprietà e metodi che ci permettono di ricavare i suoi figli diretti (children), il suo genitore (parent), e di manipolarli in vari modi.
Codice html che utilizzeremo per tutti gli esempi

	Paragrafo1
	Paragrafo2
	Link
	Paragrafo3
	Titolo h5

Ottenere i nodi figli con childNodes e children
Le due proprietà, childNode e children, sono costituite da un array dei figli diretti.
La differenza fra le due consiste nel fatto che children ignora i nodi di tipo testo concentrandosi sugli elementi html e xml.

La proprietà childNodes rileva come “figli del contenitore” tutti gli elementi: tag, elementi, testo, ecc. Come si può vedere in figura, l’array childNodes avrà 10 elementi: gli indici pari saranno gli elementi “testuali” e gli indici dispari i tag html. N.B. i blocchi evidenziati sono i figli “testuali”, quelli non evidenziati sono i figli “html”
La proprietà children rileva come “figli del contenitore” solo i tag html. Quindi l’array children avrà solo 5 elementi: i tag contenuti nel div “parent_div”

Esempio. Supponiamo di voler assegnare a tutti i figli del div “parent_div” la classe “newclass”.
La proprietà children
// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").children;

for(i=0;i
ATTENZIONE. Ho riscontrato alcuni problemi legati a questa proprietà, ad esempio su Firefox. L’alternativa è proprio childNodes, da utilizzare con qualche piccolo accorgimento.
La proprietà childNodes e nodeType
Gli stessi risultati della proprietà children possono essere ottenuti con la proprietà childNodes, controllando il tipo di nodo che si sta leggendo grazie alla proprietà nodeType. Questa proprietà può avere 12 valori diversi (interi, da 1 a 12). La lista completa la puoi trovare qui: http://www.w3schools.com/Dom/dom_nodetype.asp . In particolare, poiché la proprietà children non considera i nodi testuali, controlliamo che nodeType non sia 3 (codice corrispondente ai nodi testuali).
// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").childNodes;

for(i=0;i
Il risultato è identico al codice precedente in cui si utilizza la proprietà children.
Soluzione ibrida
// Selezione figli con jquery
var div_children = $("#parent_div").children();

// Ciclo for uguale al precedente
for(i=0;i
N.B. la selezione con jquery ha lo stesso effetto della proprietà children, ovvero seleziona tutti i figli tranne quelli di tipo testuale.
Soluzione con jquery
// Selezione figli con jquery e assegnazione della classe "newclass"
$("#parent_div").children().addClass("newclass");
Con $("#parent_div").children() otteniamo i figli e con addClass("newclass") assegniamo la classe “newclass” ai figli trovati.
Ottenere il primo e l’ultimo nodo figlio con firstChild e lastChild
Normalmente per recuperare il primo o l’ultimo nodo figlio di un elemento si dovrebbero scrivere le seguenti righe di codice:
// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;
Problema. Come per la proprietà childNodes, anche queste leggono qualsiasi tipo di nodo. Quindi, se fra due elementi c’è un carattere di spaziatura o un tab, questo verrà considerato un nodo.
Soluzione. Con un semplice ciclo while possiamo leggere i successivi (o precedenti) nodi di tipo non testuale.
// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(first_child!=null && first_child.nodeType==3)
first_child = first_child.nextSibling;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(last_child!=null && last_child.nodeType==3)
last_child = last_child.previousSibling;
Osservazioni. Le condizioni del ciclo while controllano che il nodo sia stato trovato (cioé che sia diverso da null) e che il tipo sia testuale (cioé nodeType = 3). Se entrambe le condizioni sono verificate il nodo attuale viene rimpiazzato con il successivo (nel caso del primo nodo) o con il precedente (nel caso dell’ultimo nodo). Questo procedimento si ripete finché non ci sono più nodi figli o non viene trovato un nodo di tipo “non testuale”. La proprietà nextSibling permette di ottenere il nodo successivo; la proprietà previousSibling permette di ottenere il nodo precedente.
Soluzione ibrida con jquery
Poiché il metodo children() di jquery legge i nodi figlio di tipo “non testuale”.
Per ricavare il primo e l’ultimo nodo figlio si passa come argomento “:first” (per il primo nodo) e “:last” (per l’ultimo nodo).
// Primo nodo figlio
var first_child = $("#parent_div").children(":first");

// Ultimo nodo figlio
var last_child = $("#parent_div").children(":last");
Ottenere il genitore di un nodo con parentNode
Supponiamo di avere il seguente codice html:

	Paragrafo1
	Paragrafo2
	Paragrafo3

Per ottenere il genitore dei tre paragrafi utilizzeremo la proprietà parentNode su uno dei tre paragrafi.
var parent_node1 = document.getElementById("child1").parentNode;
var parent_node2 = document.getElementById("child2").parentNode;
var parent_node3 = document.getElementById("child3").parentNode;
Le tre variabili (parent_node1, parent_node2, parent_node3) avranno lo stesso nodo: il div “parent_div”.
Soluzione con jquery
// parent() restituisce un array di un solo elemento
var my_node = $("#ciaociao").parent()[0];
Ottenere i “fratelli” dei nodi con nextSibling e previousSibling
Per ottenere il fratello di un nodo si possono utilizzare due funzioni:

nextSibling, per leggere il fratello successivo
previousSibling, per leggere il fratello precedente

Supponiamo di avere il seguente codice html:

	Paragrafo1
	Paragrafo2
	Paragrafo3

Vogliamo ottenere il nodo corrispondente al paragrafo di id “child2″.
Problema. Anche queste proprietà selezionano i nodi di tipo “testuale”.
Soluzione. Inseriamo un ciclo while identico a quello scritto per le proprietà firstChild e lastChild.
// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = document.getElementById("child1").nextSibling;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(node_child2_mod1!=null && node_child2_mod1.nodeType==3)
node_child2_mod1 = node_child2_mod1.nextSibling;

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = document.getElementById("child1").previousSibling;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(node_child2_mod2!=null && node_child2_mod2.nodeType==3)
node_child2_mod2 = node_child2_mod2.previousSibling;
Soluzione con jquery
Fortunatamente i metodi next() e prev() di jquery selezionano solo i nodi “non testuali” e restituiscono un set di nodi costituito di fatto da un solo nodo.
// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = $("#child1").next()[0];

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = $("#child3").next()[0];
Attraversare i “fratelli” dei nodi con nextSibling e previousSibling
Supponiamo di voler modificare tutti i fratelli di un certo nodo. Per fare ciò è necessario scorrere tutti i nodi “fratelli” modificandoli in base alle nostre esigenze. In realtà l’attraversamento dei nodi fratelli l’abbiamo già fatto in occasione dei cicli while utilizzati per risolvere il problema della selezione dei nodi testuali.
Utiliziamo il codice html dell’esempio precedente.
// Otteniamo il nodo corrispondente al paragrafo "child1"
var node_child1 = document.getElementById("child1");

// Scorriamo tutti i fratelli di node_child1
while(node_child1!=null && node_child1.nodeType!=3)
{
	// Leggiamo il fratello di node_child1 e lo inseriamo nella stessa variabile
	node_child1 = node_child1.nextSibling;

	// Esempio: applichiamo la classe "newclass"
	node_child1.className="newclass";
}
Conclusioni
Queste sono alcune delle principali tecniche per selezionare e scorrere gli elementi html con il codice javascript “puro” e utilizzando il famoso framework jquery che, come avrai potuto notare, semplifica la scrittura di codice javascript e ne riduce drasticamente la lunghezza.
In queste situazioni preferisci utilizzare javascript puro o jquery? Hai avuto problemi durante l’utilizzo di queste tecniche? Si possono migliorare in qualche modo?
Crediti

ImpressiveWebs – 10 Essential DOM Methods & Techniques for Practical JavaScript
Libro. Javascript – La guida di Danny Goodman, Michael Morrison (McGraw-Hill)
Foto1: Catch me if you can! di Josh n Jerry
Foto2: http://www.freerepublic.com/focus/f-chat/2096935/posts
Foto3: Node di dixit M
Foto5: Climbing di docman

Come utilizzare Ajax: librerie, framework, ottimizzazione, caching, usabilità

Giacomo — Sat, 02 May 2009 09:39:15 +0000

Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.

Il termine “Ajax” è l’acronimo di Asynchronous JavaScript and XML.

Vedremo che, nonostante la tecnica Ajax preveda l’utilizzo di XML, si potranno utilizzare altri formati per lo scambio dati.

Il termine “Ajax” è stato coniato da Jesse James Garret nel post “Ajax: A New Approach to Web Applications“, il 18 febbraio 2005.

Cosa succede con e senza Ajax

Supponiamo di avere una pagina con un form composto da tre campi di testo: nome, cognome e telefono. Lo script lato-server deve ricevere i tre dati, cercarli nel database e stampare l’indirizzo associato.

Importante. Generalmente, lo script utilizzato con una chiamata Ajax è diverso da quello utilizzato per l’esecuzione senza javascript.

L’esecuzione standard dello script

N.B. i rettangoli tratteggiati indicano cosa viene caricato.

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Oltre a quelle dei dati, il server riceverà le richieste http degli altri componenti della pagina che dovranno essere ricaricati.

Seconda fase. Il server cerca l’indirizzo nel database, e il browser ricarica completamente la pagina con i nuovi dati o con un messaggio di errore (es. “indirizzo non trovato”).

L’esecuzione dello script utilizzando Ajax

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Al server arriva solo una richiesta http: quella dei dati inviati. Inoltre vengono stampati i componenti da mostrare successivamente (“tutto ok!”, “i dati … correttamente”, ecc.) nascondendoli con le regole dei css.

Seconda fase. Il server cerca l’indirizzo nel database e, una volta trovato, viene rispedito al browser che aggiornerà il componente riservato all’indirizzo. Gli altri contenuti stampati precedentemente (“tutto ok!”, “i dati … correttamente”, ecc.), vengono resi visibili, mentre i componenti relativi al form vengono nascosti. Per nascondere e mostrare i componenti si utilizzano le regole dei css.

Framework e librerie javascript

Un framework javascript è un insieme di librerie che facilita la scrittura di codice e applicazioni javascript.

Perché utilizzare un framework?

Ti permette di scrivere in poche righe quello che in javascript “puro” richiderebbe centinaia di righe
Elimina il problema della compatibilità browser-javascript eseguendo istruzioni diverse a seconda del browser che si sta utilizzando

Ecco i framework più famosi.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

http://www.prototypejs.org/

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com/

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/

Dojo

Solve problems faster. Create better user experiences. Liberally licensed. Everything you need, all in one place.

http://dojotoolkit.org/

Ajax, jQuery e Php all’opera

Generalmente un’applicazione Ajax è composta dalla pagina html e dallo script lato-server da richiamare successivamente via javascript.

Il framework che utilizzo è jQuery, soprattutto perché, nel complesso, è molto più leggero e veloce rispetto agli altri.

Analizziamo ora il codice dell’applicazione Ajax di cui ho parlato prima.

Requisiti. Php 5.2, MySql 5, jQuery 1.3.

Demo dell’applicazione. Puoi provare l’applicazione Ajax qui.

Pagina html e codice javascript

Questa pagina si può dividere in due parti.

codice html
codice javascript per la gestione delle chiamate ajax e del codice html

Puoi vedere il file completo qui.

Html

All’interno del tag si possono distinguere due

. Il primo (id=”form_panel”) ospita il form e un

per la scrittura degli errori (id=”errors”); il secondo (id=”address_panel”) ospita un

(id=”the_address”) in cui si scriverà l’indirizzo trovato.


	
	
		INSERISCI I DATI
		
		
			
				
Nome (solo lettere)
				
				
			
			
				
Cognome (solo lettere)
				
				
			
			
				
Telefono (numeri, trattino "-", parentesi "(" e ")", spazio " ")
				
				
			
			
		
	

	
	
		INDIRIZZO
		

		< indietro

Javascript

Il codice javascript viene scritto direttamente nel codice html, ma potrebbe essere scritto in un file esterno (.js).

Vengono specificate 3 funzioni e 3 variabili.

$(document).ready(function(){ … }). In realtà, questa non è una funzione, ma un metodo di jQuery che, al posto dei “…”, consente di specificare il codice javascript da eseguire quando la pagina ha completato il caricamento.

function form_check(). Esegue dei controlli sui valori dei campi e restituisce “true” se non ci sono errori, altrimenti “false”.

function form_ajax_send(). Invia i dati del form allo script “myscript.php”, attende e gestisce la risposta.

var form_msgs = new Array(…). Array degli errori relativi al form (es. “dati non corretti”).

var error_msgs = new Array(…). Array degli errori relativi all’invio e alla risposta dei dati (es. “errore del db”).

var regexps = new Array(…). Espressioni regolari utilizzate in form_check() per controllare i caratteri dei dati inseriti.

L’oggetto XMLHttpRequest

Per inviare richieste http dinamiche bisogna utilizzare l’oggetto XMLHttpRequest. Questo oggetto ha una serie di proprietà e metodi.

Uno dei principali svantaggi legati all’utilizzo di questo oggetto sta nel fatto che non è standardizzato, quindi non è riconosciuto universalmente da tutti i browser. Infatti, Internet Explorer 6 e precedenti lo vedono come un ActiveX da richiamare in maniera diversa rispetto ai browser Mozilla.

La soluzione è quella di utilizzare un framework e lasciare che sia lui a occuparsi di effettuare i controlli di compatibilità e differenziare la chiamata e il funzionamento dell’oggetto XMLHttpRequest.

Per conoscere meglio l’oggetto XMLHttpRequest puoi consultare la pagina ufficiale del w3c (in inglese) oppure la pagina su Wikipedia.

Per approfondire la gestione di Ajax con jQuery puoi leggere la pagina della documentazione ufficiale di jQuery relativa ad Ajax: http://docs.jquery.com/Ajax.

Ajax

Analizziamo le righe di codice javascript relative alla gestione della richiesta e della risposta asincrona.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
	function(data,status)
	{
		if(status=="success") { ... }
		else { ... } // status=="failure"
	}
);

$.get. Questa funzione effettua una richiesta GET. Alternativamente si poteva utilizzare $.post. A seconda del tipo di richiesta, nell0 script lato server bisogna utilizzare gli array $_GET e $_POST per ottenere i dati inviati.

“myscript.php”. Il primo argomento della funzione $.get. Specifica lo script da utilizzare.

{firstname_get:firstname,lastname_get:lastname,phone_get:phone}. Il secondo argomento della funzione $.get. Questo è un tipo di dati chiamato “Map”, dove “firstname”, “lastname” e “phone” sono le variabili riempite con i valori del form, e “firstname_get”, “lastname_get” e “phone_get” sono i nomi delle variabili passate allo script. Quindi, in myscript.php per leggere il cognome non utilizzeremo $_GET['lastname'] ma $_GET['lastname_get'].

function(data,status). Il terzo argomento della funzione $.get. Rappresenta la funzione “callback”, ovvero la funzione da utilizzare quando si riceve la risposta. Poiché la risposta è asincrona, cioé avviene in un secondo momento rispetto all’invio dei dati, non possiamo scrivere:

if(form_check())
{
	ajax_invia_dati();
	ajax_gestisci_risposta();
}

poiché, quando verrà chiamata la funzione ajax_gestisci_risposta() sicuramente la risposta non sarà ancora arrivata.

Per questo motivo è necessario specificare la cosiddetta funzione “callback” che verrà eseguita non appena ajax fornirà una risposta. Questa funzione ha due parametri: data (dati ricevuti), status (stato della risposta). Se status è “success” significa che tutto è andato a buon fine, altrimenti status sarà “failure”.

Come ottenere l’oggetto XMLHttpRequest. Le funzioni $.get, $.post, ecc. restituiscono l’oggetto XMLHttpRequest che potrà essere utilizzato con tutti i suoi metodi e le sue proprietà.

Script lato server (php)

Effettua una connessione al database
Esegue la query con i dati ricevuti
Stampa una stringa fra queste: “db error”, “no data”, o l’indirizzo trovato

Puoi vedere il file completo qui.

query("
	SELECT	`Address`
	FROM	`info`
	WHERE	`Lastname`='".$_GET['lastname_get']."' AND
		`Firstname`='".$_GET['firstname_get']."' AND
		`Phone`='".$_GET['phone_get']."'		;");

	// controlla quanti record sono stati trovati (se 0: indirizzo non trovato)
	if($mydb->affected_rows==0)	{ echo 'no data'; }

	// indirizzo trovato
	else
	{
		$address = $result->fetch_array(MYSQLI_NUM);
		echo $address[0];
	}
}
?>

Dati restituiti dallo script

“db error”, se si verifica un errore relativo al database (in fase di connessione)
“no data”, se non viene trovato l’indirizzo
stringa dell’indirizzo, se viene trovato l’indirizzo

Come impostare lo script per i test

Se vuoi testare lo script è necessario effettuare alcune semplici operazioni.

All’interno di myscript.php individua la riga $mydb = @new mysqli(‘localhost’, ‘root’, ‘root’, ‘mydb’); e sostituisci i valori del tuo database: host, username, password, database.
Crea la tabella “info” nel tuo database. Nello script c’è una query (CREATE TABLE … ) da copiare e far eseguire subito dal tuo dbms (es. phpMyAdmin). Se la crei manualmente è necessario creare 5 campi chiamati ID, Lastname, Firstname, Phone, Address.
Infine, inserisci un paio di record in modo che l’applicazione Ajax possa trovare qualc0sa nella tabella.

Formati di scambio dati

Per i dati da inviare come risposta possono essere utilizzati vari formati: testo semplice, html, xml, json, ebml.

Lo script dell’esempio precedente stampa testo semplice.

Testo semplice e html

Preferibile se si devono sviluppare applicazioni semplici che non richiedono massicci scambi di dati e complesse elaborazioni.

Il maggior vantaggio sta nel fatto che testo semplice e codice html non richiedono ulteriori elaborazioni per rendere i dati rappresentabili all’interno di una pagina xhtml o html.

Json

Json, acronimo di JavaScript Object Notation, è un ottimo formato per lo scambio dati.

Si possono rappresentare oggetti e array:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

Per processare una risposta in formato Json, anziché $.get è necessario utilizzare$.getJson. Questa funzion processa automaticamente una risposta in formato Json in modo da poter utilizzare subito i dati.

Ad esempio, se la risposta è:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

all’interno della funzione “callback” potremmo utilizzare le due variabili scrivendo semplicemente:

object.name.length; // per ottenere la lunghezza della stringa "Giacomo"
alert(object.object2.msg); // per stampare un alertbox con il messaggio "Ciao"
newvar = array[4] + 3; // per assegnare alla variabile newvar il valore (5*2)+3, cioé 13

Per saperne di più vai alla pagina ufficiale di Json: http://json.org/.

XML

XML, acronimo di eXtensible Markup Language, è un metalinguaggio di markup che permette di definire tag personalizzare per strutturare documenti complessi. Una volta ottenuta una risposta formattata in XML è necessario elaborarla per poterla gestire.

La lettura e l’elaborazione di un testo XML consiste nello scorrere la struttura del documento per recuperare i dati contenuti nei tag XML. Per scorrere la struttura del documento esistono librerie javascript che consentono di farlo semplicemente.

Utilizzare questo formato è vantaggioso nel caso in cui ci siano molti dati da ricevere, mentre è sconsigliabile nel caso in cui ricevano pochi dati in quanto i caratteri per i tag XML potrebbero superare quelli per i dati effettivi.

Memorizza le risposte Ajax in cache per evitare richieste duplicate

Come detto prima, le risposte Ajax non sono altro che risposte HTTP e, come in tutte le risposte HTTP, possono essere inviati gli header.

Naturalmente, gli header devono essere inviati dallo script lato server, prima di qualsiasi output.

Per memorizzare le risposte Ajax nella cache si possono utilizzare i campi di intestazione Cache-Control, Expires, Pragma, ETag. Nei casi in cui non si possa utilizzare la cache del browser ricorreremo a una tecnica javascript.

Per approfondire la gestione della cache dai uno sguardo al post precedente: http://jblog.it/2009/04/24/ridurre-richieste-http-come-utilizzare-cache-browser_124.html.

Richieste GET e POST: come si comporta il browser

Nell’esempio, utiliziamo un solo script lato server che restituisce 3 output diversi a seconda dell’esito dell’operazione: “db error” per l’errore del database, “no data” se non è stato trovato l’indirizzo, e la stringa dell’indirizzo trovato nel database.

Ti consiglio di leggere questo interessante articolo (in inglese) del w3c: URI, indirizzabilità, e l’uso di GET e POST.

Il comportamento del browser cambia in base al tipo di richiesta (GET e POST) e agli header inviati dallo script lato server. Analizziamo alcuni casi più da vicino.

Le richieste GET

L’indirizzo di una richiesta GET ha la forma:

http://localhost/ajax_phone/myscript.php?par1=ciao&par2=hello

Il comportamento di default del browser consiste nell’inviare sempre una nuova richiesta.

Tuttavia, se vogliamo che il browser memorizzi per 1 ora la risposta dello script lato server, inviamo i seguenti header:

header('Expires:Sun, 03 May 2009 23:18:45 GMT');
header('Cache-Control:public,max-age=3600');
header('Pragma:public');

In questo caso, quando l’applicazione Ajax invia la prima richiesta, il browser legge lo script e lo memorizza in cache. La volta successiva possono verificarsi due casi:

se si inviano dei dati diversi (ad es., se invece di “par2=hello” inviamo “par2=welcome”) il browser effettua una nuova richiesta e la memorizza in cache
se si inviano gli stessi dati, il browser si accorge che l’indirizzo della richiesta è uguale, quindi legge i dati dalla cache evitando di effettuare una nuova richiesta

Differenziare gli header. Se alcune richieste non devono essere memorizzate in cache, puoi inviare degli header diversi a seconda dell’ouput generato dallo script (prima di stampare qualsiasi output). Ad esempio:

if($output!="error")
{
	header('Expires:Sun, 03 May 2009 23:18:45 GMT');
	header('Cache-Control:public,max-age=3600');
	header('Pragma:public');
}
else
{
	header('Expires:Sun, 01 Jan 1970 02:00:00 GMT');
	header('Cache-Control:no-cache');
	header('Pragma:no-cache');
}

Forzare la richiesta. Per fare in modo che il browser effettui una nuova richiesta, anche se questa è già presente nella cache, basta inviare un ulteriore parametro con un valore variabile, ad esempio un numero casuale.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone,random:Math.random()},
	function(data,status){...});

Le richieste POST

L’indirizzo di una richiesta POST ha la forma:

http://localhost/ajax_phone/myscript.php

E i parametri? Vengono inviati tramite protocollo HTTP, ma non sono visibili al browser.

Le richieste POST non possono essere memorizzate in cache.

Come evitare le richieste duplicate

Abbiamo visto che le richieste POST non possono essere memorizzate in cache.

Tuttavia è possibile evitare le richieste duplicate grazie a qualche riga di javascript.

Questa tecnica consiste nel memorizzare i dati inviati e ricevuti in un array, in modo che, prima di inviare una richiesta, si controlla se i dati da inviare sono già presenti nell’array. Se sono presenti, si leggono i dati ricevuti in corrispondenza dei dati richiesti e si procede con l’esecuzione dell’applicazione.

var my_array() = new Array();

/* Una volta riempito l'array avrà questo aspetto
myarray = Array(
	Array( Array('Mario','Rossi',3429752370), 'no data' ),
	Array( Array('Giacomo','Ratta',4325233), 'Via Beethoven, 21' ),
);
*/

Ogni elemento dell’array è un array di due elementi. Il primo è l’array dei dati inviati; il secondo è la stringa dell’output restituito.

// Esegue le operazioni con i dati ricevuti
function esegui_le_operazioni(data) { ... }

if(form_check())
{
	// Leggo i valori dei 3 campi del form
	firstname = $('#firstname').val();
	lastname = $('#lastname').val();
	phone = $('#phone').val();

	// Indica se sono state trovate i dati da inviare
	// Contiene l'indice dell'elemento contenente dati inviati e dati ricevuti
	found = -1;

	// Cerco i dati nell'array
	for(i=0;i=0)
	{
		esegui_le_operazioni(my_array[found][1]);
	}

	// Dati non trovati: nuova richiesta
	else {
		$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
		// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
		function(data,status)
		{
			if(status=="success")
			{
				// Inserisco dati inviati e dati ricevuti nell'array
				// riga da adattare in base alle proprie esigenze)
				my_array.push(new Array(new Array(firstname,lastname,phone), data));

				esegui_le_operazioni(data);
			}
			else { ... } // status=="failure"

		}); //end-callback

	} //end-if
}

Quando utilizzare GET e quando POST

Il metodo GET è da preferire quando si devono inviare dati per il normale funzionamento della pagina e degli script
Il metodo POST si deve utilizzare quando quelli da scambiare sono dei dati sensibili (username, password, telefono)

Migliorare l’usabilità e l’accessibilità delle applicazioni Ajax

Spesso nella progettazione delle applicazioni Ajax l’usabilità lascia un po’ a desiderare: nessun messaggio di successo/errore, caricamenti infiniti senza segni di vita, ecc.

Certo, l’usabilità è un tema complesso e progettare siti e applicazioni usabili richiede tempo e buone competenze.

Tuttavia, ci sono alcune cose che devono essere fatte e che, fortunatamente, non richiedono troppo tempo.

Potrai vedere queste modifiche nello script di esempio.

Errori e messaggi

Ogni campo di input deve avere la relativa area dedicata ai messaggi di errore (“dati obbligatori”, “caratteri non validi”, ecc.)
La pagina deve avere un’area destinata ad ospitare i messaggi relativi all’esecuzione dello script (“ricerca eseguita con successo”, “errore dell’applicazione”, “errore del database”, ecc.)

Barra di caricamento

Nella maggior parte della applicazioni, per motivi tecnici, non è possibile inserire una barra di caricamento che rilevi la percentuale reale dei dati caricati fino a quel momento.

Generalmente, si preferisce mostrare un’immagine gif che può essere una barra di caricamento o un’animazione generica in modo che faccia sapere all’utente che l’applicazione sta lavorando.

Svantaggio. Durante il caricamento dei dati si potrebbe verificare un malfunzionamento che non blocca la richiesta. In questo caso il caricamento sarebbe infinito provocando l’abbandono del sito da parte dell’utente.

Soluzione 1. Puoi inserire un pulsante da far premere all’utente per fermare la richiesta http.

Soluzione 2. Analizza il tuo script e prevedi un tempo massimo entro cui restituire l’output, e, con javascript, impostare un timer che faccia fermare la richiesta Ajax una volta trascorso il tempo previsto.

// esegue la funzione stopAjaxRequest() dopo 10 secondi
setTimeout(stopAjaxRequest(),10000);

Come creare la funzione stopAjaxRequest().

L’oggetto XMLHttpRequest ha il metodo abort() che permette di fermare una richiesta http.
Le funzioni $.ajax, $.get, $.post, $.getScript, $.getJSON di jquery restituiscono un oggetto XMLHttpRequest.

1. Creiamo una variabile globale per l’oggetto XMLHttpRequest, che chiamiamo XHR

var XHR;

2. Creiamo la funzione stopAjaxRequest() che richiama XHR ed esegue il metodo abort()

function stopAjaxRequest() { XHR.abort(); }

3. Assegnamo a XHR l’oggetto restituito dalla funzione $.get che utilizziamo per inviare i dati

XHR = $.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	function(data,status) { ... });

Se javascript è disabilitato…

Purtroppo, ancora oggi ci sono utenti che utilizzano browser che non eseguono codice javascript, che hanno scarsa compatibilità oppure con javascript disattivato.

La soluzione è quella di progettare applicazioni che funzionino sia con javascript che senza.

Questo potrebbe andare bene per la piccola applicazione Ajax realizzata per questo post. Tuttavia, se le applicazioni sono di un certo livello, il carico di lavoro aumenta notevolmente. Quindi progettare applicazioni ibride ha senso solo quando le applicazioni da realizzare devono offrire il massimo della compatibilità con i browser usati dagli utenti (ad es. siti governativi, pubblica amministrazione, ecc.)

Secondo me, data la piccola percentuale di browser non compatibili e di utenti che disattivano (erroneamente) javascript, e la presenza di siti importanti come ebay, microsoft, youtube che non offrono l’alternativa “no javascript”, si può benissimo sviluppare un sito senza preoccuparsi degli utenti che non potranno eseguire javascript.

Nel tag

Svantaggi di Ajax

Le chiamate effettuate non vengono registrate nella cronologia, a differenza di quanto avviene utilizzando iframe nascosti

I pulsanti “avanti” e “dietro” non sono utilizzabili poiché le chiamate Ajax non vengono memorizzate nella cronologia

L’utilizzo esclusivo di javascript viola il requisito 15 della legge Stanca: “la pagina deve essere fruibile anche in assenza di script”

L’oggetto XMLHttpRequest non è compatibile con tutti i browser. Internet Explorer 6 e precedenti lo vedono come oggetto ActiveX, e il browser potrebbe essere impostato a un livello di sicurezza tale da non permettere l’esecuzione di controlli ActiveX

L’oggetto XMLHttpRequest può comunicare solo all’interno del dominio. Se la destinazione è esterna al dominio bisogna creare un proxy lato server per poter comunicare all’esterno.

Poiché i motori di ricerca non eseguono codice javascript, essi non possono indicizzare i contenuti generati dinamicamente con javascript e Ajax

Libri e risorse utili

Ajax. Guida per lo sviluppatore. Seconda edizione. Hoepli (2007).

Con Ajax guida per lo sviluppatore scoprirete come sfidare le regole tradizionali di quello che può accadere sul Web e come liberarvi del consueto approccio “click and wait”, approfondendo le tecniche, i pattern e i casi di utilizzo di Ajax, così da crearvi un’esperienza d’uso senza precedenti nelle vostre applicazioni.

Link: http://www.hoepli.it/editore/visbook.asp?id=978-88-203-3923-4.

Ajax e Php. Sviluppare applicazioni web dinamiche. Hoepli (2007)

AJAX e PHP. Sviluppare applicazioni web dinamiche è la risorsa più pratica ed efficiente che possiate utilizzare per entrare nell’entusiasmante mondo di AJAX. Questo libro vi spiegherà infatti come creare applicazioni web in PHP che sfruttino al massimo le tecnologie Ajax.

Link: http://www.hoepli.it/libro/ajax-php.asp

Siti e pagine

Ajax: A New Approach to Web Applications

W3C: The XMLHttpRequest Object

Wikipedia: l’oggetto XMLHttpRequest

jQuery: Ajax

JSON.org

Ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser

W3C: URIs, Addressability, and the use of HTTP GET and POST