Incontri tecnologici: settembre 2011

mercoledì 28 settembre 2011

jQuery-AJAX con $.get() e $.post()

Pagina in aggiornamento

$.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url: stringa contenente l'url verso il quele è inviata la richiesta.
data: stringa o array chiave:valore contenente i dati da inviare al server insieme alla richiesta.
success(data, textStatus, jqXHR): callback function che viene eseguita se la richiesta ha avuto successo.
dataType: Tipo di dato in risposta alla richiesta. Default: Intelligent Guess (xml, json, script, text, html).

martedì 27 settembre 2011

jQuery-AJAX con $.load()

La chiamata AJAX con il metodo $.load() carica codice HTML contenuto o generato da un file remoto in un elemento (solitamente un "div") della pagina HTML.
La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.

La sintassi è la seguente:

$(document).ready(function(){  
  $("a#link_che_attiva_la_chiamata_ajax").click(function(){   
    $("div#dove_inserisco_il_codice_ricevuto").load(
      url,    
      {data},    
      function(){     
        // funzione callback da eseguire alla fine    
      });    
    });   
});

I parametri che possono essere gestiti sono:

Nome Opzione	Tipo	Default	Descrizione
url	String		L'URL della pagina contenente l'HTML da caricare.
data (opzionale)	Map, String		Coppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST.
callback (opzionale)	Callback		Funzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest. La callback può anche essere utilizzata senza paramentri se questi non servono. Es: function (responseText, textStatus, XMLHttpRequest).

Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".

File "chiamante.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>jQuery - Test funzione load()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  $("a#ancoraAjax").click(function(){
   $("div#contenutoAjax").load(
    "remoto.php",
    {numero: 10, stringa: 'pippo'},
    function(){
     alert('dati caricati');
    });
    });
   });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
File remoto.php:

<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>

Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

lunedì 26 settembre 2011

jQuery-AJAX con $.ajax()

Il framework jQuery mette a disposizione diversi metodi per implementare AJAX.

Incominciamo dal metodo più articolato $.ajax(options) che restituisce XMLHttpRequest e presenta la seguente implementazione:

$.ajax({
  nome_opzione1: valore_opzione1, 
  nome_opzione2: valore_opzione1, 
  ... 
  nome_opzioneN: valore_opzioneN
  })

Ecco di seguito una tabella delle principali options che possono essere utilizzate:

Nome Opzione	Tipo	Default	Descrizione
async	Boolean	true	Imposta se la chiamata deve essere asincrona (default) o sincrona.
beforSend	Function		Modificare XMLHttpRequest, passato come argomento, prima che sia inviato. Es: function (XMLHttpRequest){....}
cache	Boolean	true (false per dataType "script" e "jsonp")	Se settato su false forza la pagina a non utilizzare la cache del browser
complete	Function		Funzione da eseguire dopo che la richiesta è finita. Tale funzione è eseguita dopo che le funzioni di successo e errore sono eseguite. Es: function (XMLHttpRequest, textStatus){.....}
contentType	String	"application/x-www-form-urlencoded"	Imposta il conten-type dei dati inviati al server. Il valore di default va bene quasi in ogni caso.
data	Object, String		Dati inviati al server. L'oggetto deve essere una coppia chiave/valore. Essi sono convertiti in stringhe se non lo sono già. I dati sono inseriti nell'URL e possono essere prelevati tramite il metodo GET. Si possono passare anche array.
dataType	String	xml o html	Tipo di dato che ci si aspetti ritorni il server. Se non è specificato si basa sul MIME type della risposta. Tipi ammessi: "xml", "html", "script", "json", "jsonp" e "text".
error	Function		La funzione da eseguire nel caso la richiesta fallisse. La funzione ha 3 argomenti: l'oggetto XMLHttpRequest, una stringa che descrive l'errore e un'exception object. Es: function (XMLHttpRequest, textStatus, errorThrown){.....}
ifModified	Boolean	false	La richiesta ha successo solo se la risposta è cambiata dall'ultima richiesta, controllando tale informazione nell'header. Normalmente questo non è così, perciò di default il valore è false e si ignora l'header.
password	String		Password da usare in risposta ad una richiesta di autenticazione HTTP.
success	Function		La funzione da eseguire quando la chiamata ha successo. La funzione ha due argomenti: i dati ritornati dal server formattati in accordo con il dataType; e una stringa che descrive lo stato. Es: function (data, textStatus) {....}
timeout	Number		Timeout locale in millisecondi per la richiesta. Questo sovrascrive il valore globale settato tramite $.ajaxSetup(). Questa funzione è molto utile per differenziare i timeout delle varie richieste
type	String	"GET"	Il tipo di richiesta ("POST" o "GET"). Anche altri metodi HTTP sono utilizzabili (PUT, DELETE, ...) ma non tutti i browser li supportano.
url	String	pagina corrente	L'URL da chiedere. Esso deve essere una stringa e NON un Location Objec. SI: document.location.href NO: document.location
username	String		Username da usere in risposta ad una richiesta di autenticazione HTTP.

