PHP - AJAX and XML

AJAX can be used for interactive communication with an XML file.
AJAX XML Example
The following example will demonstrate how a web page can fetch information from an XML file with AJAX:
Example: The HTML Page looks like as below

CD info will be listed here...

Example Explained - The HTML Page
When a user selects a CD in the dropdown list above, a function called "showCD()" is executed. The function is triggered by the "onchange" event:
<html> <head>
<script type="text/javascript">
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="Brittany Spears">Bob Dylan</option>
<option value="Ricky Martin">Bonnie Tyler</option>
<option value="Micheal Jackson">Dolly Parton</option>
</select> </form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body> </html>

The showCD() function does the following:
  • Check if a CD is selected
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File
The page on the server called by the JavaScript above is a PHP file called "getcd.php".
The PHP script loads an XML document, "cd_catalog.xml", runs a query against the XML file, and returns the result as 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 the CD query is sent from the JavaScript to the PHP page, the following happens:
  1. PHP creates an XML DOM object
  2. Find all <artist> elements that matches the name sent from the JavaScript
  3. Output the album information (send to the "txtHint" placeholder)
PHP - AJAX Live Search
AJAX can be used to create more user-friendly and interactive searches.
AJAX Live Search
The following example will demonstrate a live search, where you get search results while you type.
Live search has many benefits compared to traditional searching:
  • Results are shown as you type
  • Results narrow as you continue typing
  • If results become too narrow, remove characters to see a broader result
The HTML Page looks like as below

Search for a NextStep4IT page in the input field below:



The results in the example above are found in an XML file (links.xml).
Example Explained - The HTML Page
When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event:
<html> <head>
<script type="text/javascript">
function showResult(str)
{ if (str.length==0)   {
  document.getElementById("livesearch")
.innerHTML="";
  document.getElementById("livesearch")
.style.border="0px";
  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("livesearch").inner
HTML=xmlhttp.responseText;
    document.getElementById("livesearch")
.style.border="1px solid #A5ACB2";
    }   }
xmlhttp.open
("GET","livesearch.php?q="+str,true);
xmlhttp.send(); } </script>
</head> <body> <form>
<input type="text" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form> </body> </html>
Source code explanation:
If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.
If the input field is not empty, the showResult() function executes the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the input field)
  • Php ClassRoom
    The PHP File
    The page on the server called by the JavaScript above is a PHP file called "livesearch.php".

    The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:
    <?php
    $xmlDoc=new DOMDocument();
    $xmlDoc->load("links.xml");
    $x=$xmlDoc->getElementsByTagName('link');
    //get the q parameter from URL
    $q=$_GET["q"];
    //lookup all links from the xml file if length of q>0
    if (strlen($q)>0)
    {
    $hint="";
    for($i=0; $i<($x->length); $i++)
      {
      $y=$x->item($i)->getElementsByTagName('title');
      $z=$x->item($i)->getElementsByTagName('url');
      if ($y->item(0)->nodeType==1)
        {
        //find a link matching the search text
        if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
          {       if ($hint=="")         {
            $hint="<a href='" .
            $z->item(0)->childNodes->item(0)->nodeValue .
            "' target='_blank'>" .
            $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }       else        {
            $hint=$hint . "<br /><a href='" .
            $z->item(0)->childNodes->item(0)->nodeValue .
            "' target='_blank'>" .
            $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }       }     }   } }
    // Set output to "no suggestion" if no hint were found
    // or to the correct values
    if ($hint=="")
      {   $response="no suggestion";   } else  {
      $response=$hint;  }
    //output the response
    echo $response;
    ?> 

    If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:
    • Load an XML file into a new XML DOM object
    • Loop through all <title> elements to find matches from the text sent from the JavaScript
    • Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable
    • If no matches are found, the $response variable is set to "no suggestion

     


Comments

Post a Comment

Popular posts from this blog

How Understanding Cloud Computing Saved a Million Dollars!

Image
  Ever wondered how a deeper understanding of Cloud Computing could not just be a technological advantage but a game-changer for your finances? As we dive into the transformative realm of the Cloud, we’ll explore its multifaceted benefits and how I aided a client in saving a whopping million dollars within a year, all thanks to the power of serverless computing. Whether you’re a tech enthusiast, an entrepreneur, or someone simply curious about Cloud Computing, this article promises a trove of insights for you. 1. My Revelation from the Module: While going through the recent module on Cloud Computing, I was astounded by the depth and the potential of the cloud. It’s not merely about storing data; it’s a paradigm shift in how we perceive and utilize technology. 2. The Cloud Computing Conundrum: So, what exactly is  Cloud Computing ? Imagine not having to own a physical storage device but still being able to access all your data from anywhere, anytime. That’s the magic of the cloud! It’s
Read more

Some mistakes to avoid while looking for a job

Communicate well, don't fabricate information on resume during an interview.  Whether you are a fresher or a seasoned professional, there's always room for improvement, especially during an interview. Because of the mistakes one commits during his/her interview, employers often don't turn up with a positive response or a job offer. TimesJobs.com approaches some of the industry experts to find out those mistakes that any job seeker can avoid.  Poorly written resume  In order to stand out among the thousands of resumes that recruiters receive every day, a candidate's resume must represent the best that he/she has to offer and why they are right for the job. However, most job seekers spend tremendous energy, time, and effort to create an impactful resume, but send out multiple copies of the same to various recruiters instead of customising it for each position. For every job application, one should send a customised resume highlighting key strengths and capa
Read more