title: XMLHttpRequest throwing InvalidSateError saying "Object state must be opened"
body: <p><strong>The code -</strong> </p>
  
  <pre><code>"use strict";
  
  var AJAX = function (params) {
      this.server ={};
      this.url = params.url;
      this.method = params.method;
      this.dataType = params.dataType;
      this.formData = params.formData;
  
      this.init = function(){
          if(typeof XMLHttpRequest != 'undefined'){
              this.server = new XMLHttpRequest();
              this.server.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
              this.server.setRequestHeader('Content-length', this.formData.length);
              this.server.setRequestHeader('Connection', 'close');
              console.log("XMLHttpRequest created.");
              return true;
          }
      };
  
      this.send = function(){
          if(this.init()){
              this.server.open(this.method, this.url, true);
              this.server.send(this.formData);
          }
      };
  
  };
  </code></pre>
  
  <p>It is throwing following error : </p>
  
  <pre><code>Error in event handler for contextMenus: InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
  </code></pre>
  
  <p><strong>How it's being used -</strong> </p>
  
  <pre><code>var data = new FormData();
  
  data.append('user', 'sachin');
  var params = {
      url : 'example.com',
      method : 'post',
      dataType: 'json',
      formData : data
  };
  
  var backgroundWindow = chrome.extension.getBackgroundPage();
  
  var ajax = new backgroundWindow.AJAX(params);
  
  ajax.send();
  </code></pre>
  
  <p>I can't seem to figure out what's the reason behind.</p>