Can't retrieve result from AJAX objects with plain JavaScript

Question

Trying to implement own AJAX prototype and not using jQuery or other one. I can't retrieve any result, breakpoint, which is set on some line doesn't fire:

enter image description here

The problem is with the next part:

enter image description here

Why is it undefined, if I have previously init the HttpXml instance with the init() function:

enter image description here

I'm trying to send a request from other part of program doing the next:

var ajaxInstance = new GC3D.Ajax();
ajaxInstance.init();
var response = ajaxInstance.sendRequest({
    HttpMethod: 'GET',
    UrlEndpoint: '/SomeService?function=someFunctionName'
});

Full source of that prototype:

GC3D.Ajax = function() {
    this.httpRequest = undefined;
    this.listExceptions = undefined;
};
GC3D.Ajax.prototype.init = function() {
    this.listExceptions = [];

    if ( window.XMLHttpRequest ) this.httpRequest = new XMLHttpRequest();
    else if ( window.ActiveXObject ) {
        try {
            this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
        }
        catch ( exception ) {
            this.listExceptions.push( exception );

            try {
                this.httpRequest = new ActiveXObject( 'Msxml2.XMLHTTP' );
            } 
            catch ( exception ) {
                this.listExceptions.push( exception );

                try {
                    this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
                } 
                catch ( exception ) {
                    this.listExceptions.push( exception );
                }
            }
        }
    }

    if ( !this.httpRequest ) {
        console.error( 'Can\'t create a HTTP Request instance for AJAX! Possible problems:' );
        console.error( this.listExceptions );
    }
    else this.httpRequest.onreadystatechange = this.getContentFromRequest;
};
GC3D.Ajax.prototype.sendRequest = function( properties ) {
    if ( this.httpRequest !== undefined ) {
        this.httpRequest.open( properties.HttpMethod, properties.UrlEndpoint );
        this.httpRequest.send();
    }
    else throw 'HTTP Request instance isn\'t defined!';
};
GC3D.Ajax.prototype.getContentFromRequest = function() {
    if ( this.httpRequest !== undefined ) {
        if ( this.httpRequest.readyState === 4) {
            if ( this.httpRequest.status === 200 ) return this.httpRequest.responseText;
            else console.log( 'There was a problem with the request in GC3D.Ajax.' );
        }
    }
};
GC3D.Ajax.prototype.get = function() {
    return this.httpRequest;
};

What's incorrect and why it isn't firing at that line above?

Thanks

@dfsq Never explicitly call, but have bind as function call on event here: `else this.httpRequest.onreadystatechange = this.getContentFromRequest;` — , Mar 10 '14 at 20:44
@dfsq also... seems to be you aren't attentive, if you look closely to the 2nd screen in Q content, you may see exact breakpoint in `getContentFromRequest()` and it's hit, but `xmlHttp` instance isn't defined. — , Mar 10 '14 at 20:58
More details about `this`: http://stackoverflow.com/a/16063711/1641941 under "the this variable" — HMR, Mar 11 '14 at 00:22

score 0 · Accepted Answer · answered Mar 10 '14 at 21:32

The problem was with the this context losing here:

else this.httpRequest.onreadystatechange = this.getContentFromRequest;

When I've applied for that event the function above it has lost this instance.

Let's imagine, we don't know the exact function name and it would be an anonymous function:

this.someEvent.onSomething = function( item ) { ... };

And here it's losing in anonymous function because of scopes definition {}, which closing the visible space for this.

So the similar issue is here with my code, when I've changed some part to:

GC3D.Ajax.prototype.getContentFromRequest = function() {
    if ( this.readyState === 4 ) {
        if ( this.status === 200 ) return this.responseText;
        else console.log( 'There was a problem with the request in GC3D.Ajax.' );
    }
};

And now code is working!

Can't retrieve result from AJAX objects with plain JavaScript

1 Answers1