Error 11: DOM Exception Thrown due to Invalid State

I have been working on creating a simple auxiliary class for sending requests using XmlHttpRequest. However, I am encountering some issues with the code. For instance, in Google Chrome, I am seeing the error message

INVALID_STATE_ERR: DOM Exception 11
, while in other browsers, I am getting a status == 0.

//@method XRequest: Object constructor. As this implements a singleton, the object can't be created by calling the constructor directly; GetInstance should be called instead
function XRequest() {
    this.XHR = XRequest.CreateXHR();
}
XRequest.instance = null;

//@method static GetInstance: Creates a singleton object of type XRequest. This method should be called whenever an object of that type is required.
//@return: an instance of a XRequest object
XRequest.GetInstance = function() {
    if(XRequest.instance == null) {
        XRequest.instance = new XRequest();
    }
    return XRequest.instance;
}

//@method static CreateXHR: Implements a basic factory method for creating a XMLHttpRequest object
//@return: XMLHttp object or null
XRequest.CreateXHR = function() {
    var xhr = null;
    var factory = [
        function() { return new XMLHttpRequest(); },
        function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
        function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
    ];

    for(var i = 0; i < factory.length; ++i) {
        var f = factory[i];
        xhr = f();
        if(xhr) return xhr;
    }
    return null;
}

XRequest.prototype.SetRequestHeader = function(name, value) {
    if(this.XHR) {
        this.XHR.setRequestHeader(name, value);
    }
}

XRequest.prototype.SendRequest = function(args) {
    var async = true;
    var type = "";
    var url = "";
    var username = "";
    var password = "";
    var body = null;
    var success = null; 
    var failure = null;

    for(e in args) {
        switch(e) {
            case "async":
                async = args[e];
                break;
            case "type":
                type = args[e];
                break;
            case "success":
                success = args[e];
                break;
            case "failure":
                failure = args[e];
                break;
            case "url":
                url = args[e];
                break;
            case "username":
                username = args[e];
                break;
            case "password":
                password = args[e];
                break;
            case "body":
                body = args[e];
            break;
            case "setHeader":
                var h = args[e].split(":");
                if(h.length == 2) {
                    this.SetRequestHeader(h[0], h[1]);
                }
                break;
        }
    }

    var that = this;
    this.XHR.onreadystatechange = function() {
        alert("readyState == " + that.XHR.readyState + "  status == " + that.XHR.status);
        if(that.XHR.readyState == 4) {
            if(that.XHR.status == 200 || that.XHR.status == 0) {
                if(success) success(that.XHR);
            } else {
                if(failure) failure();
            }
        }
    };
    this.XHR.open(type, url, async, username, password);
    this.XHR.send(body);
}

Here's an example of how to use it:

<script language="javascript">
    function onLoad() {
        var x = XRequest.GetInstance();
        x.SendRequest({type:"GET",
            setHeader:"Accept:text/html, image/png, image/*, */*",
            url: "http://your_server.com/getData?param1=test",
            success:onSuccess, failure:onFail
        });
    }

    function onSuccess(obj) {
        alert("OK");                
    }

    function onFail() {
        alert("Not at this time!");
    }
</script>

Answer №1

Issue with the ajax library at hand.

XHR.setRequestHeader() should only be used following XHR.open().

// @method XRequest: Object constructor. Since this is a singleton, avoid creating an object directly through the constructor, and instead use GetInstance
function XRequest()
{
    this.XHR = XRequest.CreateXHR();
}

XRequest.instance = null;


// @method static GetInstance: Establishes a single instance of XRequest as needed.
// @return: a unique instance of XRequest
XRequest.GetInstance = function()
{
    if(XRequest.instance == null)
    {
        XRequest.instance = new XRequest();
    }

    return XRequest.instance;
}

// @method static CreateXHR: Implements a basic factory method for generating XMLHttpRequest objects
// @return: XMLHttp object or null
XRequest.CreateXHR = function()
{
    var xhr = null;
    var factory = [
                    function() { return new XMLHttpRequest(); },
                    function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
                    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
                ];

    for(var i = 0; i < factory.length; ++i)
    {
        var f = factory[i];
        xhr = f();
        if(xhr)
            return xhr;
    }

    return null;
}

