Load an XML file from the local server asynchronously on the Chrome web browser

Question

Load an XML file from the local server asynchronously on the Chrome web browser

Attempting to load a local XML/XSL file into a variable for editing seems to be causing an issue. The code provided functions properly in IE and Chrome, however, Chrome displays a warning due to the synchronous nature of the call.

function loadXMLDoc(fileName){ 
   if (window.ActiveXObject){
      xhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } else {
      xhttp = new XMLHttpRequest();
   }
  xhttp.open("GET", fileName, false); // false is synchronous 
  xhttp.send();
  var xml = xhttp.responseXML;
  return xml;  
}

When attempting to make the call asynchronous by changing it to:

xhttp.open("GET", fileName, true);

or keeping the default:

xhttp.open("GET", fileName);

the functionality breaks in Chrome and throws an error in the console.

The original code functions in IE but faces issues in Chrome.

A solution is needed to either fix this function or create a different method that can asynchronously load a local XML/XSL file and store it in a variable specifically for Chrome.

javascript ajax xml xslt

Answer 1

Answer №1

If you need to load XML for XSLT processing and want to ensure compatibility with IE, you may have to set

xhttp.responseType = 'msxml-document'

.

When it comes to handling asynchronous processing and "returning" the document, you can consider using promises like this:

  function fetchDocument(url) {
       return new Promise(function(resolve) {
         var request = new XMLHttpRequest();
         request.open("GET", url);
         if (typeof XSLTProcessor === 'undefined') {
           try {
             request.responseType = 'msxml-document';
           }
           catch (error) {}
         }
         request.onload = function() {
           resolve(this.responseXML)
         }
         request.send();
       });
  }

You can then use it like:

fetchDocument('sample.xml').then(function(doc) { ... })

, either for XML or XSLT.

Promise.all([fetchDocument(xmlUrl), fetchDocument(xslUrl)]).then(function(result) {
      var xmlDoc = result[0];
      var xslDoc = result[1];

Promises are not directly supported in IE but can be added through a polyfill.

Answer 2

If you need to load XML for XSLT processing and want to ensure compatibility with IE, you may have to set

xhttp.responseType = 'msxml-document'

.

When it comes to handling asynchronous processing and "returning" the document, you can consider using promises like this:

  function fetchDocument(url) {
       return new Promise(function(resolve) {
         var request = new XMLHttpRequest();
         request.open("GET", url);
         if (typeof XSLTProcessor === 'undefined') {
           try {
             request.responseType = 'msxml-document';
           }
           catch (error) {}
         }
         request.onload = function() {
           resolve(this.responseXML)
         }
         request.send();
       });
  }

You can then use it like:

fetchDocument('sample.xml').then(function(doc) { ... })

, either for XML or XSLT.

Promise.all([fetchDocument(xmlUrl), fetchDocument(xslUrl)]).then(function(result) {
      var xmlDoc = result[0];
      var xslDoc = result[1];

Promises are not directly supported in IE but can be added through a polyfill.

Load an XML file from the local server asynchronously on the Chrome web browser

Answer №1

Similar questions

Navigating through a nested array within a JSON object using Vue.js - a guide

Using npm as a build tool to merge files together

What is the best way to implement rate limiting or throttling on a Strapi API?

What's the best way to inject style into the head tag following the AJAX loading of a PartialView in an ASP .NET MVC project?

When attempting to access endpoints from other computers, the connection to Express.js is being refused

Blending ASP.NET Core 2.0 Razor with Angular 4 for a Dynamic Web Experience

Opening a Text File via an ASPX Web Page

How to create a fresh factory instance in Angular Js

Retrieving JSON information from a PHP script with AJAX

Error in React Component Library: The identifier 'Template' was not expected. Instead, '}' is expected to end an object literal

How can the value of a number in Angular be changed without altering its original value?

Successive vows

Using jQuery to include a sub-object in the "data" object for each AJAX request made on the webpage

Nginx deployment of React causes issues with AJAX Axios functionality

Why do all the select boxes require two clicks to open the drop-down menu when the function is activated?

Django Vue3 encounters access-control-allow-origin restriction

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

Embed a Vaadin component within an element dynamically generated by a Javascript component

The dynamic rendering of datasets is not supported in Material UI's <TableCell> component

Learn how to smooth out a path in d3.js before removing it during the exit transition