Error: The method 'getAjaxResponse' is not available for Object #<AbstractAjaxReq>

Question

Error: The method 'getAjaxResponse' is not available for Object #<AbstractAjaxReq>

Looking to incorporate OOP best practices into my javascript code. Currently, I have an abstractAjaxRequest with child classes defining the getAjaxResponse function. However, I am encountering an error on the line self.getAjaxResponse(). Any ideas on how to resolve this issue?

function soapReq() {
    var ajaxRequest = new SignInAjaxReq();
    ajaxRequest.init();
    var SOAPRequest = getSOAPHead();
    var bodyArgs = getLoginAttempt();
    SOAPRequest += getSOAPBody(bodyArgs[0], bodyArgs[1], bodyArgs[2]);
    SOAPRequest += getSOAPFoot();

    var url = 'xxx'
    ajaxRequest.ajaxRequest.open('POST', url, true);
    ajaxRequest.ajaxRequest.setRequestHeader( "Content-Type","text/xml; charset=utf-8");
    ajaxRequest.ajaxRequest.send(SOAPRequest);
}    

function AbstractAjaxReq() {
    var self = this;
    this.init = function() {
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // error here
            }
        };
        return self.ajaxRequest;
    };
};

function SignInAjaxReq() {
    var self = this;
    this.getAjaxResponse = function() {
        var xml = self.ajaxRequest.responseXML;
        var x=xml.getElementsByTagName("signInResult");
        for (i=0;i<x.length;i++) { 
            console.log(x[i].childNodes[0].nodeValue);
        }
    };
};
SignInAjaxReq.prototype = new AbstractAjaxReq();

Uncaught TypeError: Object #<AbstractAjaxReq> has no method 'getAjaxResponse' SoapRequest.js:42
    self.ajaxRequest.onreadystatechange

javascript ajax

Answer 1

Answer №1

Your inheritance structure needs to be adjusted. When you instantiate the prototype using new AbstractReq(), the self closure variable will refer to the prototype object - which does not include a getAjaxResponse method.

Solution #1: Implement correct inheritance:

function AbstractAjaxReq() {
    var self = this;
    this.init = function() {
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
    var self = this;
    this.getAjaxResponse = function() {
        var xml = self.ajaxRequest.responseXML;
        var x=xml.getElementsByTagName("signInResult");
        for (i=0;i<x.length;i++) { 
            console.log(x[i].childNodes[0].nodeValue);
        }
    };
};
SignInAjaxReq.prototype = Object.create(AbstractAjaxReq.prototype);

Solution #2: Set the actual instance to self by declaring the variable in the init function:

function AbstractAjaxReq() {
    this.init = function() {
        var self = this; // declared here!
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

Additionally, it is recommended to utilize the prototype! For example:

var abstractAjaxPrototype = {
    init: function() {
        var self = this; // declared here!
        this.ajaxRequest = new XMLHttpRequest();
        this.ajaxRequest.onreadystatechange = function() {
            if (self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return this.ajaxRequest;
    }
};
function SignInAjaxReq() { }
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

Lastly, avoid using init methods and instead use constructors:

function AbstractAjaxReq() {
    var self = this; // declared here!
    self.ajaxRequest = new XMLHttpRequest();
    self.ajaxRequest.onreadystatechange = function() {
        if(self.ajaxRequest.readyState === 4){
            self.getAjaxResponse() // no more error here
        }
    };
};
function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
}
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

// Usage:
var ajaxRequest = new SignInAjaxReq();
// do not call ajaxRequest.init()!

Answer 2

Your inheritance structure needs to be adjusted. When you instantiate the prototype using new AbstractReq(), the self closure variable will refer to the prototype object - which does not include a getAjaxResponse method.

Solution #1: Implement correct inheritance:

function AbstractAjaxReq() {
    var self = this;
    this.init = function() {
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
    var self = this;
    this.getAjaxResponse = function() {
        var xml = self.ajaxRequest.responseXML;
        var x=xml.getElementsByTagName("signInResult");
        for (i=0;i<x.length;i++) { 
            console.log(x[i].childNodes[0].nodeValue);
        }
    };
};
SignInAjaxReq.prototype = Object.create(AbstractAjaxReq.prototype);

Solution #2: Set the actual instance to self by declaring the variable in the init function:

function AbstractAjaxReq() {
    this.init = function() {
        var self = this; // declared here!
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

Additionally, it is recommended to utilize the prototype! For example:

var abstractAjaxPrototype = {
    init: function() {
        var self = this; // declared here!
        this.ajaxRequest = new XMLHttpRequest();
        this.ajaxRequest.onreadystatechange = function() {
            if (self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return this.ajaxRequest;
    }
};
function SignInAjaxReq() { }
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

Lastly, avoid using init methods and instead use constructors:

function AbstractAjaxReq() {
    var self = this; // declared here!
    self.ajaxRequest = new XMLHttpRequest();
    self.ajaxRequest.onreadystatechange = function() {
        if(self.ajaxRequest.readyState === 4){
            self.getAjaxResponse() // no more error here
        }
    };
};
function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
}
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

// Usage:
var ajaxRequest = new SignInAjaxReq();
// do not call ajaxRequest.init()!

Error: The method 'getAjaxResponse' is not available for Object #<AbstractAjaxReq>

Answer №1

Similar questions

Transform an asynchronous callback into an asynchronous generator format

Find the intersection of objects near the Raycaster in Three.js

Hide and show submenus with jQuery while ensuring that the initial submenu remains visible, along with the main menu

Using jQuery to insert a div class with PHP referenced

v-autocomplete no selected option

Is there a way to speed up the processing time of parsing a 34Mb file using JSON.parse, which currently takes

[Vue alert]: Issue with rendering: "TypeError: Unable to access property 'replace' of an undefined value"

What is the best way to save the content of an RFC822 message body as a String?

Is there a way to access a child component's method from the parent component using ref in Vue3?

Discover distinct and recurring elements

Steps for generating a hierarchical menu utilizing data from a CSV file

What is the best way to display a string state value in a React component?

Ways to establish a default search outcome in a search box

The dynamic Vue.js transitions and effects are like a magic

The unique capabilities of services and factories in Angular 1 - understanding their differences and what each excels at

"Are you in search of an open source sketchpad with flash or ajax

The lack of definition for the props value poses an issue in React.js Hooks

Spinning an object using JQuery

What is the best way to create a unique custom control in Javascript, potentially utilizing jQuery?

Utilizing arrays for generating tables in React