Vediamo un esempio in cui il file "chiamante.html" effettua una chiamata ajax al file "remoto.php" passandogli due parametri; il file "remoto.php" crea il codice html con i parametri passati e lo restituisce al file "chiamante.html"; al ricevimento del codice il file chiamante lo inserisce nel div "contenutoAjax" e avverte che il compito è stato fatto.

File chiamante.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>jQuery - Test funzione ajax()</title>
 <script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
   $("a#ancoraAjax").click(function(){
    $.ajax({
     type: "POST", 
     url: "remoto.php",
     data: "numero=10&stringa=Boston",
     success: function(html){    
      $("#contenutoAjax").append(html);
      alert('fatto');  
      }
     });    
    });
    });
 </script>
</head>

<body>
 <a id="ancoraAjax" href="#">mostra</a>
 <div id="contenutoAjax"></div>
</body>
</html>

File remoto.php

<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];

echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>

La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax

venerdì 23 settembre 2011

jQuery - Effetti fading

Con effetto fading si intende quella trasformazione di un elemento della pagina HTML che, lavorando sull'opacità (che varia da 0 a 1), prococa la sua scomparsa o apparizione senza modificarne posizione e dimensione.

I metodi che jQuery mette a disposizione per effettuare il fading di un oggetto sono fadeIn(), fadeOut() e fadeTo().

Anche in questo caso come per i metodi relativi agli effetti grafici è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.
$("#div_fade").fadeIn(); // aumento dell'opacità dell'elemento con id "div_fade" fino alla sua visibilità totale

$("#div_fade").fadeOut("fast"); // diminuzione dell'opacità dell'elemento con id "div_fade" fino alla sua scomparsa totale con durata "fast" dell'effetto

$("#div_fade").fadeTo(1000, 0.50); // modifica dell'opacità dell'elemento con id "div_fade" fino al 50% in un tempo di 1 secondo

giovedì 22 settembre 2011

jQuery - Effetti di sliding

Gli effetti di sliding offrono la possibilità di muovere un elemento della pagina HTML a cascata verso l'alto, verso il basso o in modo "toogle".
I metodi che il framework mette a disposizione sono slideDown(), slideUp() e slideToogle().

Anche in questo caso come per i metodi show(). hide() e toogle() è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.

$("#div_mobile").slideDown(); // slide verso il basso dell'elemento con id "div_mobile"
$("#div_mobile").slideUp("fast"); // slide verso l'alto dell'elemento con id "div_mobile" con durata "fast"
$("#div_mobile").slideToogle(2000); // slide in modo alternato verso l'alto e verso il basso dell'elemento con id "div_mobile" con durata 2 secondi

mercoledì 21 settembre 2011

jQuery - Mostra e nascondi

Tra gli effetti grafici che il framework jQuery mette a disposizione dello sviluppatore i primi che troviamo danno la possibilità di mostrare, nascondere o l'alternare dei due effetti di un elemento strutturale della pagina.

Per mostrare un elemento viene utilizzato il metodo show().

$("p").show(); // mostra gli elementi "p" nascosti delle pagina

Per nascondere un elemento viene utilizzato l metodo hide().

$("p").hide(); // nasconde gli elementi "p" della pagina

Per alternare mostra e nascondi vine eutilizzato il metodo toggle().

$("p").toggle(); // mostra e nasconde in successione gli elementi "p" della pagina.

E possibile manipolare la durata temporale dell'effetto mostra o nascondi fornendo all'effetto i valori predefiniti "slow", "normal" e "fast" o il valore di durata in millisecondi.

$("p").show("slow"); // mostra gli elementi "p" nascosti delle pagina con durata slow
$("p").toggle(1000); // mostra o nasconde gli elementi "p" nascosti delle pagina con durata 1 secondo

Altri esempi

I esempio: cliccando sull'elemento con id "pulsante" modifica la visibilità dell'elemento "mostranascondi" con una durata dell'effetto di 2 secondi.
$("#pulsante").click(function () {
$("#mostranascondi").toggle(2000); //2 secondi
});

venerdì 16 settembre 2011

jQuery - I filtri

Oltre ai selettori già visti jQuery mette a disposizione altri strumenti per migliorare e semplificare le operazione di ricerca degli elementi su cui operare; questi elementi sono detti filtri e possiamo in base all'oggetto del filtraggio:

Filtri tramite parole chiave e contenuti
Le parole chiave che possiamo utilizzare sono:

odd o even per selezionare gli elementi pari o dispari
first o last per lesezionare il primo o l'ultimo elemento
lt(n), gt(n) o eq(n) se si volgiono selezionare tutti gli elementi rispettivamente presecenti successivi o uguali all'ennesimo (n) elemento.
first-child o last-child seleziona il primo o l'ultimo figlio di un elemento
only-child seleziona gli elementi singoli
nth-child seleziona elementi figli in base al contenuto tra parentesi
not() seleziona elementi in base all'assenza di contenuti
has(), contain(), hidden seleziona elementi in base a contenuti o attributi

