PHP instances AJAX and XML

May 11, 2021 PHP

PHP Instances - AJAX and XML

In PHP, AJAX can be used to communicate interactively with XML files, please refer to this article for specific communication processes!

AJAX XML instance

The following example shows how a Web page can read information from an XML file through AJAX:

CD info will be listed here...

Instance Interpretation - HTML page

When the user selects a CD in the drop-down list above, a function named "showCD()" is executed. The function is triggered by the "onchange" event:

<html>
 <head>
 <script>
 function showCD(str)
 {
 if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","getcd.php?q="+str,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>

 <form>
 Select a CD:
 <select name="cds" onchange="showCD(this.value)">
 <option value="">Select a CD:</option>
 <option value="Bob Dylan">Bob Dylan</option>
 <option value="Bonnie Tyler">Bonnie Tyler</option>
 <option value="Dolly Parton">Dolly Parton</option>
 </select>
 </form>
<div id="txtHint"><b>CD info will be listed here...</b></div>

 </body>
 </html>

The showCD() function performs the following steps:

Check to see if a CD is selected
Create an XMLHttpRequest object
Create a function that executes when the server response is ready
Send a request to a file on the server
Note the parameters (q) added to the end of the URL (containing the contents of the pull-down list)

PHP file

The server page called by JavaScript above is a PHP file .php "getcd".

The PHP script loads the XML document, "cd_catalog.xml," runs a query for the XML file, and returns the result 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("<b>" . $cd->item($i)->nodeName . ":</b> ");
 echo($cd->item($i)->childNodes->item(0)->nodeValue);
 echo("<br>");
 }
 }
 ?>

When a CD query is sent from JavaScript to a PHP page, it occurs:

PHP creates XML DOM objects
Find names in all the elements that match the data passed by JavaScript
Output the information for the album and send back the "txtHint" placeholder

PHP instances AJAX and XML

Table of contents