使用JavaScript阅读和显示服务器端XML文章

项目：基于XML的JavaScript代码

还有更多可用的属性和方法，使用这些属性和方法，您可以创建许多客户端应用程序。 将XML与JavaScript结合使用的主要优点是，编辑数据变得非常容易。 由于XML是结构化的，因此使内容管理非常容易。 一个示例是文件夹树菜单。 另一个是JavaScript代码。 您可以在DynamicDrive上找到完整的代码，作为此基于XML的JavaScript代码的示例。

我们将创建一个基于XML的JavaScript代码，可以显示任意数量的消息。 报价器从XML文件读取其内容（即报价器样式），要显示的文本以及该特定消息的链接。 我们将XML文件ticker_items.xml 。

XML文档的结构如下：

<?xml version="1.0"?>  

<ticker>  

  <tickerstyle  

    pause       = "true" / "false"       "true" for pause onMouseOver  

    timeout     = positive integer       The delay in seconds b/w messages  

    border      = positive integer       The border width of Ticker  

    bordercolor = #HexColor              The border color of Ticker  

    background  = #HexColor              The background color of Ticker  

    width       = positive integer       Ticker width  

    height      = positive integer       Ticker height  

  />  

  <tickerlinkstyle>  

    <mouseout  

      font       = "verdana,arial,helvetica..."     Ticker link font   

      color      = #HexColor                        Ticker link color  

      decoration = "none" / "underline" /  

                   "underline + overline"           Ticker link style  

      weight     = "normal" / "bold"                Ticker link weight  

      size       = <positive integer>pt             Ticker link size  

    />  

    <mouseover  

      font       = "verdana,arial,hevetica..."      Ticker link font  

      color      = #HexColor                        Ticker link color  

      decoration = "none" / "underline" /  

                   "underline + overline"           Ticker link style  

      weight     = "normal" / "bold"                Ticker link weight  

      size       = <positive integer>pt             Ticker link size  

    />  

  </tickerlinkstyle>  

  <tickeritem  

    URL       = A valid URL                         Ticker link URL  

    target    = "_blank" / "_top" / "_self" /  

                <any other valid target name>       Ticker link target  

  > Ticker item 1 text </tickeritem>  

  <tickeritem ...> Ticker item 2 text </tickeritem>  

  ...  

</ticker>

XML代码脚本

<script language="JavaScript1.2">  

// XML Ticker JavaScript  

// (c) 2002 Premshree Pillai  

// http://www.qiksearch.com  

// Use freely as long as all messages are as it is  

// Location of script:   

http://www.qiksearch.com/javascripts/xml/ticker.htm  

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  

function loadXML(xmlFile)  

{  

 xmlDoc.async="false";  

 xmlDoc.onreadystatechange=verify;  

 xmlDoc.load(xmlFile);  

 ticker=xmlDoc.documentElement;  

}  

function verify()  

{   

 if (xmlDoc.readyState != 4)  

 {   

  return false;   

 }  

}  

loadXML('ticker_items.xml');  

document.write('<style type="text/css">');  

document.write('.ticker_style{font-family:' +   

 ticker.childNodes(1).childNodes(0).getAttribute('font') + ';   

 font-size:' +   

 ticker.childNodes(1).childNodes(0).getAttribute('size')  

 + '; color:' +   

 ticker.childNodes(1).childNodes(0).getAttribute('color') +   

 '; font-weight:' +   

 ticker.childNodes(1).childNodes(0).getAttribute('weight') +  

 '; text-decoration:' +   

 ticker.childNodes(1).childNodes(0).getAttribute('decoration')   

 + '}');document.write('.ticker_style:hover{font-family:' +   

 ticker.childNodes(1).childNodes(1).getAttribute('font') +   

 '; font-size:' +   

 ticker.childNodes(1).childNodes(1).getAttribute('size')   

 + '; color:' +   

 ticker.childNodes(1).childNodes(1).getAttribute('color') +   

 '; font-weight:' +   

 ticker.childNodes(1).childNodes(1).getAttribute('weight') +   

 '; text-decoration:' +   

 ticker.childNodes(1).childNodes(1).getAttribute  

 ('decoration') + '}<br>');  

document.write('</style>');  

document.write('<table style="border:' +   

 ticker.childNodes(0).getAttribute('border')   

 + ' solid ' + ticker.childNodes(0).getAttribute('bordercolor') +   

 '; background:' + ticker.childNodes(0).getAttribute('background') +   

 '; width:' + ticker.childNodes(0).getAttribute('width') + '; height:'   

 + ticker.childNodes(0).getAttribute('height') + '">  

 <tr><td><div id="ticker_space"></div>  

 </td></tr></table>');  

var item_count=2;  

var timeOutVal=(ticker.childNodes(0).getAttribute('timeout'))*1000;  

var original_timeOutVal=timeOutVal;  

var isPauseContent;  

if(ticker.childNodes(0).getAttribute('pause')=="true")  

{  

 isPauseContent=' onmouseover="setDelay();" onmouseout="reset();"';  

}  

else  

{  

 isPauseContent='';  

}  

function setTicker()  

{  

 document.all.ticker_space.innerHTML='<center><a href="' +   

 ticker.childNodes(item_count).getAttribute('URL') + '" target="'   

 + ticker.childNodes(item_count).getAttribute('target') +   

 '" class="ticker_style"' + isPauseContent + '>' +    

 ticker.childNodes(item_count).firstChild.text + '</a></center>';  

 if(item_count==ticker.childNodes.length-1)  

 {  

  item_count=2;  

 }  

 else  

 {  

  item_count++;  

 }  

 setTimeout("setTicker()",timeOutVal);  

}  

function setDelay()  

{  

 timeOutVal=10000000000000;  

 item_count--;  

}  

function reset()  

{  

 timeOutVal=original_timeOutVal;  

 setTicker();  

}  

setTicker();  

</script>

正如您在源代码中看到的那样，股票代码显示为：

• 所有要显示的消息，
• 每个消息的链接，
• 每个网址的目标
• 股票代码静态样式，
• 翻转样式
• 边框宽度，颜色和背景，
• XML文件中消息之间的延迟等等。

• 因此，如果您想更改股票行情指示器的任何参数，您要做的就是在XML文件中进行必要的更改。

  此处显示的代码是一个基本的代码，它以XML文件中指定的间隔轮换消息。 您可以将许多效果添加到置顶栏中，例如“ Fading message”或“ Teletypewriter”。 您还可以添加功能来更改股票行情自动收录器的速度，或即时列出所有消息！

  转到页面： 1 | 2

  From: https://www.sitepoint.com/server-side-xml-javascript-2/