Using AJAX to send Javascript string to PHP file, then return array from file

Question

I have a popup form, used to select items in a table. In order, the table data for each row is: (Checkbox for selection), schema name, and the table name.

Here is the query used to get the data listing:

select table_schema, table_name
from information_schema.tables
order by table_schema, table_name

How I am creating the table listing:

<?php
   $db = new mssql($_SESSION['serv'],$_POST['database'],$_SESSION['usr_n'],$_SESSION['pa    ss']);

   $db->query("
      select table_name, table_schema
      from information_schema.tables
      order by table_schema, table_name
   ");

   $tables = $db->getArray();

   foreach($tables as $table)
   {
      print "<tr>";
      print "<td><input type='checkbox' name='$table[TABLE_NAME]' class='checkbox' /></td>"; //Print Checkbox
      print "<td style='padding: 5px; text-align: center;'>$table[TABLE_SCHEMA]</td>"; //Print Table Schema
      print "<td>$table[TABLE_NAME]</td>"; //Print Table Name
      print "<td><input type='hidden' name='$table[TABLE_NAME]_schema' value='$table[TABLE_SCHEMA]'></td>";
      print "</tr>";
   }
?>

I am trying to add a filter. I want to place a drop down list of all of distinct schemas returned from the query above. I've done this using the following:

<option value="%" selected>All Schemas</option>
<?php
   $db = new mssql($_SESSION['serv'], $_POST['database'], $_SESSION['usr_n'],$_SESSION['pass']);
   $db->query("
      select distinct table_schema
      from information_schema.tables
      order by table_schema
   ");
   $schemas = $db->getArray();
   foreach($schemas as $schema) {
      ?>
         <option value="<?php echo $schema['TABLE_SCHEMA'];?>"><?php echo $schema['TABLE_SCHEMA']?></option>
      <?php
   }
?>

This is working correctly, and when I access the drop down in Javascript, I am getting the correct value when displaying with an alert.

What I need to happen is when the user selects a different schema from the list (onchange) the table will update, displaying only the tables with the specified schema. I've been trying to use my limited knowledge of Javascript and PHP to figure it out, but after searching several questions somewhat related, I've come to the understanding that I need to use AJAX. I know little about it, and am not finding tutorials online very helpful.

So what I am currently stuck on is sending the value of the drop down to a PHP file, get an array back, and return it to Javascript. Then I'll remove all the rows from the display table, and add in the new values from the array I passed in.

Here is what I've got so far:

function updateList() {
   var sch = document.getElementById("schList");
   var xmlhttp;
   if(window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
   } else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function() {
      if(xmlhttp.readyState==4 && xmlhttp.status==200) {
         var table = xmlhttp.response
      }
   }
}

From here I have no clue. I've read about something called JSON, and that you can return objects and arrays. How would I send the schema name over to the file, and how would I return the array back from the file?

Thanks for the help!

Answer 1

If your not that knowledgeable in the subject don't attempt to do this via ajax. Simply reload the page with a url var that tells the page what to load ie. table.php?id=users

Once this all working properly without ajax you can add that feature in if it is necessary.

If you wondering about the js for the reload see : http://webdesign.about.com/od/examples/l/blfaqddredirect.htm