简单的ajax不成功

I know this is probably a basic error that I have made so my apologies in advance but I did check and cannot find an answer that deals with a really basic ajax load issue like this.

I have attached all three files which I am using to test the basic functionality before making it more functional and adding it to a project I am working on. Any help would be appreciated as I cannot see why my paragraph is not updating to the message in page.html?

ajax.js contains:

$(document).ready(function(){
    $("#button").click(function(){
        $.ajax({
            url: "page.html", 
            success: function(result){
                $("#content").html(result);
            }
        });
    });
});

page.html contains:

<p>Show this</p>

ajaxTest.html contains:

<!doctype html>

<html>
    <body>
    <input type="button" value="Test Button" id="button" />

    <p id="content"></p>


    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="./ajax.js"></script>
    </body>
</html>

Use browser debugging tool for debugging ajax request. If you are using chrome simply press F12 and click on network tab.

enter image description here

And if you are using Firefox use can simply install firebug