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.

How to know, when AJAX request is fully loaded in Native Javascript?

It is my AJAX call with setTimeout
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('mainContent').style.display = 'none';
if (this.readyState == 4 && this.status == 200) {
xhttp.onload = function(){
document.getElementById("mainContent").innerHTML = this.responseText;
setTimeout(function(
document.getElementById("mainContent").style.display = 'block';
),1000);
}
}
};
xhttp.open("POST", "system.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("lang="+lang);
I want detect when ajax is fully loaded and I have also solution here
I have solution here but I can't understand how it work.
var oldOpen = XMLHttpRequest.prototype.open;
function onStateChange(event) {
// fires on every readystatechange ever
// use `this` to determine which XHR object fired the change event
}
XMLHttpRequest.prototype.open = function() {
// when an XHR object is opened, add a listener for its readystatechange events
this.addEventListener("readystatechange", onStateChange)
// run the real `open`
oldOpen.apply(this, arguments);
}
Can you example me how it work or write full code how it work ?

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();
}

use 'XMLHttpRequest' to get external website's source - Javascript

is there any method to get external website's source with javascript and without use of jquery?
this code can't get external page source:
var request = new XMLHttpRequest();
request.open('GET', 'internal_page_only:(.html', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
alert(request.responseText);
} else { //error }};
request.onerror = function() { //error };
request.send();