I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Chiamate AJAX: come effettuarle correttamente

AJAX, acronimo di Asinchronous Javascript and XML nasce come strumento utile a aggiornare i dati di una pagina senza ricaricarla. E' una tecnologia utilizzata anche dai motori di ricerca, per prevedere le parole chiave che l'utente digita nella barra di ricerca. Questi sono gli effetti di aggiornamento dinamico della pagina html resi possibili grazie a questa tecnologia. Essa favorisce quindi lo scambio di dati in background senza necessità di cambiare l'impostazione della pagina visualizzata.

Ci sono due modi per implementare questa funzionalità con il linguaggio Javascript. Qui di seguito ne elencherò due: JQuery e javascript senza framework. Il primo approccio, qui di seguito, è molto veloce e intuitivo, proprio del paradigma jQuery (write less do more):

$.ajax({
type: "POST",
url: "ajaxserver.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Dati salvati: " + msg );
});

Come avete visto in queste poche linee di codice abbiamo realizzato una chiamata AJAX molto semplice, verso uno script server in PHP chiamato ajaxserver.php. Al termine della chiamata uscirà un alert che ci informerà dei dati salvati. Lato server in PHP, per richiamare le variabili, avremo:

<?php

$nome=$_POST["name"];

$location=$_POST['location'];

salvadati($nome, $location);

echo "OK";

?>

Nell'alert verrà stampato "Dati salvati: OK". Una chiamata AJAX può essere implementata anche sfruttando il javascript nativo, senza frameworks (modificando per esempio il DOM) in questo modo:

<div id="content" onClick="agg_DOM()">

</div>

contenuto = document.getElementById("content");

function agg_DOM(){
var http = new XMLHttpRequest();
var url = "ajaxserver.php";
var params = "id="+ id;
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
  var response = http.responseText;
  contenuto.innerHTML=response;
   }
}
http.send(null);
}

Alla fine della chiamata di questa funzione, il div "content" avrà il testo che restituisce la chiamata allo script PHP ajaxserver.php. Questi sono solo due dei tanti modi di implementazione di AJAX ma gli esempi dati sono una buona base per implementazioni più avanzate.

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento