title: jQuery object, inconsistent global variables and AJAX call
body: <p>I'm looking to get what I thought would be a simple script to run an AJAX call and keep various values stored to an object, but I cannot get the globals to remain consistent the way I would expect. </p>
  
  <p>I've gone around in circles trying what I think is everything. As soon as I put the AJAX call in I can't get it to play nicely with the global variables. The <code>process</code> value is always <code>false</code> that way and the content never loads in.</p>
  
  <pre><code>ExtContent = function(){
      var self = this;
      this.init = function() {
          self.output = null;
          self.process = false;
      };
      this.request = function(url){
          $.ajax({
              type     : 'GET',
              timeout  : 10000,
              dataType : 'html',
              url      : url,
              passself : self,
              success  : function(response){
                  this.passself.setoutput(response);
              },
              error    : function(req,response){
                  if(response==='error'){
                      self.error=req.statusText;
                  }
              }
          });
      };
      this.setoutput = function(data){
          this.output = data;
          this.process = true;
      };
      this.returnprocess = function(){
          return self.process;
      };
      this.returnoutput = function(){
          return self.output;
      };
      self.init();
  };
  </code></pre>
  
  <p><code>&lt;div id="holder"&gt;&lt;/div&gt;</code></p>
  
  <pre><code>loadcontent = new ExtContent(); 
  loadcontent.request('/test.html');
  
  if(loadcontent.returnprocess()){
      $('#holder').before(loadcontent.returnoutput());
  }else{
      $('#holder').before('FAILED');
  }
  </code></pre>
  
  <p>I can't get the <code>process</code> to be <code>true</code> and the content to be stored in <code>output</code>.</p>
  
  <p>Thanks.</p>