I am trying to add an ajax method to a module without using jQuery for the first time. I keep getting the following error on my method .jax() that says Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': the object's state must be OPENED.

I am not sure how to resolve that. Here's my module and some simple HTML.

var Test = (function (el) {



  function InnerTest () {

    this.el = el;



    //Capital letters indicate a constant that should not change.

    this.PARA = 'p'



    this.init();       

  };



  InnerTest.prototype.init = function () {

    this

        .createChildren()

        .runIt()

        .jax();

  };



  InnerTest.prototype.createChildren = function () {

    this.para = this.el.querySelectorAll(this.PARA); 



    return this;

  };



  InnerTest.prototype.runIt = function () {

    var len = this.para.length;

    for (var i = 0, item; item = this.para[i]; i++) {

        //test if browser supports the classList method else use className to add class.

        if (item.classList) {

            item.classList.add(item.textContent)

        }

        else {

          item.className += ' ' + item.textContent

        }

        console.log( item );

        console.log( item.classList );

    }



    return this;

  };



  InnerTest.prototype.jax = function () {

    var self;

    var request = new XMLHttpRequest();

    request.open = ('GET', 'https://api.github.com/users/xxxxxxxxx', true);



    request.send();



    request.onload = function () {



        data = JSON.parse(this.reponse);

        console.log( data );

    };



    return this;

  };



  return InnerTest;



}( document.querySelector('.box') ));



(function () {

  new Test();

}());

Here's HTML:

<div class=box>

  <p>One</p>

  <p>Two</p>

  <p>Three</p>

</div>