Aggiornamento del contenuto di Elementi di una PaginaWeb con AJAX PHP DB

Prendendo spunto da questo post , e seguendo i consigli di alemoppo , ho deciso di scrivere questa piccola guida.

Cio' che si vuole ottenere e' aggiornare il contenuto di uno o piu' elementi di una pagina senza dover aggiornare la pagina stessa; la richiesta di aggiornamento verra' eseguita in asincrono (AJAX) , prelevando i dati da un DB con PHP per poi inserirli nell'elemento.

Dovremo creare due file PHP , uno che sara' la nostra pagina principale e l'altro che eseguira' il prelevamento dei dati dal DB;

Nel file principale avremo la parte in PHP che serve per generare la nostra pagina e lo script AJAX.
Lo script contiene una funzione il cui argomento e' Id dell'informazione da recuperare nel DB;
quindi aprira' una connessione in asincrono e eseguira' il secondo file PHP per il recupero del dato,
una volta che quest'ultimo sara' disponibile lo assegnera' al nostro elemento.

Ecco lo script AJAX

Codice PHP:

---

<script>
/* AJAX = Asynchronous JavaScript and XML */

function loadXMLDoc(id)
{
/* questa prima parte della funzione apre la comunicazione con il server in background , senza dover riaggiornare la pagina */

var xmlhttp;
if (window.XMLHttpRequest)
{// codice per le nuove versioni di browser che hanno XMLHttpRequest integrato IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// codice per le vecchie versioni di browser IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

/* qui catturiamo l'evento di quando il readyState cambia */
/* 0: richiesta non inizializzata */
/* 1: connessione con il server attivata */
/* 2: il server ha ricevuto la richiesta */
/* 3: il server sta eseguendo la richiesta [query] */
/* 4: il server ha finito e la risposta e' pronta ! */
/* mentre lo STATUS e' lo stato della pagina , cioe' : 200: "OK" 404: Page not found */

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
/* qui si inserisce la risposta dal server (quindi l'informazione che abbiamo chiesto al nostro file php */
/* di prendere dal DataBase , e la si passa al nostro elemento (in questo caso un div) */
/* da notare che abbiamo richiesto una stringa come risposta , questo perche' non stiamo usando un file XML */
/* altrimenti avremmo dovuto usare responseXML */
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

/* qui apri il file dettaglio.php a cui passi la richiesta id e imposti il parametro asincrono=true */
/* l'importanza di avere una comunicazione asincrona e' che JS non deve aspettare la risposta del server */
/* ma puo' continuare ad eseguire il codice ed eventualmente a ritardare la risposta in attesa del server */
/* in questo modo non si creano "colli di bottiglia" , ovvero rallentamenti dovuti a lunghe attese */
/* chiaramente se si imposta asincrono=false (quindi sincrono) JS fermera' l'esecuzione del codice fino a */
/* quando il server non gli avra' fornito la risposta .. */

xmlhttp.open("GET","dettaglio2.php?ID="+id,true);
xmlhttp.send();

/* da notare che AJAX puo' usare sia ASP che PHP */
}
</script>


---

Quindi avremo la parte PHP , in questo caso una semplice lista con dei button per caricare il dettaglio .
Noterete che l'azione eseguita dai pulsanti e' quella di chiamare lo script sopra descritto passandogli come argomento,
ID del dettaglio che vogliamo prelevare nel DB per inserirlo nel nostro elemento.

Codice PHP:

---

<?php
$con=mysqli_connect("localhost","..........","","..................");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM tabella WHERE campo='elemento da cercare'");

$titolo=array();

echo "<ul>";
$i=0;
while($row = mysqli_fetch_array($result)) {
$titolo[$i]=$row['titolo'];
$id_dettaglio[$i]=$row['ID'];

echo "<li class=\"titolo\">".$titolo[$i]."</td><button onclick=\"loadXMLDoc(".$id_dettaglio[$i].")\">Dettagli</button>";

$i = $i +1;

}
echo "</ul>";
mysqli_close($con);
?>

---

In ultimo inseriremo il nostro elemento in cui caricare il dettaglio prelevato dal DB , in questo caso un semplice DIV

Codice HTML:

---

<div id="myDiv"></div>

---

Mentre al secondo file PHP a cui avremo passato ID da ricercare , trovera' le informazioni nel DB e le restituira' in modo formattato

Codice PHP:

---

<?php
$con=mysqli_connect("localhost","...................","",".......................");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$ID = $_GET['ID'];
$query = "SELECT * FROM `tabella` WHERE `ID`=$ID";

$result = mysqli_query($con,$query) or die(mysql_error());

while($row = mysqli_fetch_array($result)) {
$controllo = $row['ID'];
if ($controllo==$ID){
$foto = $row['foto'];
$data = $row['data'];
$testo = $row['testo'];
}
}

echo "<table>";
echo "<tr>";
echo "<td rowspan=\"3\" class=\"foto\"><img src='".$foto."' /></td>";
echo "<td class=\"titolo\">".$row['titolo']."</td>";
echo "</tr>";
echo "<tr>";
echo "<td class=\"data\">".$data."</td>";
echo "</tr>";
echo "<tr>";
echo "<td class=\"breve\">".$testo."</td>";
echo "</tr>";
echo "</table>";

mysqli_close($con);
?>

---

Ecco il DEMO di quanto descritto.

NLSweb