XRequest.prototype.SetRequestHeader = function(name, value)
{
    if(this.XHR)
    {
        //alert(name+'|||'+value);
        this.XHR.setRequestHeader(name, value);
    }
}

XRequest.prototype.SendRequest = function(args)
{
    var async = true;
    var type = "";
    var url = "";
    var username = "";
    var password = "";
    var body = null;
    var success = null; 
    var failure = null;

    for(e in args)
    {
        switch(e)
        {
            case "async":
                async = args[e];
                break;

            case "type":
                type = args[e];
                break;

            case "success":
                success = args[e];
                break;
            case "failure":
                failure = args[e];
                break;

            case "url":
                url = args[e];
                break;

            case "username":
                username = args[e];
                break;

            case "password":
                password = args[e];
                break;

            case "body":
                body = args[e];
                break;
        }
    }

    var that = this;
    this.XHR.onreadystatechange = function()
        {
            alert("readyState == " + that.XHR.readyState + "  status == " + that.XHR.status);
            if(that.XHR.readyState == 4)
            {
                if(that.XHR.status == 200 || that.XHR.status == 0)
                {
                    if(success)
                        success(that.XHR);
                }
                else
                {
                    if(failure)
                        failure();
                }
            }
        };

    this.XHR.open(type, url, async, username, password);
    for(e in args)
    {
        switch(e)
        {
            case "setHeader":
                var h = args[e].split(":");             
                if(h.length == 2)
                {
                    this.SetRequestHeader(h[0], h[1]);
                }
                break;
        }
    }
    this.XHR.send(body);
}

Answer №2

To simplify your SendRequest method, consider creating a mixin instead of relying on a large switch statement.

XRequest.prototype.SendRequest = function(params) {
    var defaultParams = {
        async:    true,
        type:     "",
        url:      "",
        username: "",
        password: "",
        body:     null,
        success:  null,
        failure:  null
    };

    for (var i in defaultParams) {
        if (defaultParams.hasOwnProperty(i) && typeof params[i] == "undefined") {
            params[i] = defaultParams[i];
        }
    }

    var that = this;
    this.XHR.onreadystatechange = function() {
        if (that.XHR.readyState == 4) {
            if (that.XHR.status == 200 || that.XHR.status == 0) {
                if (params.success) {
                    params.success(that.XHR);
                }
            } else {
                if (params.failure) {
                    params.failure();
                }
            }
        }
    };

    this.XHR.open(
        params.type, parms.url, params.async, params.username, params.password
    );

    // Instead of using a for/switch for one case only
    if (params.setHeader) {
        var h = params.setHeader.split(":");
        if (h.length == 2) {
            this.SetRequestHeader(h[0], h[1]);
        }
    }

    this.XHR.send(params.body);
};

Keep in mind that your current for..in loops have two key issues:

  1. Avoid creating a global variable by not using var: use for (var e in args) instead of for (e in args)
  2. When using for..in, always ensure each key belongs directly to the object and not inherited through the prototype chain

.

for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        // perform actions here
    }
}

Answer №3

This issue commonly arises when using the XMLHttpRequest, specifically when the open method is called with async = true or if the async parameter is left undefined, defaulting to asynchronous behavior. Attempting to access the status or responseText properties before a synchronous call has been made can lead to this error. It is recommended to initially test with async = false and then transition to true while utilizing the onReadyStateChange function to handle the response.

Answer №4

The issue I encountered was when attempting to retrieve xhr.statusText within the xhr.onreadystatechange function, but fetching xhr.readyState worked without any problems.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Links for navigation are only functional within the App Component

I have 4 components: App.js, navbar.js, signIn.js, signUp.js. The goal is to have the navbar display at the top of every page the user visits. Currently, the links in the navbar only work on the homepage and are disabled on other pages. I attempted to res ...

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

Using $eval in Angular to pass a string to an object

Here's the scenario: "var jsonData={first:{name:'John', age:30}};" I am looking to instantiate an object from this string, The standard JS eval function works perfectly for this purpose, however, when attempting to use $eval I encounter ...

generate a fresh array containing JSON objects with index key values in JavaScript

