Как разобрать XML для браузера Chrome с помощью javascript

Как использовать JS для анализа xml в браузере Chrome и вывода в поле формы html? Мой скрипт работает на MS т.е. XML отображается в виде распечатанного исходного файла «http_myxml.xml». вывод html из JS в "document.display"

<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</cx_date>
<ev1_sup>1.22</ev1_sup>
</record>

var xml_data_URL = "http_myxml.xml";
var Polling;
var Ptr411Name = "c_date";
var Ptr52901Name = "ev1_sup";

var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = true;
 
function GetData()
{
  if (xml.readyState==4)  // Is the load completed?
  {
    xml.load(xml_data_URL);
    Polling = true; 
  }
  setTimeout("GetData()",16000);
}
 
function DisplayData()
{
  var xmlElements;
  var svgElement;
  // Check for XML file update 
  if (!Polling) return;
       
  if (xml.readyState==4)  // Is the load completed?
  {
    Polling = false;
  
    var err = xml.parseError; 
    if (err.errorCode == 0)
    { 
    
    // update form fields   
xmlElements = xml.getElementsByTagName(Ptr411Name);
document.display.c_date.value=xmlElements.item(0).text;

xmlElements = xml.getElementsByTagName(Ptr52901Name);
document.display.ev1_sup.value=xmlElements.item(0).text;

if (xmlElements.item(0).text == 0)    
      window.status = "x";
    }
    else
    {
      alert("advice: xml data load timed out: "+err.reason);
    }
  }
  setTimeout("DisplayData()",8000);
}

<html>
<form action = "" name = "display" method = "post"><input class = "o" size = "26" readonly name = "c_date"><input class = "o" size = "26" readonly name = "ev1_sup"></form>
</html>

Этот код работает, т.е. браузер отображает данные xmlelement c_date и ev1_sup в соответствующих полях html-формы. Как заставить это работать для Chrome?

Не могли бы вы добавить некоторые из ваших XML к вашему вопросу.

chrwahl 20.11.2022 19:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пример 1

В этом примере я загружаю XML-документ:

<?xml version = "1.0" encoding = "UTF-8"?>
<fields>
  <field type = "text" name = "title"/>
  <field type = "text" name = "description"/>
</fields>

Для загрузки XML-документа я использую fetch API. Например, я заменил реальный URL-адрес URL-адресом данных, чтобы показать, что это работает здесь, на ST.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGZpZWxkcz4KPGZpZWxkIHR5cGU9InRleHQiIG5hbWU9InRpdGxlIi8+CjxmaWVsZCB0eXBlPSJ0ZXh0IiBuYW1lPSJkZXNjcmlwdGlvbiIvPgo8L2ZpZWxkcz4=';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    [...xmlDoc.documentElement.children].forEach(node => {
      let type = node.getAttribute('typw');
      let name = node.getAttribute('name');
      document.forms.form01.innerHTML += `<label>${name}: <input type = "${type}"
        name = "${name}"></label>`;
    });
  });
});
<form name = "form01"></form>

Пример 2

На основе XML-документа:

<?xml version = "1.0" encoding = "UTF-8"?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>

Следующий пример — зацикливание дочерних элементов XML-документа. Для каждого элемента он выбирает элемент формы с тем же именем и вставляет textContent.

var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHJlY29yZD4KPGNfZGF0ZT4yMDIyLTExLTIxIDA3OjIyOjEwPC9jX2RhdGU+CjxldjFfc3VwPjEuMjI8L2V2MV9zdXA+CjwvcmVjb3JkPg==';

document.addEventListener('DOMContentLoaded', e => {
  fetch(xml_data_URL).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, "application/xml");
    
    [...xmlDoc.documentElement.children].forEach(node => {
      document.forms.display[node.nodeName].value = node.textContent;
    });
  });
});
<form action = "" name = "display" method = "post">
  <input type = "text" class = "o" size = "26" readonly name = "c_date">
  <input type = "text" class = "o" size = "26" readonly name = "ev1_sup">
</form>

Спасибо, чрваль. Я включил свой образец xml. мой сценарий устанавливает переменные для значений, заключенных в теги элементов xml, и значения затем отображаются как значения в элементах ввода объекта формы html с именем «отображение» (document.display). Кажется, я не могу заставить его работать так, как мне нужно, однако ваш скрипт отлично работает на моем сервере.

Lars Johansen 21.11.2022 20:08

@LarsJohansen Я обновил свой ответ вторым примером, в котором я использую ваш XML-документ.

chrwahl 21.11.2022 20:34

Еще раз спасибо chrwahl. Фактическое получение данных xml из удаленной системы занимает несколько секунд, поэтому время ожидания установлено на 16000. Я не могу заставить интервал времени ожидания работать с вашим сценарием.

Lars Johansen 21.11.2022 21:06

Другие вопросы по теме