title: Kill an ajax process
body: <p><strong>GET_DATA()</strong></p>
  
  <p><code>GET_DATA()</code> contains this:</p>
  
  <pre><code>    var xhr;
      ...
      function get_data( phrase ) {
          xhr = function get_data( phrase ) {
          $.ajax({
              type: 'POST',
              url: 'http://intranet/webservice.asmx/GetData',
              data: '{phrase: "' + phrase + '"}',
              contentType: 'application/json; charset=utf-8',
              dataType: 'json',
              success: function( results ) {
                  $("#div1").empty();
  
                  if( results.d[0] ) {
                      $.each( results.d, function( index, data ) {
                          $("#div1").append( data.Group + ':' + data.Count + '&lt;br /&gt;' );
                      });
                  } else {
                      alert( "results.d does not exist..." );
                  }
              },
              error: function(xhr, status, error) {
                  $('#spanLoading').empty();
  
                   var err = eval("(" + xhr.responseText + ")");
                   alert(err.Message) ;
              }
          });
      }
  
      function get_default() {
          $('#div1').empty().append("default stuff goes here");
      }
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE 2 CODE</strong></p>
  
  <p>I've also tried this, which doesn't work either, no error messages, just returns the results of when the textbox had 2 characters when it finishes processing even if I delete everything before the process has finished:</p>
  
  <pre><code>$('#TextBox1').keyup( function() {
      if(xhr &amp;&amp; xhr.readystate != 4){
          xhr.abort();
      }
  
      if ($("#TextBox1").val().length &gt;= 2) {
          get_data( $("#TextBox1").val() );
      } else {
          get_default();
      }
  });
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE 1 CODE:</strong></p>
  
  <pre><code>$('#TextBox1').keyup( function() {
      if ($("#TextBox1").val().length &gt;= 2) {
          get_data( $("#TextBox1").val() );
      } else {
          if(xhr)
          {
              xhr.abort();
          }
  
          get_default();
      }
  });
  </code></pre>
  
  <hr>
  
  <p><strong>ORIGINAL QUESTION:</strong></p>
  
  <p>I have the following code:</p>
  
  <pre><code>$('#TextBox1').keyup( function() {
      if ($("#TextBox1").val().length &gt;= 2) {
          get_data( $("#TextBox1").val() );
      } else {
          get_default();
      }
  });
  </code></pre>
  
  <p>This has a slight glitch where if I type something really fast and then I delete it equaly fast, I see the data from <code>get_default()</code> flash on the screen, then it gets replaced by a previous ajax request where the value in the textbox was 2 which had not finished processing.</p>
  
  <p>So basically, what I think is happening is that when the textbox has 2 characters in it, the ajax request starts which takes a second or 2.  While this is happening, if I delete the 2 characters, I see the get_default() being successful, but it seems to replace it with the ajax data when the ajax data finishes.</p>
  
  <p>How do I stop this from happening?</p>