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
Nessun commento:
Posta un commento