I encountered an undefined type error while converting my code to an Object using JavaScript AJAX

Question

I encountered an undefined type error while converting my code to an Object using JavaScript AJAX

I am puzzled by the TypeError (this.req is undefined) that I am encountering on this line of code: if (this.req.readyState === 4) {

function RequestCORS(url) {
this.url = "http://crossorigin.me/" + url;
this.req = new XMLHttpRequest();
}

RequestCORS.prototype.send = function () {
this.req.open("GET", this.url);
this.req.onreadystatechange = function() {
    if (this.req.readyState === 4) {
        if (this.req.status === 200) {
            console.log(this.req.responseText);
        } else {
            console.log("error request");
            //handleError
        }
    }
};
this.req.send();
};

function main() {
var url = "http://www.01net.com/rss/mediaplayer/replay/";
var requete = new RequestCORS(url);

requete.send();
}


window.addEventListener("load", main);

Your time spent reading is appreciated.

javascript ajax

Answer 1

Answer №1

this.req becomes undefined in this scenario due to the asynchronous request causing this to no longer reference the original RequestCORS instance when onreadystatechange is triggered.

To resolve this issue, you can create a local variable within the onreadystatechange function that maintains scope.

var req = this.req;
this.req.onreadystatechange = function() {
  if (req.readyState === 4) {
    if (req.status === 200) {
        console.log(req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
};

Alternatively, you can utilize the bind method.

this.req.onreadystatechange = function() {
  if (this.req.readyState === 4) {
    if (this.req.status === 200) {
        console.log(this.req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
}.bind(this);

Another option is to eliminate the use of this.req altogether.

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if (req.readyState === 4) {
    if (req.status === 200) {
        console.log(req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
};

Answer 2

this.req becomes undefined in this scenario due to the asynchronous request causing this to no longer reference the original RequestCORS instance when onreadystatechange is triggered.

To resolve this issue, you can create a local variable within the onreadystatechange function that maintains scope.

var req = this.req;
this.req.onreadystatechange = function() {
  if (req.readyState === 4) {
    if (req.status === 200) {
        console.log(req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
};

Alternatively, you can utilize the bind method.

this.req.onreadystatechange = function() {
  if (this.req.readyState === 4) {
    if (this.req.status === 200) {
        console.log(this.req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
}.bind(this);

Another option is to eliminate the use of this.req altogether.

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if (req.readyState === 4) {
    if (req.status === 200) {
        console.log(req.responseText);
    } else {
        console.log("error request");
        //handleError
    }
  }
};

I encountered an undefined type error while converting my code to an Object using JavaScript AJAX

Answer №1

Similar questions

Working with MongoDB - Updating multiple subarrays within an array

Combining Socket.io with AJAX for real-time web applications

Transmit an HTML table to PHP

Sorting two different divisions is an example

Updating materials within the Forge

Tips on preventing my app from automatically filling a div when the search input is left blank in React

Querying the api for data using Angular when paginating the table

Using Axios to make a GET request with specific parameters to filter and retrieve data within a certain "createdAt" range

Executing a jQuery AJAX function when the timeout occurs

Utilizing ajax for fetching a data table

Create a single JSON object by searching through two collections in MongoDB

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

Display header right button based on a condition in React Native using React Navigation

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

Comparing Django Templating with AJAX for loading a small div on a web page

Initiate Child Event within Parent Component

Tips for emphasizing the current element without disrupting existing styles

Create a base data model that can be duplicated and modified as needed

Trouble with document updates in MongoDB/Mongoose causing a delay?

Merging audio files using Node Stream