javascript – Which of these approaches is better to load and render data in a browser based, turn based game?

I am developing a browser-based, turn-based board game. When a player accesses the page, the game current status is loaded from the database and the board is rendered accordingly. I am not sure which of the following approaches is better. For simplicity, let’s suppose that the only parameter that has to be loaded and rendered is a number that can be either 0 or 1.

Approach #1:

<?php
    $param = load_game_data(); // in the real case, this will be an associative array with many parameters
?>
<html>
<head></head>
<body>
<div id="board">
<!-- html elements related to the board -->
</div>
<script>
// as an example, the loaded data determines the bg color
document.getElementByID("board").style.backgroundColor = 
<?php if($param == 0) echo('"red"'); else echo('"green"'); ?>
;

</script>
</body>

Approach #2:

<html>
<head></head>
<body>
<div id="board">
<!-- html elements related to the board -->
</div>
<script>
$.ajax({
   url: "load_game_data.php",
}).done(function(param){
   if(param == 0)
        document.getElementByID("board").style.backgroundColor = "red";
   else
        document.getElementByID("board").style.backgroundColor = "green";
});
</script>
</body>

What are the pros and cons of the two approaches? What is the standard way to proceed? Note that the user can interact with the board elements (e.g. check information about some of them or change their status) but permanent changes are saved to the DB only when the turn ends.