Retrieve the response text using native JavaScript

Question

Retrieve the response text using native JavaScript

Dealing with the nature of asynchronous XMLHTTPRequest in JavaScript can be tricky. I faced a challenge where I needed to return the responseText value but found it impossible due to this nature. To overcome this, I came up with a workaround by calling a function that pastes the responseText into a specified ID. However, the issue resurfaced when I needed to retrieve a JSON file and return its value. I attempted to inject responseText into a variable, but it didn't work. I also tried creating an "interface-like" file to handle this task, but to no avail. Are there any known workarounds for this problem?

function httpGetJson( file, type) {
        self.httpState(true);
        try{
            var type = type || true;
            var http = self.http();
            http.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200){
                    returnJson(this.responseText);
                }
            }
            http.open("GET", "json/" + file, type);
            http.send();
        }catch (err){
            return log.error("http.httpGetJson", err.message);
        }
        self.httpState(false);
    }

Check it out on codepen http://codepen.io/mecostav/pen/JNdovR

javascript json ajax

Answer 1

Answer №1

A callback or a Promise should be added to your function. For instance, the function can receive a function as a parameter

function httpGetJson(file, type, cb) {
    self.httpState(true);
    try{
        var type = type || true;
        var http = self.http();
        http.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200){
                cb(this.responseText);
            }
        }
        http.open("GET", "json/" + file, type);
        http.send();
    }catch (err){
        return log.error("http.httpGetJson", err.message);
    }
    self.httpState(false);
}

Then, the function can be called like this:

httpGetJson('foo', 'bar', function (result) {
    // do something with result
});

Instead of:

var result = httpGetJson('foo', 'bar');
// do something with result

Using the latter approach will not work with JavaScript, so it's best not to attempt to do so. If you really require synchronous http requests, there is a deprecated method for that, which you can search for online (but it's not recommended).

Answer 2

A callback or a Promise should be added to your function. For instance, the function can receive a function as a parameter

function httpGetJson(file, type, cb) {
    self.httpState(true);
    try{
        var type = type || true;
        var http = self.http();
        http.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200){
                cb(this.responseText);
            }
        }
        http.open("GET", "json/" + file, type);
        http.send();
    }catch (err){
        return log.error("http.httpGetJson", err.message);
    }
    self.httpState(false);
}

Then, the function can be called like this:

httpGetJson('foo', 'bar', function (result) {
    // do something with result
});

Instead of:

var result = httpGetJson('foo', 'bar');
// do something with result

Using the latter approach will not work with JavaScript, so it's best not to attempt to do so. If you really require synchronous http requests, there is a deprecated method for that, which you can search for online (but it's not recommended).

Retrieve the response text using native JavaScript

Answer №1

Similar questions

What is the best way to substitute </br> and <br/> with in a text?

Retrieving XML Information from a Textual Source

Exploring PostgreSQL's dynamic querying capabilities for JSON data

When attempting to render 2 components based on the results of 2 fetch calls using Promise.allSettled(), I encounter difficulties if one of them throws an error

NPM - Include in package.json without installation

Tips for executing parallax designs, similar to the techniques used on the

Tips for redirecting users after a successful Ajax call

Guide on efficiently injecting data into a database using JavaScript and SQL from an array of objects

Leveraging HTML and PHP for integrating date and mobile number functionalities

The jQuery validation feature is failing to function properly within a bootstrap modal

Using WCF REST to send a JSON payload

Initiate an ajax call only when new data needs to be fetched for the initial load

Implementing click events to control GSAP animations in Next.js

Sharing the logger object in NodeJS projects: What's the best approach?

Trouble with linkage in jQuery for AJAX requests in an external .js document

Distributing JWT to the recipient using Express

What is the most efficient way to align a localStorage variable with its corresponding page?

Obtain a Compilation of Video Sources in an HTML5 Format

Is it possible for the req.url path in expressjs to represent a different URL?

Tips for effectively crafting a component capable of managing both a value and an observable for that specific value