I'm trying to make an AJAX request to my localhost server. Here is the code for the page that is requested, ajaxresponsecontent.php. The content is queried from a MySQL database then encoded into JSON using PHP.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../javascript/prototype.js"></script>
<?php  

    @ $db = mysqli_connect('localhost', 'root', '', 'mealchamp');

	$query = "SELECT * FROM globalfood WHERE foodid = 1";
	$result = mysqli_query($db, $query);
	$row = mysqli_fetch_assoc($result);

	$reqVar = json_encode($row);
	$reqVar = "'" . $reqVar . "'";
	echo $reqVar;

?>
</head>
<body>
</body>
</html>
The output of the content page when run in a browser is serialized JSON:

'{"foodid":"1","food":"Mozzarella cheese","brand":"Black Diamond","ftype":"Dairy & Alternatives","servamt":"1\/4 inch cube","ss":"30.0","cal":"110.0","fat":"8.0","sat":"5.0","trans":"0.2","chol":"25.0","sod":"230.0","carb":"1.0","fib":"0.0","sug":"0.0","pro":"8.0"}'

The second page, ajaxresponsecaller.php, makes an ajax request for this previous page using the Prototype framework. the code for the requesting page is:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../javascript/prototype.js"></script>
<script type="text/javascript"><!--

new Ajax.Request('ajaxrequestcontent.php',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
			document.write(response);
			var try1 = response.evalJSON();
			document.write(try1.food);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

--></script>
</head>
<body>
</body>
</html>
The PROBLEM is that the document.write(response) works fine in that it outputs the JSON string just how its supposed to be, same output as i showed above for the previous page. but when i try to use Prototypes' evalJSON to convert it to an object, something is going wrong. document.write(try1.food); gives no output.

What am i doing wrong exactly? could u provide an example? been working at this for hours can't figure out the problem.

Thanks so much, G