Convert php grid script to ajax.

[HCProfessionals]

Just wondering how i would convert this php script to ajax so users wouldn't have to reload the page. Am willing to pay if needed.

 

//Fetch the largest x coordinate in the map table.
$map_size_x_result = $db->query( "SELECT MAX(x) AS map_max_x FROM map" );
$map_size_x = $db->fetch( $map_size_x_result );

//Fetch the largest y coordinate in the map table.
$map_size_y_result = $db->query( "SELECT MAX(y) AS map_max_y FROM map" );
$map_size_y = $db->fetch( $map_size_y_result );

//Set map size. Determined by largest x and y coordinates.
$grid_x = (int)$map_size_x['map_max_x'];
$grid_y = (int)$map_size_y['map_max_y'];

//x and y rows to display at a time.
$display_rows = (int)10;

//Fetch user map location from database.
$user_location_result = $db->query( "SELECT * FROM map LEFT JOIN users ON map.uID=users.uID WHERE map.uID=".$user['uID']."" );
$user_location = $db->fetch( $user_location_result );

//default display coordinate if none specified - will be user map location.
$x = (int)$user_location['x'];
$y = (int)$user_location['y'];

$param_x = $_REQUEST["xcord"];
$param_y = $_REQUEST["ycord"];

if (isset($param_x) && isset($param_y)) {
    //validate that the parameter is a legit point.
    if (($param_x <= $grid_x) && ($param_x >= 1) && ($param_y <= $grid_y) &&($param_y >= 1)) {
        $x = (int)$param_x;
        $y = (int)$param_y;
    }
}

//set map location to the center of the map.
$display_half = round($display_rows / 2);
$other_half = $display_rows - $display_half;

//display the target in the middle.
$start_x = ($x - $display_half) +1;
$end_x = $x + $other_half;

//if the $start_x variable is less than 1 the grid would be in the negatives. so set it to 1.
if ($start_x < 1) {
    $start_x = 1;
    $end_x = $display_rows;
} else
//if $end_x is off the grid we have to compensate and add the remaining rows to the start.
if ($end_x > $grid_x) {
    $extra = $end_x - $grid_x;
    $end_x = $grid_x;
    $start_x = $start_x - $extra;
}

//same applies for the y axis.
$start_y = ($y - $display_half) +1;
$end_y = $y + $other_half;

//if the $start_y variable is less than 1 the grid would be in the negatives. so set it to 1.
if ($start_y < 1) {
    $start_y = 1;
    $end_y = $display_rows;
} else
//if $end_y is off the grid we have to compensate and add the remaining rows to the start.
if ($end_y > $grid_y) {
    $extra = $end_y - $grid_y;
    $end_y = $grid_y;
    $start_y = $start_y - $extra;
}
?>

<b><tl>World Map</tl></b><br />
<img alt="" src="images/seperator.gif" /><br />
Click anywhere on the map to begin moving around. You can click on players name's to view their profile.<br /><br />
Move to Map Location or <a href="map.php"><u>Return to base</u></a>. <?php echo "Current Map Coordinates: X $x - Y $y"; ?><br />
<!-- Search custom coordinates -->
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="GET">
<input name="xcord" type="text" size="3" maxlength="2" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''" value="x"> <input name="ycord" type="text" size="3" maxlength="2" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''" value="y"> <input type="submit" value="Submit">
</form>
<br /><br />

<!-- Show map -->
<table width="750" cellspacing="0" cellpadding="1" border="0">
<?php
//these 2 for loops represent the y and x axis
//using the data collected above the loops will properly display the grid.
for ($Ty = $start_y; $Ty <= $end_y; $Ty++) {
    //start new row
    echo '<tr>';
    for ($Tx = $start_x; $Tx <= $end_x; $Tx++) {
	//show grid
        DisplayGrid($Tx,$Ty);
    }
    echo '</tr>';
}
?>
</table>

<?php
//Function to display the map.
function DisplayGrid($grid_x,$grid_y) {
global $x, $y, $user_location, $users_map;
    
    	$bgimg = 'grass.gif';
	$building = '';

	//Display current user location on the displayable grid if exists.
        if ($grid_x == $user_location['x'] &&  $grid_y == $user_location['y']) {
     		$building = '<img src="images/map/building.gif" alt="" border="0" /><br />';
     		$user_map_name = '<br /><a href="player_profile.php?id='.$user_location['uID'].'" target="_blank"><u><b>'.$user_location['uLogin'].'</b></u></a><br />';
	}

	$user_map_result = mysql_query("SELECT * FROM map LEFT JOIN users ON map.uID=users.uID WHERE map.x=$grid_x AND map.y=$grid_y");
	//Fetch all player locations within the displayable grid.
	while($users_map = mysql_fetch_array($user_map_result)){
		$building = '<img src="images/map/building.gif" alt="" border="0" /><br />';
		$user_map_name = '<br /><a href="player_profile.php?id='.$users_map['uID'].'" target="_blank"><u><b>'.$users_map['uLogin'].'</b></u></a><br />';
	}
    
    echo "<td width=\"75\" height=\"75\" style=\"background-image: url('images/map/$bgimg');background-repeat: repeat;\" align=center valign=center onclick=\"window.location.href='map.php?xcord=$grid_x&ycord=$grid_y'\">$building $user_map_name</td>";
}