javascriptphpajax

1st Time to AJAX, Don't understand some line of codes


I am new to programming and its my first time to learn AJAX with PHP. I got a working sample code from internet and studying it but there are some codes that I don't understand and I am really frustrated.

In the index.php, I am so confused about the code xmlhttp.open("GET","gethint.php?q="+str,true);. I dont know what the q stands for. As far as I understand, q should stand for an html element with a name q. For example I have <input type="text" name="q" /> then I know that I have a textbox name q. But in this example I can't find any element that has a name q. Pls help...

index.php

<html>
 <head>
  <script type="text/javascript">
   function showHint(str)
   {
    if (str.length==0)
     { 
      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","gethint.php?q="+str,true);
   xmlhttp.send();
  }
 </script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form> 
 First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>


gethint.php

<?php
 // Fill up array with names
 $a[]="Anna";
 $a[]="Brittany";
 $a[]="Cinderella";
 $a[]="Diana";
 $a[]="Eva";
 $a[]="Fiona";
 $a[]="Gunda";
 $a[]="Hege";
 $a[]="Inga";
 $a[]="Johanna";
 $a[]="Kitty";
 $a[]="Linda";
 $a[]="Nina";
 $a[]="Ophelia";
 $a[]="Petunia";
 $a[]="Amanda";
 $a[]="Raquel";
 $a[]="Cindy";
 $a[]="Doris";
 $a[]="Eve";
 $a[]="Evita";
 $a[]="Sunniva";
 $a[]="Tove";
 $a[]="Unni";
 $a[]="Violet";
 $a[]="Liza";
 $a[]="Elizabeth";
 $a[]="Ellen";
 $a[]="Wenche";
 $a[]="Vicky";

 //get the q parameter from URL
 $q=$_GET["q"];

 //lookup all hints from array if length of q>0
 if (strlen($q) > 0)
 {
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
   if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
  {
    if ($hint=="")
    {
     $hint=$a[$i];
    }
    else
    {
     $hint=$hint." , ".$a[$i];
    }
   }
  }
 }

// 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;
?>

Solution

  • In your example, q is a parameter that is passed to gethint.php with the value contained in the variable str.

    The variable gets its value from the "First name" input element, whenever a key is pressed and released (the onkeyup event).

    The value of q is then accessed in the PHP file by the line $q=$_GET["q"];.

    You can name the parameters passed to the PHP page however you like, they don't need to correspond to HTML elements.