Παράδειγμα AJAX XML με PHP

Το AJAX μπορεί να επικοινωνεί με αρχεία XML με αλληλεπιδραστικό τρόπο.

Παράδειγμα AJAX XML

Στο παρακάτω παράδειγμα AJAX, θα δείξουμε πώς μια ιστοσελίδα χρησιμοποιεί την τεχνολογία AJAX για να διαβάζει πληροφορίες από αρχείο XML.

Επιλέξτε ένα CD από την παρακάτω λίστα

Εδώ καταγράφονται οι πληροφορίες του CD.

Αυτό το παράδειγμα περιλαμβάνει τρεις σελίδες:

  • Μια απλή φόρμα HTML
  • Ένας αρχείο XML
  • Ένας αρχείο JavaScript
  • Μια σελίδα PHP

Φόρμα HTML

Ο παραδειγμα περιλαμβάνει μια απλή φόρμα HTML και σύνδεση στο JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Επιλέξτε ένα 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>Θα καταγραφούν εδώ τα στοιχεία CD.</b></div>
</p>
</body>
</html>

\x45 \x78 \x61 \x6D \x70 \x6C \x65 \x20 \x69 \x6E \x73 \x74 \x72 \x75 \x63 \x74 \x69 \x6F \x6E

όπως βλέπετε, είναι απλώς μια απλή φόρμα HTML με μια καταλόγου με το όνομα "cds".

Ο παρενθέτης κάτω από τη φόρμα περιέχει ένα div με το όνομα "txtHint" που χρησιμοποιείται ως προεπιλεγμένο σημείο για δεδομένα που λαμβάνονται από τον διακομιστή web.

Όταν ο χρήστης επιλέγει δεδομένα, εκτελείται η συνάρτηση με το όνομα "showCD" που προκαλείται από το συμβάν "onchange".

Με άλλα λόγια, κάθε φορά που ο χρήστης αλλάζει τη τιμή της καταλόγου, καλείται η συνάρτηση showCD.

Το αρχείο XML

Το αρχείο XML είναι "\x63 \x64 \x5F \x63 \x61 \x74 \x61 \x6C \x6F \x67 \x2E \x78 \x6D \x6C" Περιέχει δεδομένα σχετικά με τη συλλογή CD.

JavaScript

Αυτό είναι το JavaScript κώδικας που αποθηκεύεται στο αρχείο "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 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");
  }
 }
\x72 \x65 \x74 \x75 \x72 \x6E \x20 \x78 \x6D \x6C \x48 \x54 \x54 \x50
}

\x45 \x78 \x61 \x6D \x70 \x6C \x65 \x20 \x69 \x6E \x73 \x74 \x72 \x75 \x63 \x74 \x69 \x6F \x6E

\x73 \x74 \x61 \x74 \x65 \x43 \x68 \x61 \x6E \x67 \x65 \x64 \x28\x29 \x20 \x61 \x6E \x64 \x20 \x47 \x65 \x74 \x58 \x4D \x48 \x54 \x54 \x50 \x4F \x62 \x6A \x65 \x63 \x74 \x28\x29 \x20 \x66 \x75 \x6E \x63 \x74 \x69 \x6F \x6E \x73 \x20 \x61 \x72 \x65 \x20 \x73 \x61 \x6D \x65 \x20 \x61 \x73 \x20 \x74 \x68 \x65 \x73 \x20 \x69 \x6E \x20 \x74 \x68 \x65 \x20 \x70 \x72 \x65 \x76 \x69 \x6F \x75 \x73 \x20 \x73 \x65 \x63 \x74 \x69 \x6F \x6E \x2C \x20 \x79 \x6F \x75 \x20 \x63 \x61 \x6E \x20 \x72 \x65 \x66 \x65 \x72 \x20 \x74 \x6F \x20 \x74 \x68 \x65 \x20 \x72 \x65 \x73 \x70 \x6F \x6E \x73 \x65 \x20 \x70 \x61 \x67 \x65

\x73 \x68 \x6F \x77 \x43 \x44 \x28\x29 \x20 \x66 \x75 \x6E \x63 \x74 \x69 \x6F \x6E

