我有以下JavaScript从XML文件中引入一些数据：
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i])
}
catch(e){
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
var mygetrequest=new ajaxRequest()
if (mygetrequest.overrideMimeType)
mygetrequest.overrideMimeType('text/xml')
mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
var xmldata=mygetrequest.responseXML //retrieve result as an XML object
var rssentries=xmldata.getElementsByTagName("TUTORIAL")
var output='<ul>'
for (var i=0; i<rssentries.length; i++){
output+='<li>'
output+='<a href="'+rssentries[i].getElementsByTagName('LINK')[0].firstChild.nodeValue+'">'
output+=rssentries[i].getElementsByTagName('TITLE')[0].firstChild.nodeValue+'</a>'
output+='</li>'
}
output+='</ul>'
document.getElementById("result").innerHTML=output
}
else{
alert("An error has occured making the request")
}
}
}
mygetrequest.open("GET", "../xml/tutorials.xml", true)
mygetrequest.send(null)
这是XML文件：
<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="0.91">
<channel>
<title>Script Tutorials</title>
<link>http://www.script-tutorials.com</link>
<description>Web Topics Tutorials</description>
<language>en</language>
<TUTORIAL>
<DATE>19/08/2014</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>Sliding single-level menu</TITLE>
<DESCRIPTION>Menu is one of the important components of any site. Today it is difficult to find a website without the navigation menu. Today we have prepared a modern looking single-level menu. You might think again, but the menu looks really interesting, its feature is a sliding panel which highlights the active elements.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/sliding-single-level-menu/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>01/11/2013</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>Whirling CSS3 dropdown menu</TITLE>
<DESCRIPTION>Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination and you will create a truly new and unique design. In todays lesson, we will create a new CSS3 drop-down menu with new effect: when you hover on the upper menu items, the submenu items appear whirling. Just follow this tutorial to see the step by step process of building this menu.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/whirling-dropdown-menu/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>22/03/2012</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>Pure CSS3 LavaLamp Menu</TITLE>
<DESCRIPTION>I think that you have already seen animated menus with LavaLamp effect (based on jQuery plugin). Today I would like you to tell how to repeat same behavior only with CSS3 (without any javascript). I have to use CSS3 transitions in our menu (to animate elements). So, if you are ready, lets start.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/pure-css3-lavalamp-menu/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>13/03/2012</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>CSS3 vertical multicolor 3D menu</TITLE>
<DESCRIPTION>In our new tutorial well create new stylish vertical multicolor and crossbrowser CSS3 menu with 3D animation (I use css3 transition, perspective and transform properties) and pure css3 color switcher. This is UL-LI-based menu</DESCRIPTION>
<LINK>http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>13/02/2012</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>CSS3 multicolor menu</TITLE>
<DESCRIPTION>In our new tutorial well create a new nice multicolor and crossbrowser CSS3 menu with sliding (I use css3 transition) and color pure css3 color switcher. This is UL-LI-based menu.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/css3-multicolor-menu/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>03/01/2012</DATE>
<CATEGORY>HTML/CSS</CATEGORY>
<TITLE>CSS3 multilevel menu with transition and animation</TITLE>
<DESCRIPTION>In our new tutorial well create a new nice CSS3 menu with interesting behavior, where I use css3 transition and animation. This is UL-LI-based multilevel menu.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/css3-multilevel-menu-with-transition-and-animation/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>25/09/2013</DATE>
<CATEGORY>AJAX</CATEGORY>
<TITLE>PHP AJAX Calendar</TITLE>
<DESCRIPTION>The calendar is an integral part of many websites, frequently, this is one of numerous jQuery calendar plugins, but it can also be implemented using php. Today I will show you how to create a monthly calendar with the ability to scroll (left and right arrows) through the months using AJAX technology. Besides of ajax, this calendar has another important advantage, it is mobile-ready calendar with the responsive layout. Before we start writing code, I recommend that you look at our demo to see what were going to do.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/php-ajax-calendar/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>16/11/2011</DATE>
<CATEGORY>AJAX</CATEGORY>
<TITLE>Creating Your Own Ajax Poll System</TITLE>
<DESCRIPTION>Today I prepared new interesting tutorial we will creating own Poll system (AJAX) for your projects with PHP. Polls, answers and results I going to keep in single SQL table. When we will vote for one of variants jQuery will POST data, and then we will animate our results in realtime.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/creating-own-ajax-poll-system/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>11/10/2010</DATE>
<CATEGORY>AJAX</CATEGORY>
<TITLE>Autocomplete with PHP, jQuery, MySQL and XML</TITLE>
<DESCRIPTION>Today I have new article for PHP. I will tell you about implementation autocomplete for your sites. Data can be located in different sources directly in the JS code, in the database, and even in the XML file.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/autocomplete-with-php-jquery-mysql-and-xml/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>23/09/2010</DATE>
<CATEGORY>AJAX</CATEGORY>
<TITLE>Creating Ajax based file uploaders</TITLE>
<DESCRIPTION>How to upload files without refreshing whole page during submitting. Hope this will interesting to you. Lets check 2 methods using ordinary iframes and external library. Also I will using jQuery in work too (I like it).</DESCRIPTION>
<LINK>http://www.script-tutorials.com/ajax-file-upload-methods/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>05/09/2013</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>How to Create a Lightbox Ultra Using CSS and JavaScript</TITLE>
<DESCRIPTION>The creation of CSS animation has brought an amazing feature for the web designers and coders to tinker on to show their own creativity. With the advent of Lightbox, they have a better tool to use in creating their own images with 3D animation effects as well as background dimming capability that removes the distraction of viewing the image better. Combining Lightbox with CSS and JavaScript does offer web coders a valuable tool to enhance their techniques in creating great 3D animation with Lightbox using the following concepts to use in your own coding design projects</DESCRIPTION>
<LINK>http://www.script-tutorials.com/how-to-create-a-lightbox-ultra-using-css-and-javascript/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>23/10/2013</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>HTML5 Audio player with playlist</TITLE>
<DESCRIPTION>Many of you faced with the task of creating audio player at least once in your life. Quite often , you simply choose one of the available players, often it was the flash player. However, you may have already noticed, that these flash players do not work properly on mobile devices (iPhone / Android). Today I am going to tell you about how to create your own audio player (using HTML5 technology). This player consists of next elements: title, author, cover, basic controls (play / pause, rewind / forward) , two sliders (jQuery UI sliders): volume slider and and a song tracker, and even more: we will also have a playlist with a list of available songs.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/html5-audio-player-with-playlist/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>10/08/2012</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>How to display twitter posts using javascript</TITLE>
<DESCRIPTION>I think that displaying your Twitter posts on your website is a wonderful way to show people in-time news. This feature can be very useful for your project. Because it can can inspire your websites visitors to follow you on Twitter. I am going to create simple script which loads twitter posts and renders into HTML format using JsRender jQuery library. Everything is on the client side.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/how-to-display-twitter-posts-using-javascript/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>01/02/2012</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>Form Validation with Javascript and PHP</TITLE>
<DESCRIPTION>In this tutorial, we will show you how to create an attractive, pleasant to look form for your website, and then we will explain how to dynamically validate it using Javascript. The server-side validation with PHP will be covered too (to make everything 100% safe). This tutorial will help you to add more functionality to your forms that leads to better user experience and better website quality.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/form-validation-with-javascript-and-php/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>08/09/2010</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>Easily Animate Web Buttons/Objects using jQuery</TITLE>
<DESCRIPTION>Today I will tell you about animations in web using jQuery. As we know jQuery offer us several default methods of effects: fade(In/Out/To), hide, show, slide(Down/Toggle/Up), toggle. This is ok, but what if we need more? So, animation will help us! It will help to slide between 2 states using really good effects. By default, easing is optional param, so to use extra effects we will use additional jquery.easing.js library.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>01/06/2010</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>Import RSS Feeds using jFeed (jQuery)</TITLE>
<DESCRIPTION>This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported from yahoo, bbc etc. As we know, RSS feeds are usually used to trasnfer some news for people. Today Ill tell you about RSS feeds and show you how to make an own RSS aggregator. In the result, you will be able to display various RSS feeds on your website with nite and modern design.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/import-rss-feeds-using-jfeed-jquery/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>04/08/2010</DATE>
<CATEGORY>JavaScript</CATEGORY>
<TITLE>Importing multiple RSS feeds using newsWidget (jQuery)</TITLE>
<DESCRIPTION>Some times ago I told how to display rss feed at our website. But some times ago my friend ask me how to display in single box feeds from multiple sources. I decided to investigate it and located NewsWidget library. Lets check its possibilities.
</DESCRIPTION>
<LINK>http://www.script-tutorials.com/importing-multiple-rss-feeds-using-newswidget-jquery/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>27/11/2014</DATE>
<CATEGORY>Design</CATEGORY>
<TITLE>Visual structure A definitive guide for web UI designers</TITLE>
<DESCRIPTION>Creativity works wonders when it comes to designing the UI(user interface) for a website or web application. Right from changing the composition, color and size to everything else that forms a crucial component of a web design UI; you can perform all this and much more by revealing the creative side of your personality. Visual hierarchy is something that can give the much needed push to your web UI designing initiative. By including the right type of visual elements into your web design, you can easily grab the attention of targeted audience within a very small period of time. Keep on reading this blog to find more about creating a visual structure of your web UI(user interface).</DESCRIPTION>
<LINK>http://www.script-tutorials.com/visual-structure-a-definitive-guide-for-web-ui-designers/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>08/07/2014</DATE>
<CATEGORY>Design</CATEGORY>
<TITLE>How to design the site?</TITLE>
<DESCRIPTION>In this article we will look at such aspects of website designing as: choosing an editor for preparing the site layout, defining sizes of the site, how to save sources, how to work with text and more. This article is mainly targeted for beginning web designers.</DESCRIPTION>
<LINK>http://www.script-tutorials.com/how-to-design-the-site/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>14/05/2014</DATE>
<CATEGORY>Design</CATEGORY>
<TITLE>20 Tips and Examples for Creating the Perfect Design Portfolio</TITLE>
<DESCRIPTION>Creating and managing a portfolio is the best way to market yourself. It is a reflection of the work you do and its essential for you to attract clients. As a designer, you must have a portfolio. If so, you need to ask yourself a few questions before you can actually begin to develop it further. How much time do you allow yourself in dedication to improving your portfolio? Do you think you have your best stuff on it? One thing is for sure it does not matter whether your portfolio exists physically or digitally, the point is to keep improving i</DESCRIPTION>
<LINK>http://www.script-tutorials.com/20-tips-and-examples-for-creating-the-perfect-design-portfolio/</LINK>
</TUTORIAL>
<TUTORIAL>
<DATE>25/06/2014</DATE>
<CATEGORY>Design</CATEGORY>
<TITLE>What is a color model?</TITLE>
<DESCRIPTION>Probably everyone who is engaged in advertising, had to hear such phrases as light model, print file should be in CMYK, and for posting on the site RGB. Some may even know about the existence of such color models as GreyScale, LAB, HSB and HLS. But what exactly are these Color models? How is CMYK color model different from RGB or LAB?</DESCRIPTION>
<LINK>http://www.script-tutorials.com/what-is-a-color-model/</LINK>
</TUTORIAL>
</channel>
</rss>
它输出到HTML文件如下：
http://www.imagebam.com/image/2787cc369647181
但是，我也想在每个链接....日期，类别和描述。每个教程之间都有换行符。
有什么想法吗？
我知道如何关闭列表样式...但我不需要其他XML数据吗？
output+=rssentries[i].getElementsByTagName('DATE')[0].firstChild.nodeValue+
output+=rssentries[i].getElementsByTagName('CATEGORY')[0].firstChild.nodeValue+
output+=rssentries[i].getElementsByTagName('DESCRIPTION')[0].firstChild.nodeValue+
我尝试过使用这些，但我无法使用它们。
我希望它看起来像这样：
滑动单级菜单
HTML / CSS
19/08/2014
菜单是任何网站的重要组成部分之一。今天很难找到没有导航菜单的网站。今天我们准备了一个现代化的单层菜单。您可能会再想一想，但菜单看起来非常有趣，它的功能是一个滑动面板，突出显示活动元素。
答案 0 :(得分：0)
如果您想在<li> <ul>之间创建 组之间的分隔，可以在组之间插入<hr>或output+='<li>'
output+='<a href="'+rssentries[i].getElementsByTagName('LINK')[0].firstChild.nodeValue+'">'
output+=rssentries[i].getElementsByTagName('TITLE')[0].firstChild.nodeValue+'</a>'
output+='</li>'
output+='<hr>'
output+='<li>< ></li>'
或两者
LIST-STYLE-TYPE: none;因此，如果您尝试使第二行看起来像第一行的扩展，您可以使用<ul>
<li> Line 1 </li>
<li style="LIST-STYLE-TYPE: none;" > Line 2 </li>
<hr>
<li style="LIST-STYLE-TYPE: none;"> </>
<li> Line 1 </li>
<li style="LIST-STYLE-TYPE: none;" > Line 2 </li>
<hr>
<li style="LIST-STYLE-TYPE: none;"> </>
</ul>
关闭子弹，所以整个效果将如下所示：
{{1}}