Display Multiple Records From SQL Query Using AJAX

This is my first attempt at AJAX, and I'm running into three specific problems. Let's work on one at a time. Here's goes the first one...

So I built a PHP driven web page that accesses a SQL database and retrieves some records. Easy enough. Next I wanted the page to be up to date with the SQL database without the end user initiating an event so I simply set the page to refresh every 3 seconds. It's a simple fix but is obviously not a very sophisticated technique. So I assume Ajax is the answer.

So I made an attempt to utilize Ajax on the page. First thing was to add the following code to the main page. We will call it main.php

main.php snippet

<script language="Javascript" type="text/javascript">

var ajaxRequest;
function queueRefresh(){
  try{
    ajaxRequest = new XMLHttpRequest();
  } catch (e){
    try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e){
        alert("This application requires an Ajax enabled brower.!");
        return false;
      }
    }
  }
  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){/
      document.write(ajaxRequest.responseText);
    }
  }
  ajaxRequest.open("GET", "queueRefresh.php?filter=<?php echo $filter; ?>", true);
  ajaxRequest.send(null);
}

</script>

Next, I made a new page for the code above to reference called queueRefresh.php and moved all my SQL queries to that page. Here's the code for reference. (Password hidden for security.)

queueRefresh.php

  if(isset($_GET['filter']) AND $_GET['filter']<>"all"){
    $filter=$_GET['filter'];
  } else {
    $filter="";
  }

  $con=mysql_connect("localhost","cnsitq","********");
  if (!$con){
    die('Could not connect to database: ' . mysql_error());
  }
  mysql_select_db("cnsitq", $con); 

  if($filter<>""){
    $resultQueue=mysql_query("SELECT * FROM queuetest WHERE client = '$filter' AND (status = '2' OR status = '4')  ORDER BY client, site, status, mspadminready, mspready ASC");
  } else {
    $resultQueue=mysql_query("SELECT * FROM queuetest WHERE status = '2' OR status = '4' ORDER BY client, site, status, mspadminready, mspready ASC");
  }
  $row = mysql_fetch_array($resultQueue);
    echo json_encode($row);
    mysql_close($con);

?>

Now up to this part everything is working flawlessly at retrieving my SQL query results and placing them into a PHP array variable named $row. What I'm having issues with is how to format and then display that data.

Options I've Been Given
A. Some places are telling me to run $row through a PHP while loop and format the results with the desired HTML code (like I was doing before the AJAX attempt), then pass all that code through to the main page and use JS to display that data.
B. Other places are telling me to use json_encode($row) to convert $row to a JS array and then pass it to the main page and use JS to format the data with the desired HTML and display it. This is the first I've heard of JSON. As you can see in the example above, this is the option I've last attempted.

The problem I'm having with option A is that maybe I'm extremely rusty with JS but once the variable is set to the AJAX response I do a little document.write(ajaxRequest.responseText); and ONLY the HTML code retrieved from the PHP page is displayed.

The problem I'm having with option B is converting the JSON array back to "usable" data that I can then format accordingly.

If it helps, here's the formatting code.

<?php
  $i="0";
  $prevClient="";
  while($row = mysql_fetch_array($resultQueue)){
    $client=$row['client'];
    $site=$row['site'];
    if($row['status']=="2"){
      $status="MSP";
    } elseif($row['status']=="4"){
      $status="MSPAdmin";
    }
  $tech=$row['tech'];
  if($row['status']=="2"){
    $hour=substr($row['mspready'],0,-6);
    $minute=substr($row['mspready'],3,2);
    $suffix="AM";
    if($hour>="12"){
      $suffix="PM";
      if($hour>"12"){
        $hour=$hour-12;
      }
    }
    $timestamp=$hour . ":" . $minute . " " . $suffix;
  } elseif($row['status']=="4"){
    $hour=substr($row['mspadminready'],0,-6);
    $minute=substr($row['mspadminready'],3,2);
    $suffix="AM";
    if($hour>="12"){
      $suffix="PM";
      if($hour>"12"){
        $hour=$hour-12;
      }
    }
    $timestamp=$hour . ":" . $minute . " " . $suffix;
  }
  $phone=$row['phone'];
  $locked=$row['locked'];
  if($client<>$prevClient){
    if($prevClient<>""){
      echo "  <tr>
      <td colspan=\"3\"><i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" /></td>
      </tr>";
    }
    echo "  <tr>
    <td colspan=\"3\" class=\"headerClient\">" . $client . "</td>
    </tr>";
  }
  if($i & 1){
    echo "  <tr class=\"bodyText tableZebraDark bold\">";
  } else {
    echo "  <tr class=\"bodyText tableZebraLight bold\">";
  }
  echo " <td width=\"25%\">" . $site . "</td>
  <td align=\"center\" width=\"37%\">" . $status . "</td>
  <td align=\"right\" width=\"38%\">" . $tech . "</td>
  </tr>";
  if($i & 1){
    echo "<tr class=\"bodyText tableZebraDark\">";
  } else {
    echo "  <tr class=\"bodyText tableZebraLight\">";
  }
  echo " <td width=\"25%\">";
  if($authentication=="valid"){
    if($locked==""){
      echo "<i m g title=\"You are authorized to update this site.\" height=\"10\" src=\"images/edit.gif\" width=\"10\" />";
    } else {
      echo "<i m g title=\"Someone is already updating this site.  Try again in a moment.\" height=\"10\" src=\"images/locked.png\" width=\"10\" />";
    }
  } else {
    echo "<i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" />";
  }
  if($notes==""){
    echo "<i m g height=\"10\" src=\"images/spacer.gif\" width=\"10\" />";
  } else {
    echo "<i m g title=\"" . $notes . "\" height=\"10\" src=\"images/notes.jpg\" width=\"10\" />";
  }
  echo"</td>
  <td align=\"center\" width=\"37%\">" . $timestamp . "</td>
  <td align=\"right\" width=\"38%\">" . $phone . "</td>
  </tr>";
  $prevClient=$client;
  $i++;
}
    ?>