Esempio XML AJAX PHP

AJAX può interagire in modo interattivo con file XML.

Esempio AJAX XML

Nel seguente esempio AJAX, mostreremo come una pagina web utilizza la tecnologia AJAX per leggere informazioni da un file XML.

Scegli un CD dalla seguente elenco sottostante

Ecco elencate le informazioni del CD.

Questo esempio include tre pagine:

  • Un modulo HTML semplice
  • Un file XML
  • Un file JavaScript
  • Una pagina PHP

Modulo HTML

Esempio precedente include un semplice modulo HTML e un link verso JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Seleziona un CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>Le informazioni sui CD verranno elencate qui.</b></div>
</p>
</body>
</html>

Esempio di spiegazione:

Come vedete, è semplicemente un modulo HTML con una lista a discesa chiamata "cds".

Il paragrafo sotto il modulo contiene un div chiamato "txtHint" che viene utilizzato come segnaposto per i dati ricevuti dal server web.

Quando l'utente seleziona i dati, viene eseguita la funzione chiamata "showCD". L'esecuzione della funzione è innescata dall'evento "onchange".

In altre parole, ogni volta che l'utente cambia il valore della lista a discesa, viene chiamata la funzione showCD.

Il file XML

Il file XML è "cd_catalog.xmlIl file contiene dati relativi alla raccolta di CD.

JavaScript

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

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Il browser non supporta le richieste HTTP")
 return
 } 
var url="getcd.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")
 { 
 document.getElementById("txtHint").innerHTML = xmlHttp.responseText; 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Esempio di spiegazione:

Le funzioni stateChanged() e GetXmlHttpObject sono le stesse di quelle nel capitolo precedente, puoi consultare le spiegazioni della pagina precedente.

Funzione showCD()

Se viene selezionato un elemento dalla lista a discesa, la funzione esegue:

  1. Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP
  2. Definisci l'URL (nome del file) da inviare al server
  3. Aggiungi al URL un parametro con il contenuto della lista a discesa (q)
  4. Aggiungi un numero casuale per prevenire che il server utilizzi file in cache
  5. Chiamare stateChanged quando si verifica un evento
  6. Apri l'oggetto XMLHTTP tramite l'URL fornito
  7. Invia una richiesta HTTP al server

Pagina PHP

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

Questa pagina è scritta in PHP, utilizzando XML DOM per caricare il documento XML "cd_catalog.xml"。

L'esecuzione del codice è diretta alla query del file XML e restituisce i risultati in HTML:

<?php
$q = $_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x = $xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Esempio di spiegazione

Si verifica quando la richiesta viene inviata da JavaScript alla pagina PHP:

  1. Oggetto XML DOM PHP per creare il file "cd_catalog.xml"
  2. Cicla tutti gli elementi "artist" (nodetypes = 1) e trova il nome che corrisponde ai dati trasmessi da JavaScript
  3. Trova l'artista corretto nel pacchetto CD
  4. Esempio di output delle informazioni dell'album e invio al segnaposto "txtHint"