AJAX不会运行ajaxStart或加载脚本

So my code looks like this http://jsfiddle.net/qBZMh/4/

Now, on this it won't add the class "active" because it can't find the requested file, for me it finds the file but it won't run the file. My PHP-file look like this:

<?php
$time = time();
mysql_query("INSERT INTO friends
(userid, userid2, `type`, `date`) VALUES
('1', '2', '1', '$time' )") or die(mysql_error());
?>

jQuery:

$(document).ready(function () {
    $("#addfriend").click(function () {
        $.ajax({
            url: "snippets/profile_addfriend.php",
            context: document.body
        }).done(function () {
            $("#addfriend").addClass("active");
        });
    });
});

$(document).ready(function () {
    $("body").on({
        ajaxStart: function () {
            $(this).addClass("loading");
        },
        ajaxStop: function () {
            //$(this).removeClass("loading");
        }
    });
});

There should be variables instead of numbers but just to see if it actually runs I have removed that.

So, the problems are:

1. It finds the PHP-file but it won't run the script.

2. It doesn't show a loading bar, I might have understood this wrong but I want it so my button gets replaced by the loading bar and then appears again when the script have been executed.

You have no fallback for a 404. If it cannot find it, it will prompt a 404 not found error. you could add

   error: function(XMLHttpRequest, textStatus, errorThrown){
    alert('status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
},

to add a catch for a 404.

As of jQuery 1.8, the .ajaxStart() method should only be attached to document.

http://api.jquery.com/ajaxStart/

 $(document).on({ //no need to be inside document ready handler!
        ajaxStart: function () { alert('yy');
            $('body').addClass("loading");
        },
        ajaxStop: function () {
            $('body').removeClass("loading");
        }
    });