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
