Ajax error in module: the object's state must be OPENED

Question

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>

score 8 · Accepted Answer · answered Jan 31 '14 at 15:32

8

open is a method, not a property

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

should be

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

answered Jan 31 '14 at 15:32

epascarello

204,599
20
195
236

1

Thank you!!!! I hate to ask another question but now the error I get says "Uncaught SyntaxError: Unexpected token u". Is that something with the JSON.parse? – Mdd Jan 31 '14 at 15:40
Nevermind, I found the typo in the word 'response' which was used in JSON.parse. Thanks again so much!!! – Mdd Jan 31 '14 at 15:43

score 2 · Answer 2 · answered Jan 31 '14 at 15:18

You missing some pieces. Look at this example. You should call methods. I just type without testing:

  InnerTest.prototype.jax = function () {
    var self;
    var request = new XMLHttpRequest();
    request.open('get', 'https://api.github.com/users/xxxxxxxxx', true);

    request.onreadystatechange = function() {
        if(xhr.readyState === 4) { // xhr.status === 200 not needed in your case
            data = JSON.parse(request.reponse);
            console.log( data );
        }
    };

    request.send();

    return this;
  };

score 1 · Answer 3 · answered Jan 31 '14 at 15:17

1

Not sure if this is a typo in your code here or not, but:

var request = new XMLHttpRequest;

Should be:

var request = new XMLHttpRequest();

answered Jan 31 '14 at 15:17

gpgekko

3,506
3
32
35

Thanks. I fixed the typo and added () to XMLHttpRequest(). I am still getting the same error though. – Mdd Jan 31 '14 at 15:28

Ajax error in module: the object's state must be OPENED

3 Answers3

Linked