Esempio di responseXML AJAX PHP

AJAX può essere utilizzato per restituire informazioni dal database in formato XML.

Esempio di Database AJAX a XML (indicazioni di test: la funzione di questo esempio non è implementata)

Nel seguente esempio AJAX, mostreremo come una pagina web può leggere informazioni da un database MySQL, trasformare i dati in un documento XML e utilizzare questo documento in diversi luoghi per mostrare le informazioni.

Questo esempio è molto simile a quello del paragrafo precedente "PHP AJAX Database", ma c'è una grande differenza: in questo esempio, otteniamo dati in formato XML utilizzando la funzione responseXML dalla pagina PHP.

Ricevere un documento XML come risposta ci permette di aggiornare più posizioni della pagina, non solo mostrare un output PHP.

In questo esempio, utilizzeremo le informazioni ricevute dal database per aggiornare più elementi <span> nella pagina.

Seleziona un nome dall'elenco a discesa

Scegli un utente:

　

Questa colonna è composta da quattro elementi:

  • Database MySQL
  • Semplice modulo HTML
  • JavaScript
  • Pagina PHP

Database

Il database utilizzato in questo esempio sembra essere il seguente:

id Nome Cognome Età Cittadina d'origine Lavoro
1 Peter Griffin 41 Quahog Birreria
2 Lois Griffin 40 Newport Insegnante di Pianoforte
3 Joseph Swanson 39 Quahog Ufficiale di Polizia
4 Glenn Quagmire 41 Quahog Pilot

Modulo HTML

Esempio sopra riportato include un semplice modulo HTML e un link verso JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Seleziona un Utente:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

Esempio di spiegazione - Modulo HTML

  • Il modulo HTML è una lista a discesa, con il valore dell'attributo name è "users" e le opzioni corrispondono al campo id del database
  • Sotto il modulo ci sono alcuni elementi <span>, che servono da segnaposto per i diversi valori ricevuti
  • Quando l'utente seleziona un'opzione specifica, viene eseguita la funzione "showUser()". L'esecuzione della funzione è innescata dall'evento "onchange"

In altre parole, ogni volta che l'utente cambia il valore nella lista a discesa, la funzione showUser() viene eseguita e i risultati vengono visualizzati nell'elemento <span> specificato.

JavaScript

Questo è il codice JavaScript memorizzato nel file "responsexml.js":

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Il browser non supporta le richieste HTTP")
  return
  } 
 var url="responsexml.php"
 url=url+"?q="+str
 url=url+"&sid="+Math.random()
 xmlHttp.onreadystatechange=stateChanged 
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Età: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>Da: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Esempio di spiegazione:

La funzione showUser() e la funzione GetXmlHttpObject Esempio di database MySQL AJAX PHP Gli esempi in questa sezione sono gli stessi. Puoi consultare le spiegazioni correlate.

La funzione stateChanged()

Se viene selezionato un elemento nella lista a discesa, questa funzione esegue:

  1. Utilizzando la funzione responseXML, definisci la variabile "xmlDoc" come un documento XML
  2. Recupera i dati da questo documento XML e mettili nei "span" elementi corretti

Pagina PHP

Questa pagina server chiamata da JavaScript, è un file PHP semplice chiamato "responsexml.php".

Questa pagina è scritta in PHP e utilizza il database MySQL.

Il codice esegue una query SQL mirata al database e restituisce i risultati in un documento XML:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//Una data nel passato
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

Esempio di spiegazione:

Si verifica quando la query viene inviata dal JavaScript alla pagina PHP:

  • Il tipo di contenuto del documento PHP è impostato su "text/xml"
  • Il documento PHP è impostato su "no-cache" per prevenire la cache
  • Imposta la variabile $q con i dati inviati tramite HTML pagina
  • PHP apre la connessione al server MySQL
  • Trova "user" con l'id specificato
  • Output dei dati come documento XML