Отображение XML-документов с использованием связывания данных
Аннотация: В этой лекции вы получите сведения о двух основных шагах при связывании данных. Также узнаете в подробностях, как привязать XML-документ к HTML-странице, как сцеплять элементы HTML с элементами XML, и как программировать Web-страницу с помощью сценариев, которые используют в качестве базового объекта программирования связанные данные.
Связывание данных является первым из методов отображения XML -документа с традиционной HTML -страницы, с которым вы познакомитесь. Отображение XML с HTML -страниц дает вам возможность воспользоваться как преимуществами хранения данных в XML -документе, с его гибким синтаксисом для структурирования данных и маркировки каждого фрагмента информации, так и имеющееся богатство форматирования и динамическое программирование HTML .
При связывании данных вы соединяете XML -документ с HTML -страницей, а затем встраиваете стандартные HTML -элементы, такие как SPAN или TABLE , в отдельные XML -элементы. HTML -элементы затем автоматически отображают содержимое XML -элементов, в которые они встроены.
Связывание данных, как и другие методы, о которых вы узнаете в этой лекции, работает только с XML -документом, который симметрично структурирован, например, как базы данных , – а именно, элементы документа могут быть интерпретированы как набор записей и полей. В простейшем случае такой документ состоит из корневого элемента, содержащего множество элементов одинакового типа (записи ), каждый из которых имеет одинаковый набор дочерних элементов, все из которых содержат символьные данные (поля). В качестве примера можно привести документ Inventory . xml , который представлен в Листинге 8.1. Элементы BOOK этого документа могут быть интерпретированы как записи, а элементы, вложенные в каждый элемент BOOK ( TITLE , AUTHOR и т.д.), могут быть интерпретированы как поля. Далее в этой лекции вы подробнее узнаете о специфических структурах документа, которые подходят для связывания данных. Если структура документа такова, что не допускает связывание данных, можно использовать метод создания сценариев, о котором пойдет речь в «Отображение XML-документов с использованием сценариев объектной модели документа» .
В этой лекции вы прежде всего получите сведения о двух основных шагах при связывании данных. Затем вы узнаете в подробностях, как привязать XML -документ к HTML -странице (первый основной шаг) и как сцеплять элементы HTML с элементами XML (второй основной шаг). Наконец, вы узнаете, как программировать Web-страницу с помощью сценариев, которые используют в качестве базового объекта программирования связанные данные (а именно, Data Source Object , или DSO ). Вы можете применять эти сценарии совместно со связыванием данных – либо независимо.
В «Отображение XML-документов с использованием сценариев объектной модели документа» вы познакомитесь с совершенно иным способом организации доступа управления и отображения XML -документа с HTML -страницы. Этот метод вы можете использовать для XML -документов любого типа, независимо от вида его логической структуры.
Ссылка. Для получения более подробной информации о связывании данных и объекте DSO , который лежит в основе этого метода, обратитесь к Web-странице Microsoft Developer Network (MSDN) по адресу: http://msdn.microsoft.com/xml/xmlguide/xmldso.asp.
Основные шаги
Вот два основных этапа при связывании данных:
- Установка связи XML-документа с HTML-страницей, на которой вы хотите отобразить данные XML. Этот шаг обычно реализуется включением HTML-элемента с именем XML в HTML-страницу. Например, следующий элемент на HTML-странице связывает XML-документ Book.xml со страницей:
Step-by-Step Guide to Linking XML Files and Crafting Interactive Hover Popups with HTML/CSS
XML, or Extensible Markup Language, is a popular format for storing and sharing data. XML files can be linked to HTML or other web-based technologies to create dynamic and interactive web pages. In this step-by-step guide, we will look at how to link XML files to HTML pages and create interactive hover popups using HTML and CSS.
Step 1: Create an XML file
The first step is to create an XML file that contains the data you want to display on your web page. You can use any text editor to create the file, but it’s important to follow the XML syntax rules. Here’s an example of a simple XML file:
Item 1 This is the description of item 1. Item 2 This is the description of item 2. Step 2: Link the XML file to HTML
The next step is to link the XML file to your HTML page using the XMLHttpRequest object. This object allows you to fetch data from a server and use it in your web page. Here’s an example of how to add the script to your HTML file:
In this example, we use the XMLHttpRequest object to fetch the data from the «data.xml» file. Once the data is loaded, we can use JavaScript to parse and display it on the web page.
Step 3: Parse the XML data
The next step is to parse the XML data and extract the information you need. You can use the DOM (Document Object Model) API to traverse the XML tree and extract the data. Here’s an example of how to parse the XML data and display it on the web page:
In this example, we use the getElementsByTagName method to retrieve all the "item" elements in the XML file. We then loop through the items and extract the name and description using the getElementsByTagName method again. Finally, we create an HTML string that contains the data and add it to the "items" div element using the innerHTML property.Step 4: Add the hover popup
The final step is to add the hover popup. This can be done using HTML and CSS. Here’s an example of how to create a basic hover popup:
.item < position: relative; >.item:hover .popup < display: block; >.popupItem 1This is the description of item 1.
In this example, we create a div element with the class «popup» that contains the content of the hover popup. We then position the div element using CSS and set the display property to «none» to hide it by default. We then use the :hover pseudo-class to display the popup when the user hovers over the «item» div element.
Conclusion
Linking XML files and crafting interactive hover popups with HTML and CSS can add a new layer of interactivity to your web pages. By following these simple steps, you can create dynamic and engaging web experiences for your users.