jQuery: Handling Ajax events

Starting... Sending... Successful... Complete... Got this in response:
The jQuery Code START
    
    <script type="text/javascript" src="./jquery-1.5.1.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    <script type="text/javascript">
      $(document).ready(function() {
        $("#starting").hide();
        $("#sending").hide();
        $("#success").hide();
        $("#somplete").hide();
        $("#starting").bind("ajaxStart", function() {
           $(this).show();
        });
        $("#sending").bind("ajaxSend", function() {
           $(this).show();
        });
        $("#success").bind("ajaxSuccess", function() {
          $(this).show();
        });
        $("#complete").bind("ajaxComplete", function(){
          $(this).show();
        });
        
       $.ajax({
                type: "GET",
                url: "getter.php",
                data: {data: 1},
                success: callback,
                error: err
       });
     });
     function callback(data, status) {
        $("#results").text(data);
     }
     function err(xhr, reason, ex) {
        $("div").text(reason);
     }
    </script>
    
    <style type="text/CSS">
        <!--
        .code { color: red; }
        .back { background-color: yellow; }
        -->
   </style>
  </head>

  <body>
    <h1>jQuery: Handling Ajax events</h1>
    <fiv id="starting">Starting...</div>
    <fiv id="sending">Sending...</div>
    <fiv id="success">Successful...</div>
    <fiv id="complete">Complete...</div>
    Got this in response: <div id="results"></div>