How do I create a javascript classes

Question

What I'm trying to do is create a object that will handle my ajax calls, I need to repeatedly refresh a few pages over and over again, and create a object for each page is the only way I can think of to do that, and still have the ajax code asynchronous. But whenever I test this nothing is happening and I don't know why.

Here is my code

function PageLoader(url,id,repeatTime){
    this.id = id;
    this.url = url; 
    this.repeatTime = repeatTime;

    this.start = function(){        
        var time = Date.now();
        var xml = new XMLHttpRequest();

        xml.open("GET",this.url,true);
        xml.onreadystatechange = function(){        
            if(xml.readyState === 4){
                document.getElementById(this.id).innerHTML = xml.responseText+" <small>("+(Date.now()-time)+")</small>";

                if(this.repeatTime > 0){
                    setTimeout(this.start,this.repeatTime);
                }
            }
        }

        xml.send(null);
    }

    this.stop = function(){
        this.repeatTime = -1;
    }
}

And here is how I try to run it.

var infoAjax = new PageLoader('../modules/userinfo.php','StatusInfo',1000);

//Load everything automaticly
window.onload = function(){
    infoAjax.start();
}

Answer 1

I'll get to the networking, but I'd like to take a minute to explain a few things about JavaScript.

First off, JavaScript has no notion of classes in the traditional sense. Every object in JavaScript has a prototype that allows that object to access foreign properties as though they were properties of that object. For example, var point = {x: 0, y: 10} creates a variable point referencing an object with two local keys x and y, but point also has prototype properties that can be accessed (e.g., point.hasOwnProperty is a function from Object.prototype — which is common to most JavaScript objects). The this keyword is were things gets interesting. Whenever a function is called, the this keyword refers to the object that "owns" that function. If I did something like point.incrementX = function () { this.x++; } the this would refer to point because it "owns" the incrementX function. JavaScript allows you to override this ownership by calling .call on a function an supplying a an object to use as this inside the body of the function. Constructors are where JavaScript really confuses things. When the new keyword is applied to a function it does two things. First it constructs an object whose prototype is set to the prototype property of the constructor function. Then it supplies that object to the constructor as this. So really when you do var obj = new Constructor() its like doing var obj = Object.create(Constructor.prototype); Constructor.call(obj) (Object.create creates an object whose prototype is set to the supplied object).

Anyhow, back to the point. Instead of creating methods for your PageLoader object inside the constructor, consider putting them in the prototype property of PageLoader.

PageLoader.prototype = {
   start: function () { ... },
   stop: function () { ... }
};

// or

PageLoader.prototype.start = function () { ... };
PageLoader.prototype.stop = function () { ... };

The other thing — likely the reason your code isn't working — is the use of this inside the onreadystatechange event callback. When you used this it was actually referring to the xml variable instead of the PageLoader instance. To fix this simply put a variable declaration such as var self = this; above the xml.onreadystatechange callback.

-- EDIT --

Admittedly my explanation this was a bit weak. If you'de like a more description explanation please checkout the MDN page (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).