Jump to content

XML file wont parse - synchronous XMLHttpRequest depreciated


mrallaire

Recommended Posts

Hello,

My HTML, JavaScript, and XML accounting system no longer fully works in Firefox, but does work in Google Chrome. Inspecting the page in Firefox, I see the following error message under the Console tab:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/

Looks to me that synchronous use of XMLHttpRequest has been deprecated, because it sometimes freezes the page while waiting for a response. The only time I used XMLHttpRequest in my JavaScript program is when parsing the XML file. I am parsing the XML file exactly the same way as presently outlined in the W3School XML Tutorial found here:

https://www.w3schools.com/xml/tryit.asp?filename=tryxml_parsertest

The tutorial does uses Synchronous XMLHttpRequest, as set by 'false' in the line xmlhttp.open("GET", "note.xml", false);. My notes say that asynchronized loading is off to prevent the script from running before the document is fully loaded. I tried to change 'false' to 'true', but that doesn't work either.

I am not entirely sure if this is my problem because the W3C Tutorial example still works in Firefox. However the Firefox Console does show the same 'synchronous use of XMLHttpRequest has been deprecated' warning. It also shows a bunch of other warnings.

Is my understanding of the problem correct?

If so, can you please show how the W3School XML parsing code should now be written? I pasted a copy of the original tutorial code below for convenience:

<!DOCTYPE html>
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>
</div>

<script>
var xmlhttp, xmlDoc;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "note.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

The first 5 lines of the script deal with parsing the XML file, the rest of the script inserts the information from the XML file into the webpage.

Thank-you kindly for any help!!!

 

Link to comment
Share on other sites

You have to do more than just change the value from false to true.

With asynchronous requests, the code which uses the response data needs to go in a callback function. This function needs to run when the onload event fires. W3Schools has an asynchronous example with a callback function here: https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_get

If you're running code from your filesystem, Firefox will block all AJAX requests for security. AJAX needs to be tested on a web server.

Link to comment
Share on other sites

Chrome probably also has this security feature built in. All browsers should, though I haven't tested them all to make sure.

If you want to test AJAX you need to set up a web server, it doesn't have to be on a web host, you can create a small testing environment on your own computer by using XAMPP.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...