jQuery Ajax Page Loading Fails

Question

I want when I click a link with attribute "linkdata" = "page" to change the body's code to a loading image and after it's done to change the whole document's HTML to the result. Here is the current code I have:

$('a[linkdata="page"]').each(function() {
  $(this).click(function () {
    var attribute = $(this).attr("href");
    $("body").html('<center><img src="/ajax-loader.gif" /></center>');
    $.ajax({ type: "GET", url: attribute }).done(function (data) { 
      $(document).html(data); 
    });
    return false;
  });
});

The result: It changes the body's HTML code to the image and always fails with the request (which is http://somelink.com/home - using CodeIgniter, tried with .fail(function() { window.location="/error/404" }); )

Answer 1

$('a[linkdata="page"]').click(function(e){
  e.preventDefault();
  $("body").html('<center><img src="/ajax-loader.gif" /></center>');
  $.ajax({url:$(this).attr("href") })
   .success(function(data){$(document.body).html(data);})
   .error(function(x,s,e){alert('Warning! '+s+': '+e)});
});

Answer 2

$('a[linkdata="page"]').on('click',function(k,v){
   var attribute = $(this).attr("href");
   $("body").html('<center><img src="/ajax-loader.gif" /></center>');
    $(document).load({ type: "GET", url: attribute });
  })