PROGRAMMAZIONE

Esempio di integrazione Ajax e Php con richiesta Get

richiesta asincrona ajax php

Integrare Ajax e Php

Come tutti dovremmo sapere, Ajax (Asynchronous JavaScript and XML) è una tecnica di sviluppo che consente l’aggiornamento dinamico di una pagina web senza il ricaricamento da parte dell’utente.

Lo scambio di dati, fatto in background, tra il web browser e il server viene fatto tramite l’oggetto XMLHttpRequest.

In poche parole, tramite un’azione dell’utente (ad esempio l’uso di una select) viene richiamata una funzione, solitamente javascript, che tramite l’oggetto XMLHttpRequest richiama una pagina dinamica (che può essere scritta in diversi linguaggi di programmazione per il web  come ad esempio php, asp, java, jsp) passandole o meno dei dati; la pagina una volta svolto il suo compito restituisce in output un risultato che viene visualizzato a schermo o utilizzato per altri scopi.

Mostreremo ora un esempio di integrazione tra Ajax e Php con una select che ogni volta che viene utilizzata, viene chiamata una funzione javascript che passa il valore della select ad una pagina scritta in php la quale restituisce di nuovo il valore passato che viene poi mostrato in un div della stessa pagina dove abbiamo la select, il tutto in modo asincrono e senza ricaricamenti della pagina.

Per l’esempio dobbiamo creare 3 files:

1) index.html, la pagina web dove andremo a inserire la select e che visualizzerà il valore scelto:

<html>
    <head>
        <title>Questo e' un test asincrono di integrazione tra Ajax e Php</title>
		<script language="JavaScript" src="script.js"></script>
    </head>
    <body>

        <div>Esempio</div>
		<select onchange="mostraInfo(this.value)">
			<option value="Ciao">Ciao</option>
			<option value="Hello">Hello</option>
			<option value="Hallo">Hallo</option>
		</select>
		</br>
		Qui stampiamo il risultato della select: </br>
		<div id="info"></div>
    </body>
</html>

2) script.js, dove inseriamo la funzione javascript richiamata dalla select che passerà, tramite get, il valore scelto al file php, e la gestione dell’oggetto XMLHttpRequest:

var xmlhttp;

function mostraInfo(info)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Il browser non supporta le richeste HTTP");
return;
}
var url="test.php";
url=url+"?test="+info;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.setRequestHeader("connection", "close");
xmlhttp.send(null);

}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("info").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

3) test.php, il file php dove riceveremo la get dal file script.js:

<?php

$test=$_GET["test"];
echo '<b>Hai scelto di salutarmi cosi: ' . $test . '</b>';

?>
Tags: , , , , , , ,

Utilizziamo dei cookies sul nostro sito web

Per favore conferma, se accetti il tracciamento dei tuoi cookie. Puoi anche rifiutare il tracciamento, continuando la navigazione senza che i tuoi dati vengano inviati a terze parti..