CODEWITHSUNDEEP
javascriptajaxxmlhttprequest
lucas m.
lucas m.

Reputation: 21

How to make requests with xmlhttprequest until response is ready?

I'm trying to make a request to a route which makes a query to an API and if the API has the data, the response is to render another website with the API data. But if the data is not ready yet, since it is still processing, the route returns a string "not finished yet".

What I wish to do is: make a get request and if the response is "not finished yet" wait for 5 seconds and do the request again until the response is the data. After it, the script would open the window with the new page with the data loaded.

Here is what I have already made:

job_id = document.querySelector("#job_id").getAttribute("value")
code = document.querySelector("#code").getAttribute("value")
​
var myRequest = new XMLHttpRequest();
​myRequest.open('GET', `http://127.0.0.1:5000/status/${job_id}/${code}`);
​myRequest.onreadystatechange = function () { 
    if (myRequest.readyState === 4 && myRequest.responseText != 'not finished yet') {
        window.location = `http://127.0.0.1:5000/status/${job_id}/${code}`
    }
};

If anyone knows if it works or knows a better way to deal with that, I'd appreciate your help.

Thanks in advance.

Solution:

After some hours, I finnaly found a way to handle it. Still don't know if it is the best way.

function search() {
job_id = document.querySelector("#job_id").getAttribute("value")
code = document.querySelector("#code").getAttribute("value")
var myRequest = new XMLHttpRequest();
myRequest.open('GET', `http://127.0.0.1:5000/status/${job_id}/${code}`);
myRequest.send();
myRequest.onreadystatechange = function () {
    if (myRequest.readyState === 4 && myRequest.responseText === 'not finished yet') { setTimeout(function () {search();}, 5000)
   }
    else if(myRequest.readyState === 4 && myRequest.responseText != 'not finished yet')
{ window.location = `http://127.0.0.1:5000/status/${job_id}/${code}`}}
}
search()

Upvotes: 2

Views: 358

Answers (1)

John
John

Reputation: 13729

I use var option = {}; as a global object to handle OOP (object oriented programming).

What you want to do is when you need to define something give it a prefix for the function and an identifier so you can avoid conflicts.

You posted some code so at 1 reputation and decent formatting you're doing a lot better than most starting at 1, kudos. Let's say you're working with a job ID of 79. So you'll want to define the following:

option.job_79 = 1;

Now I assigned the sub-object a 1 as a status, it's initialized. Since the option object is global scope you can have another call to your ajax() function and without it knowing that another ajax() function is already running you simply check for the typeof option.job_79 instead!

Some recommendations:

If you're enthusiastic about programming you'll eventually want to merge all your AJAX functions in to one single well refined function, it'll not only greatly simplify your code the up-front cost will save you and the earlier the better (though the more you'll have to refine it over time).

Also avoid the evils of frameworks and libraries. People make such a big deal about them but a few years later when you want to update you can't without spending days or weeks refactoring code. I've never had to refactor code using only pure JavaScript for any other reason other than my experience level, never because of a browser update. There are numerous other benefits that are hidden along that path and most people aren't aware of that.

Upvotes: 1

Related Questions