Q:

JQuery in head section not working

I am trying to update a value on the browser without refreshing the main page itself. However, it is not working. I am using JQuery, PHP and HTML. 
Here is the HTML Page:
<html>
<head>
<title>Testing Live Update</title>

<script type="text/javascript">
<!--
  $(document).ready(function(){    
     loadrandom();
  });

function loadrandom(){
    $("#random_data").load("random.php");
    setTimeout(loadrandom, 2000);
}
//-->
</script>

</head>
<body>
    <div id="random_data"></div>
</body>   
</html>

Here is the random.php:
<?php
echo mt_rand(0,100);
?>

If I execute random.php, it works and echoes back a random number.
So, what is wrong with my code.

A:

add this code above your jquery script under the title tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

