XMLHttpRequest behaves differently on static HTML page to Wordpress site
-
I'm using JS to fetch data from an xml file on a server, like so:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};I've noticed that when I use this code within my wordpress site, my function is able to get readable data in chrome console, i.e. a drop-down which shows all the xml code, However if I use the same JS on a static HTML page, it seems to fetch the data but only displays "XML: [object XMLDocument] with no actual data. Obviously, I'm new to all this, but it would really help my understanding to know why this happens.
-
I'm using JS to fetch data from an xml file on a server, like so:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};I've noticed that when I use this code within my wordpress site, my function is able to get readable data in chrome console, i.e. a drop-down which shows all the xml code, However if I use the same JS on a static HTML page, it seems to fetch the data but only displays "XML: [object XMLDocument] with no actual data. Obviously, I'm new to all this, but it would really help my understanding to know why this happens.
Since this seems to be a new site, and I'm assuming you don't need to support the now officially dead[^] Internet Explorer, you might have better luck using the Fetch API: Fetch API - Web APIs | MDN[^] This can help to clean up the code, especially when combined with async[^] and await[^]. Eg:
async function loadSomeData(){
const response = await fetch("/path/to/your/file.xml");
const text = await response.text();
const xml = new DOMParser().parseFromString(text, "text/xml");
myFunction(xml);
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Since this seems to be a new site, and I'm assuming you don't need to support the now officially dead[^] Internet Explorer, you might have better luck using the Fetch API: Fetch API - Web APIs | MDN[^] This can help to clean up the code, especially when combined with async[^] and await[^]. Eg:
async function loadSomeData(){
const response = await fetch("/path/to/your/file.xml");
const text = await response.text();
const xml = new DOMParser().parseFromString(text, "text/xml");
myFunction(xml);
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks, it seems I made a "rookie" mistake... I'm in the habit of adding text strings to console.log outputs, since I tend to use so many to try and figure out what's going on in my code... So, instead of console.log(xml) I had written console.log("xml: " + xml) which is what caused the data to be "unreadable" in console. Using just the variable in console.log means that both fetch and XMLHttpRequest work equally well. In fact they were working anyway and the real root of the issue I'm tying to debug lies elsewhere... probably a subject for another post!
-
Thanks, it seems I made a "rookie" mistake... I'm in the habit of adding text strings to console.log outputs, since I tend to use so many to try and figure out what's going on in my code... So, instead of console.log(xml) I had written console.log("xml: " + xml) which is what caused the data to be "unreadable" in console. Using just the variable in console.log means that both fetch and XMLHttpRequest work equally well. In fact they were working anyway and the real root of the issue I'm tying to debug lies elsewhere... probably a subject for another post!
FYI, the console methods accept multiple parameters, which would avoid this problem. :)
console.log("xml:", xml);
There are a lot of other useful console features, most of which work in all modern browsers: console - Web APIs | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
