Incontri tecnologici: AJAX

Visualizzazione post con etichetta AJAX. Mostra tutti i post

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