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', '', 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>
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./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>
3 Answers
Reset to default 8open is a method, not a property
request.open = ('GET', 'https://api.github./users/xxxxxxxxx', true);
^^^
should be
request.open('GET', 'https://api.github./users/xxxxxxxxx', true);
^^^
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./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;
};
Not sure if this is a typo in your code here or not, but:
var request = new XMLHttpRequest;
Should be:
var request = new XMLHttpRequest();