Ogni parola chiave deve essere preceduta dal tag di riferimento e dal carattere ":"

// Seleziono l'ultima riga della tabella
$("tr:last"); 

// seleziona i figli dispari degli elementi "li" 
// contenuti nell'elemento "ul" con id "navglob"
$("ul#navglob li:nth-child(odd)");

// seleziono tutti gli elementi "li" che contengono 
// un link all'interno del'elemento con id "elenco"
$("#elenco li:has(a)");

// selezioni tutti i div nascosti
$("div:hidden");

// seleziono tutti i div che non appartengono alla 
// classe "commento"
$("div:not(.commento)");

Filtri tramite attributi
La selezione degli elementi viene basata sul valore degli attributi:

// seleziono gli elementi "a" con title "icona"
$("a[title='icona']");

// seleziono gli elementi "a" con title che inizia 
// con "icona"
$("a[title^='icona']"); 

// seleziono gli elementi "a" con title che 
// finisce con "icona"
$("a[title$='icona']"); 

// seleziono i link che non aprono nuove finestre
$("a[target!='_self']"); 

// seleziono i link che hanno un attributo "target" 
// impostato
$("a[target]"); 

// seleziono i link con title "icona" e contemporaneamente 
// con target "_blank" (selettori concatenati)
$("a[title='icona'][target='_blank']");

Filtri per elementi form

// seleziono tutti gli elementi password del form
$("input[type='password']"); 

// seleziono tutti gli elementi password del form
$(":password")

venerdì 9 settembre 2011

jQuery - I selettori

Nel framework jQuery i selettori degli elementi del codice HTML possono per comodità essere suddivisi in due gruppi.
I selettori di base utlizzano il tag name, l'id o la classe per individuare gli elementi.
I selettori gerarchici utilizzano l'organizzazione gerrchica delle pagina per individuare gli elementi.

Esempio di selettore di base:
$("a"); // selezione tutti i tag "a" della pagina;
$("#id_elemento"); // seleziono l'elemento con id "id_elemento";
$(".classe_elemento"); // seleziono gli elementi con classe "classe_elemento";

Esempio di selettori gerarchici:
$("#header a"); // seleziono tutti i tag a interni al div con id "header";
$("ul#navglob > li"); // seleziono tutti gli elementi li direttamente discendenti dal tag ul con id "navglob";
$("h1 + h2"); // seleziono tutti i tag h2 preceduti da h1:
$("id_elemento ~ div") // seleziono tutti i div adiacenti all'elemento con id "id_elemento"

In considerazione del fatto che il selettore più interno viene attivato prima e quindi che la selezione avviene da destra verso sinistra (scartando dall'insieme trovato con il primo criterio gli elementi che non soddisfano il secondo criterio) è bene impostare i selettori più significativi all'interno o a destra in modo da velocizzare le operazioni di selezione.

$("p#header strong"); // NO - Seleziono prima tutti gli elementi "strong" della pagina e poi li scarto tutti ad eccezione di "p#header".
$("strong ", $("p#header")); // SI - Seleziono l'elemento "p#header" e scarto tutti gli elementi interni non racchiusi in tag "strong".
$("p#header").find("strong"); // SI -

lunedì 5 settembre 2011

Codice su blogger con SyntaxHighlighter

SyntaxHighlighter è un plugin in javascript che consente di evidenziare porzioni di codice inserite in un una documento HTML o in un post.

L'inserimento di SyntaxHighlighter in un documento HTML richiede le seguenti operazioni:

Scaricare i file dal sito http://alexgorbatchev.com/SyntaxHighlighter/ e caricarli sul web server.
Linkare al documento i file principali shCore.js e shCore.css
Linkare al documento i file relativi ai linguaggi utilizzati "brushes" (qui si trova la lista dei file-linguaggio disponibili)
Includere i fogli di stile shCore.css e shThemeDefault.css
Creare un tag con <pre> o <script> per ogni porzione di codice da evidenziare.
Richiamare il metodo SyntaxHighlighter.all()

Vediamo più nel dettagio l'inserimento di SyntaxHighlighter nei post di Blogger:

Accedere al pannello di gestione del blog, selezionare la voce "Modello" e quindi "Personalizza HTML"
Una volta avuto accesso al codice HTML del modello, appena prima del tag "</head>" inserire il seguente codice:

Salvare quindi il codice HTML del modello personalizzato
Inserire ora nel post la porzione di codice racchiusa dai tag <pre> e </pre> specificando il linguaggio usato nell'attributo di classe (in caso di codice html lo inseriremo tra i tag <pre class="brush:js"> e </pre> ).

Il sito di riferimento è http://alexgorbatchev.com/SyntaxHighlighter/ dove è possibile trovare anche le istruzioni di installazione in altre applicazioni.