Ajax: Richieste GET XMLHttp
Posted By Este in Tutorial
Ci occuperemo di un semplice script scritto in Ajax che ci permette di visualizzare delle informazioni da un database,senza dover ricaricare la pagina web.
Questo procedimento ci permette di rendere la pagina più fluida,in modo da caricare solo le informazioni che ci servono,e non ltutta la pagina.
Questo tutorial è dedicato ai programmatori che già hanno una conoscenza basilare di PHP ed SQL.
Per una questione di compatibilità con i browser,ci serve utilizzare una libreria (che potete scaricare qui) che ci permette di creare oggetti XMLHttp validi per tutti i browser.
Per questo tutorial potremmo utilizzare solo 3 file,ma per una questione di ordine,preferisco impostare il lavoro su 5 semplici file:
- config.php - Dove ci sono tutte le info per connettersi al database
- script.js -Dove inseriremo il codice JavaScript
- index.php - Dove si trova il form che manda la richiesta GET
- getData.php -Dove si effettua la connessione al database
- zxml.js - La libreria che avete scaricato prima
In pratica il nostro obiettivo sarà semplicemente quello di aggiornare un tag <DIV> con delle informazioni che vengono prelevate dal database. Dal file index.php viene mandata la richiesta che passa da getData.php per poi tornare nuovamente a index.php,e tutto questo senza la necessità di ricaricare la pagina!
Iniziamo con la creazione della tabella del database eseguendo la seguente query:
CREATE TABLE `persone` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`nome` VARCHAR( 255 ) NOT NULL ,
`cognome` VARCHAR( 255 ) NOT NULL ,
`anni` INT( 11 ) NOT NULL ,
PRIMARY KEY ( `id` ));
Successivamente creiamo il file config.php:
<?php
$db_host = “localhost”;
$db_user = “root”;
$db_password = “”;
$db_name = “tutorial”;
?>
Sostituite a questi valori,quelli del vostro database! Se lo eseguite in locale con un programma come Easy-PHP dovrete cambiare solo il nome del database con quello creato da voi e lasciare gli altri valori invariati.
Occupiamoci adesso del file index.php :
<script type=”text/javascript” src=”script.js”></script>
<p>ID utente: <input type=”text” id=”id” value=”" /></p>
<p><input type=”button” value=”Invia” onClick=”getData()” /></p>
<div id=”info”></div>
Il file script.js ha al suo interno tutto il codice JavaScript che andremo ad usare ,che nel nostro esempio racchiude solo 1 funzione:
function getData(){
var sId = document.getElementById(”id”).value;var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open(”get”,”getData.php?id=”+sId,true);
oXmlHttp.setRequestHeader( “If-Modified-Since”, “Sat, 1 Jan 2000 00:00:00 GMT” );
oXmlHttp.onreadystatechange = function () {
if(oXmlHttp.readyState == 4) {
if(oXmlHttp.status == 200) {
var divInfo = document.getElementById(”info”);
divInfo.innerHTML = oXmlHttp.responseText;}
else {
var divInfo = document.getElementById(”info”);
divInfo.innerHTML = “C’è stato il seguente errore: ” + oXmlHttp.statusText;
}
}
};
oXmlHttp.send(null);
}
Infine il file getData.php che esegue la richiesta al database:
<?php
header(”Content-Type: text/plain”);
include(”config.php”);
$sId = $_GET[”id”];
$db = mysql_connect($db_host, $db_user, $db_password);
if ($db == FALSE)
die (”Errore nella connessione. Verificare i parametri nel file config.inc.php”);
mysql_select_db($db_name, $db)
or die (”Errore nella selezione del database. Verificare i parametri nel file config.inc.php”);
$query = “SELECT * FROM persone WHERE id=’$sID’”;
if($result = mysql_query($query, $db)){
$row = mysql_fetch_array($result);
$sInfo=”<br>Nome: “.$row[”nome”].”<br>Cognome: “.$row[”nome”];
}
else { $sInfo = “Nessuna persona trovata con il seguente ID”; }
echo $sInfo;
?>
E questo è tutto! una volta richiesto l’ID tramite il “form” verrà aggiornato automaticamente il vostro <div> e verranno visualizzati ,se esistono,i dati prelevati nel database!