Here is an example JSON structure: { "productA": { "USD": 125.648 }, "productB": { "USD": 654.547 }, "productC": { "USD": 132.45 } } After a successful API call, I need to store the response data in a new array: then(function suc ...

Spin a vector using a perpendicular in Three.js

I need help with vector rotation in Three.js {x: 0, y: 0, z: 1} I also have a normal vector: {x: 1, y: 0, z: 0} How can I rotate the first vector based on the direction of the normal to achieve this result? {x: 1, y: 0, z: 0} Your assistance in this ...

Searching to loop through JSON within a Sequelize / Postgres database query in order to identify a corresponding value

Hello everyone, I'm new here so please bear with me. I'm currently working on a project using Sequelize with PostgresDB in Node and I need to search for a contact by email using findOrCreate function. The email entry is stored in JSON format (se ...

What is the method for turning off client-side validation for a specific field with jQuery when a checkbox is selected?

This is the HTML code used in my MVC Razor page. <form> <input id="inputLPR" asp-for="LicensePlateNo" class="form-control"/> <input type="checkbox" id="isEnableBypass"><label for=&qu ...

Gallery3 - fixing the issue of page not reloading after save

Seeking assistance from a PHP expert familiar with Gallery3 code. The support forum is inaccessible and other forums have not been helpful. I have customized the PHP code/Javascript in my Gallery3, along with fixing an incomplete Responsive Theme specific ...

Implementing drag and drop functionality for objects loaded with GLTF in three.js

Having trouble with loading a gltf object made of multiple elements. When attempting to select and drag the object, only one element can be dragged. Seeking assistance in resolving this issue. var loader = new THREE.GLTFLoader(); loader.load(‘W3030 / W3 ...

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

I'm currently attempting to save the data that is read by fs into a variable. However, the output I am receiving is undefined. const fs = require("fs"); var storage; fs.readFile("analogData.txt", "utf8", (err, data) =&g ...

What is the reason behind MVC model binding correctly resolving a complex object when the request is made through POST, but not resolving it when made through GET?

Within my controller, I have created a Customer ViewModel class as showcased below. This class consists of two properties: FirstName and LastName, along with a third property named Orders which is essentially a collection of Order objects public class Cu ...

Update the state in the componentDidMount lifecycle method

Embarking on a project using React to hone my skills, but encountered an error while trying to populate an array with data from a JSON file in the ComponentDidMount() hook. It seems this issue stemmed from a previous error: cannot read property 0 of undef ...

When the `rendered` event is activated in VueJS along with "vue-markdown", the DOM may not be fully prepared yet

Here is the code snippet I am working with: <vue-markdown :source="content" v-on:rendered="afterRenderContent"></vue-markdown> Even after the afterRenderContent method is called, the HTML elements are not yet available. I am looking for a wa ...

Issues with ASP.NET calendar extender functionalityThe ASP.NET calendar extender

I'm having some trouble implementing a Calendar Extender using AJAX in my web application. I want the calendar to pop up when I click on a textbox. I've followed all the steps outlined in this example here I've re-downloaded AJAX TOOLKIT 4. ...

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

Revamping settings and configurations within an active Bootstrap 4 modal

Currently in the process of updating a modal from Bootstrap 3 to Bootstrap 4. One particular issue I encountered involves the modification of the backdrop and keyboard options for an open modal. In Bootstrap 3, I successfully achieved this by executing: $ ...

What is the best way to create a new line in React that resembles a terminal?

What technologies am I working with? I am currently using React and CSS modules in my development Greetings! I am in the process of creating a website for a Portfolio Terminal I have a vision to incorporate a feature where users can simulate creating a ...

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

What is the best way to handle multiple JSON data using jQuery?

Understanding how to utilize jquery for parsing simple json is a valuable skill. json { "Symbol": "AAL.L", "Name": "ANGLO AMERICAN", "Last": "3061.50", "Date": "7/26/2011", "Time": "11:35am", "Change": "+3 ...

jQuery alert displaying outdated information instead of the latest information

I'm facing an issue with a jQuery pop-up functionality. I have content that loads via Ajax, and I want this content to display as a pop-up message when a link is clicked. The first time I click the pop-up link, the correct content is shown. However, a ...