\x49 \x66 \x20 \x61 \x20 \x69 \x74 \x65 \x6D \x20 \x69 \x73 \x20 \x73 \x65 \x6C \x65 \x63 \x74 \x65 \x64 \x20 \x69 \x6E \x20 \x74 \x68 \x65 \x20 \x64 \x72 \x6F \x70 \x64 \x6F \x77 \x6E \x20 \x6C \x69 \x73 \x74

  1. \x43 \x61 \x6C \x6C \x20 \x47 \x65 \x74 \x58 \x4D \x48 \x54 \x54 \x50 \x4F \x62 \x6A \x65 \x63 \x74 \x20 \x66 \x75 \x6E \x63 \x74 \x69 \x6F \x6E \x20 \x74 \x6F \x20 \x63 \x72 \x65 \x61 \x74 \x65 \x20 \x58 \x4D \x48 \x54 \x54 \x50 \x20 \x6F \x62 \x6A \x65 \x63 \x74
  2. \x44 \x65 \x66 \x69 \x6E \x65 \x20 \x74 \x68 \x65 \x20 \x55 \x52 \x4C \x20 \x74 \x6F \x20 \x73 \x65 \x6E \x64 \x20 \x74 \x6F \x20 \x74 \x68 \x65 \x20 \x73 \x65 \x72 \x76 \x65 \x72 \x28 \x66 \x69 \x6C \x65 \x20 \x6E \x61 \x6D \x65 \x29
  3. \x41 \x64 \x64 \x20 \x61 \x20 \x70 \x61 \x72 \x61 \x6D \x65 \x74 \x65 \x72 \x20 \x77 \x69 \x74 \x68 \x20 \x64 \x72 \x6F \x70 \x64 \x6F \x77 \x6E \x20 \x6C \x69 \x73 \x74 \x20 \x63 \x6F \x6E \x74 \x65 \x6E \x74 \x20 \x28 \x71 \x29
  4. \x41 \x64 \x64 \x20 \x61 \x20 \x72 \x61 \x6E \x64 \x6F \x6D \x20 \x6E \x75 \x6D \x62 \x65 \x72 \x2C \x20 \x74 \x6F \x20 \x61 \x76 \x6F \x69 \x64 \x20 \x74 \x68 \x65 \x20 \x73 \x65 \x72 \x76 \x65 \x72 \x20 \x75 \x73 \x69 \x6E \x67 \x20 \x63 \x61 \x63 \x68 \x65 \x64 \x20 \x66 \x69 \x6C \x65
  5. \x57 \x68 \x65 \x6E \x20 \x74 \x68 \x65 \x20 \x65 \x76 \x65 \x6E \x74 \x20 \x69 \x73 \x20 \x74 \x72 \x69 \x67 \x67 \x65 \x72 \x65 \x64 \x2C \x20 \x63 \x61 \x6C \x6C \x20 \x73 \x74 \x61 \x74 \x65 \x43 \x68 \x61 \x6E \x67 \x65 \x64
  6. \x46 \x6F \x72 \x77 \x61 \x72 \x64 \x20 \x74 \x6F \x20 \x74 \x68 \x65 \x20 \x55 \x52 \x4C \x20 \x77 \x69 \x74 \x68 \x20 \x58 \x4D \x4C \x48 \x54 \x54 \x50 \x20 \x6F \x62 \x6A \x65 \x63 \x74
  7. \x46 \x6F \x72 \x77 \x61 \x72 \x64 \x20 \x74 \x6F \x20 \x74 \x68 \x65 \x20 \x73 \x65 \x72 \x76 \x65 \x72 \x20 \x77 \x69 \x74 \x68 \x20 \x48 \x54 \x54 \x50 \x20 \x72 \x65 \x71 \x75 \x65 \x73 \x74

\x50 \x48 \x50 \x20 \x70 \x61 \x67 \x65

\x54 \x68 \x69 \x73 \x20 \x73 \x65 \x72 \x76 \x65 \x72 \x20 \x70 \x61 \x67 \x65 \x20 \x69 \x73 \x20 \x61 \x20 \x73 \x69 \x6D \x70 \x6C \x65 \x20 \x50 \x48 \x50 \x20 \x66 \x69 \x6C \x65 \x20 \x6E \x61 \x6D \x65 \x64 \x20 \x22 \x67 \x65 \x74 \x63 \x64 \x2E \x70 \x68 \x70 \x22 \x2E

\x54 \x68 \x69 \x73 \x20 \x70 \x61 \x67 \x65 \x20 \x69 \x73 \x20 \x77 \x65 \x62 \x20 \x62 \x65 \x69 \x6E \x67 \x20 \x77 \x72 \x69 \x74 \x74 \x65 \x6E \x20 \x69 \x6E \x20 \x50 \x48 \x50 \x2C \x75 \x73 \x69 \x6E \x67 \x20 \x58 \x4D \x4C \x20 \x44 \x4F \x4D \x3B\x63 \x64 \x5F \x63 \x61 \x74 \x61 \x6C \x6F \x67 \x2E \x78 \x6D \x6C\x2E

\x43 \x6F \x64 \x65 \x20 \x72 \x75 \x6E \x6E \x69 \x6E \x67 \x20 \x61 \x67 \x61 \x69 \x6E \x73 \x74 \x20 \x58 \x4D \x4C \x20 \x66 \x69 \x6C \x65 \x73 \x2C \x61 \x6E \x64 \x20 \x72 \x65 \x74 \x75 \x72 \x6E \x73 \x20 \x72 \x65 \x73 \x75 \x6C \x74 \x73 \x20 \x69 \x6E \x20 \x48 \x54 \x4D \x4C \x3B

\x3C \x3F \x70 \x68 \x70 \x3F
\x71 = \x5F \x47 \x45 \x54 \x5F \x47 \x45 \x54 \x43 \x48 \x41 \x52 \x5F \x56 \x41 \x4C \x55 \x45 \x28\x22 \x71 \x22\x29;
\x78 \x6D \x6C \x44 \x6F \x63 \x75 \x6D \x65 \x6E \x74 \x3D \x6E \x65 \x77 \x20 \x44 \x4F \x4D \x44 \x6F \x63 \x75 \x6D \x65 \x6E \x74 \x28\x29;
\x78 \x6D \x6C \x44 \x6F \x63 \x75 \x6D \x65 \x6E \x74 \x3A \x6C \x6F \x61 \x64 \x28\x22 \x63 \x64 \x5F \x63 \x61 \x74 \x61 \x6C \x6F \x67 \x2E \x78 \x6D \x6C\x22\x29;
$x = \x3B \x78 \x6D \x6C \x44 \x6F \x63 \x75 \x6D \x65 \x6E \x74 \x3A \x67 \x65 \x74 \x54 \x61 \x67 \x4E \x61 \x6D \x65 \x73 \x28\x27 \x41 \x52 \x54 \x49 \x53 \x54 \x27\x29;
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 />");
  } 
}
?>

Example Explanation

When a request is made from JavaScript to a PHP page, the following occurs:

  1. PHP creates an XML DOM object for the "cd_catalog.xml" file
  2. Loop through all "artist" elements (nodetypes = 1) and find the name that matches the data sent from JavaScript
  3. Find the CD that contains the correct artist
  4. Output the information of the album and send it to the "txtHint" placeholder