Develop Reference

In what order is XMLHttpRequest() executed

I am trying to figure out how to toggle the style display using plain javascript.
I have an XLMHttpRequest(). It works. The UI display is what I am working on. I would like the spin icon to show while the data is being loaded to the database. So, my code turns on the icon but the problem is when I add
document.getElementById('loading').style.display = "none";
to reset it to hidden. It never shows. So, here is my code.
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onprogress = function() {
document.getElementById('loading').style.display = "block";
}
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
xhr.send()
}
I tried to have the page just reload after the alert is shown but all that does is immediately reloads the page without executing the xhr.send(). That is why I would like to know what order is the code executed. That way I will know where to place the display = "none".

The latency is probably too low to notice the change (which can be verified by simulating high latency on the server). Try the following as an alternative:
From:
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onprogress = function() {
document.getElementById('loading').style.display = "block";
}
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
xhr.send()
}
To:
function runScript()
{
let xhr = new XMLHttpRequest();
xhr.open('GET', 'wenoconnected.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
if (this.responseText === 'imported') {
alert('Update Complete');
}
document.getElementById('loading').style.display = "none";
}
}
document.getElementById('loading').style.display = "block";
xhr.send()
}
Assumptions:
The GET request latency is slow enough that you'll see the indicator
There is no other issue, related to CSS/HTML, that would prevent the indicator from showing
Disregarding the obvious, like; whether the function is being executed, no typos for identifiers that’d prevent relevant code from executing, etc.

javascript load new url in div?

I got this code, to simple to have any errors and still...
I have a nav, where the onclick calls for clicker(nodenr) what should load an external site in an div.
function clicker(nodenr) {
var url=links[nodenr];
console.log(nodenr);
var request = new XMLHttpRequest();
request.open('GET', ''+url+'', true);
//request.open('GET', ''url, true);
request.onreadystatechange = function (event) {
if(request.readyState == 4) {
if(request.status == 200) {
console.log("hello");
document.getElementById("content").innerHTML = request.responseText;
}
else {
document.getElementById("content").innerHTML = "Service not loading.";
}
}
};
}
What basic error have I made? Please correct me. :)

javascript load response of XMLHttpRequest after server answer

i'm stuck on an issue i could not find an answer to.
i have the following code:
function LanguageClicked(language_clicked){
var request = new XMLHttpRequest();
request.open("GET", "", false /* async */);
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
----HERE SHOLUD BE THE CODE FOR CHANGING THE WEB PAGE TO THE SERVER
RESPONSE----
}
how can i do that? i want to change the current page to the server response page.

What do you think about this ?
function LanguageClicked(language_clicked) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Here we go on the new page
window.location = xhttp.responseText;
}
};
request.open("GET", "", false /* async */ );
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
}

Try this.
function LanguageClicked(language_clicked) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Here we go on the new page
document.write(xhttp.responseText);
}
};
request.open("GET", "", false /* async */ );
request.setRequestHeader("Accept-Language", language_clicked);
request.send();
}

Checking if the page exists and making sure it doesn't cache

I have the code to check if a webpage exists that is working perfectly fine, but I need to check if it exists many times a second. Would this code cache, or would it check every time?
var url = "urlhere"+"?noCachePlease="+(Math.random()*1000000);
var aa = setInterval(function() {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onreadystatechange = function(){
if (request.readyState === 4){
if (request.status === 404) {
//Site DNE
}
else { clearInterval(aa); }
}
};
request.send();
}, 50);
//Afterwards

Javascript Uncaught SyntaxError: Unexpected identifier error in Chrome debugger

I am adapting the XMLHttpRequest from this tutorial:
var request = new XMLHttpRequest();
request.open('GET', 'http://www.mozilla.org/', true);
request.onreadystatechange = function (aEvt) {
if (request.readyState == 4) {
if (request.status == 200)
console.log(request.responseText)
else
console.log('Error', request.statusText);
}
};
request.send(null);
My code is:
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
if (xhr.readyState == 4) {
if (xhr.status == 200)
console.log("request 200-OK");
chrome.browserAction.setBadgeText ( { text: "done" } );
else
console.log("connection error");
chrome.browserAction.setBadgeText ( { text: "ERR" } );
setTimeout(function () {
chrome.browserAction.setBadgeText( { text: "" } );
}, 2000);
}
}
xhr.send(formData);
But Chrome debugger gives a Uncaught SyntaxError: Unexpected identifier error on the else. What am I doing wrong? Thanks!

You are missing the closing } before and the opening { after the else, as well as the other ones in your if-else - statement.
It works on your tutorial code, because there's only one line in the if-else - statement. When there are multiple lines, you have to block them correctly. (I personally recommend to do this always, even if there's just one line of code. In my opinion it adds to readability and you will not have problems, when you decide to minify your code one day)
Try this:
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
if (xhr.readyState == 4) {
if (xhr.status == 200){
console.log("request 200-OK");
chrome.browserAction.setBadgeText ( { text: "done" } );
}else{
console.log("connection error");
chrome.browserAction.setBadgeText ( { text: "ERR" } );
setTimeout(function () {
chrome.browserAction.setBadgeText( { text: "" } );
}, 2000);
}
}
};
xhr.send(formData);