How to use external Java Script file for AJAX

My ajax is working with inner java script. I want to make it as external JS file. which is not working as follows.

html

<html>
<head>
    <title>TODO supply a title</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>      
</head> 
<body>
    <div>
        <input name="submit1" id="submit1" type="button" value="Load">
    </div>
    <div id="receive">           
    </div>
</body>    

JS file

$(document).ready(function(){
$('#submit1').click(function(){
    $.ajax({
        url: "data1.php",
        dataType: "JSON",
        type: "POST",
        success: function(retdata){
            $("#receive").html(retdata.name);
        }
    });
}); });

PHP file data1.php returns echo(json_encode($student_data));//works fine with inner JS