Мне нужна небольшая помощь в этом, я пытаюсь создать панель мониторинга с использованием Ajax, которая анализирует данные из файла XML и отображает их на таблице / панели мониторинга.Я хочу что-то вроде: если в данных XML есть изменения, это должно отражаться на веб-сайте тоже (в режиме реального времени) / без перезагрузки страницы.Я попробовал несколько советов, связанных с функцией setInterval (), но она просто дублирует весь результат и продолжает это делать ... ниже приведены сценарий ajax и xml, из которых я пытаюсь это сделать.Имя файла XMl - XMLFile.xml.Небольшое содержимое моего Xml находится в комментарии. Предположим, что если в первом атрибуте есть изменение, скажем, DNSStatus изменится с 'OK' на 'NOTOK', зеленая галочка должна измениться на красный крест, жить и это тоже без обновлениявся страница.
<script language="javascript" type="text/javascript">
var CheckImage = "<img src= 'images/check.png' height=''20 width='20'>";
var CrossImage = "<img src= 'images/cross.png' height=''20 width='20'>";
$.ajax({
type: 'GET',
url: 'XMLFile.xml',
dataType: 'xml',
cache: false,
success: function (xml) {
$(xml).find("URLs").each(function ()
{
var Sitename = $(this).find('ProdURL').attr('ProdHost')
var URLType = $(this).find('ProdURL').attr('URLType')
var DNSStatus = $(this).find('ProdURL').attr('DNSStatus')
var TargetStatus = $(this).find('ProdURL').attr('TargetStatus')
var TTL = $(this).find('ProdURL').attr('TTL')
var SSL = $(this).find('ProdURL').attr('SSL')
var Force = $(this).find('ProdURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('RootURL').attr('RootHost')
var URLType = $(this).find('RootURL').attr('URLType')
var DNSStatus = $(this).find('RootURL').attr('DNSStatus')
var TargetStatus = $(this).find('RootURL').attr('TargetStatus')
var TTL = $(this).find('RootURL').attr('TTL')
var SSL = $(this).find('RootURL').attr('SSL')
var Force = $(this).find('RootURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('WorkingURL').attr('WorkingHost')
var URLType = $(this).find('WorkingURL').attr('URLType')
var DNSStatus = $(this).find('WorkingURL').attr('DNSStatus')
var TargetStatus = $(this).find('WorkingURL').attr('TargetStatus')
var TTL = $(this).find('WorkingURL').attr('TTL')
var SSL = $(this).find('WorkingURL').attr('SSL')
var Force = $(this).find('WorkingURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('ModuleURL').attr('ModuleHost')
var URLType = $(this).find('ModuleURL').attr('URLType')
var DNSStatus = $(this).find('ModuleURL').attr('DNSStatus')
var TargetStatus = $(this).find('ModuleURL').attr('TargetStatus')
var TTL = $(this).find('ModuleURL').attr('TTL')
var SSL = $(this).find('ModuleURL').attr('SSL')
var Force = $(this).find('ModuleURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('Moduleurl').attr('ModuleHost')
var URLType = $(this).find('Moduleurl').attr('URLType')
var DNSStatus = $(this).find('Moduleurl').attr('DNSStatus')
var TargetStatus = $(this).find('Moduleurl').attr('TargetStatus')
var TTL = $(this).find('Moduleurl').attr('TTL')
var SSL = $(this).find('Moduleurl').attr('SSL')
var Force = $(this).find('Moduleurl').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('VanityURL').attr('VanityHost')
var URLType = $(this).find('VanityURL').attr('URLType')
var DNSStatus = $(this).find('VanityURL').attr('DNSStatus')
var TargetStatus = $(this).find('VanityURL').attr('TargetStatus')
var TTL = $(this).find('VanityURL').attr('TTL')
var SSL = $(this).find('VanityURL').attr('SSL')
var Force = $(this).find('VanityURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('Vanityurl').attr('VanityHost')
var URLType = $(this).find('Vanityurl').attr('URLType')
var DNSStatus = $(this).find('Vanityurl').attr('DNSStatus')
var TargetStatus = $(this).find('Vanityurl').attr('TargetStatus')
var TTL = $(this).find('Vanityurl').attr('TTL')
var SSL = $(this).find('Vanityurl').attr('SSL')
var Force = $(this).find('Vanityurl').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
}
});
function showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force)
{
var TargetStatusImage;
if (TargetStatus === "OK")
{
TargetStatusImage = CheckImage;
}
else
{
TargetStatusImage = CrossImage;
}
var DNSStatusImage;
if (DNSStatus === "OK")
{
DNSStatusImage = CheckImage;
}
else
{
DNSStatusImage = CrossImage;
}
var SSLImage;
if (SSL === "OK")
{
SSLImage = CheckImage;
}
else
{
SSLImage = CrossImage;
}
$('#demo tbody').append('<tr><td>' + Sitename + '</td><td>' + URLType + '</td><td>' + DNSStatusImage + '</td><td>' + TargetStatusImage + '</td><td>' + TTL + '</td><td>' + SSLImage + '</td><td>' + Force + '</td></tr>')
}
</script>
Пример входного файла
<?xml version="1.0" encoding="utf-8" ?>
<!--Website Status-->
<WebApplication>
<URLs>
<ProdURL ProdHost="www.wellington.ca" URLType="Prod" DNSStatus="OK" TargetStatus="OK" TTL="300" SSL="OK" Force="Yes" />
<RootURL RootHost="wellington.ca" URLType="Root" DNSStatus="OK" TargetStatus="NotOK" TTL="3583" SSL="OK" Force="Yes" />
<ModuleURL ModuleHost="calendar.wellington.ca" URLType="Module" DNSStatus="OK" TargetStatus="OK" TTL="297" SSL="OK" Force="Yes" />
</URLs>
</WebApplication>