Introduction to XML technology. Explore the possibility of representing XML documents in HTML. Usage JavaScript scripts for navigating through an XML table and organizing data searches by condition. Recommended reading.
Brief theoretical information
XML (eXtensible Markup Language) technology was created in the late 90s of the last century. The main advantages of XML text:
□ has a database structure, accessible to computers and humans;
Let's consider next example text database written in XML:
Three men in the boat
Jerom-K-Jerom
12000
Notre Domme de Paris
V.Hugo
15000
A War and Peace
L. Tolstoy
16500
Angelika - the misstress of ghosts A and S. Gallen
9000
This is an example of a correctly composed XML document, whose elements are tags , , , , ,
Elements in the text are arranged like a tree with a head element. Each element has a closing element associated with it. The scope of each element is limited by the opening and closing elements. It is not allowed to cross the scope of elements, i.e. The areas are either nested within one another or do not intersect at all. An element whose scope contains the scope of all other elements is called the root element. An XML document can be thought of as a text database. The value of an element is the information placed between tags defining this element. So, the value of the first element is the string
Three men in the boat.
Type this text in any editor and save it as simple text file with an xml extension - for example, name this file textbd.xml. You can view this file with a browser Internet Explorer the same way you viewed HTML files. If there is an error, the XML interpreter will display detailed information about the location and essence of the error.
Now we will show how to convert this output into a tabular one. HTML form, which is carried out using HTML. Let's create the next one HTML file(Listing 2.12).
Listing 2.12. HTML document to display the XML table
The Book Title
The author
The price
Let's save this HTML file as textbd.html. Now let's open it with a browser. The result will be like this (Fig. 2.9).
Rice. 2.9. Displaying an XML document in an HTML document
To connect the previously created XML file and link it to the table, tags are used:
To display data in a table, tags for cells are used in the following form:
The tag is used as a container. The DATAFLD parameter contains the value of the XML element to be displayed.
When working with databases, one of the main issues is finding the required information. In this work we will carry out such a search using JavaScript tools. Since the database can be quite large, it is displayed entirely in a table HTML document very ineffective. Therefore, we will not display the entire table, but, say, only two records. In addition, we will add buttons to scroll through the database. To do this, let's change our HTML document as follows (Listing 2.13).
Listing2.13. Modified HTML document to display an XML table
Our first lesson in xml-technology
The Book Title
The author
The price
>
<
The > term is used to draw a right arrow, the &it term is used to draw a left arrow. At the same time, we indicate that only two records need to be displayed in the table:
Now let's create functional content for our website. Its meaning will be that we will enter the title of the book in its entirety or some of its fragments, and when the button is pressed, the system should display other details of the book: the author and the price, or report that the book was not found. Now you need to use JavaScript. Actually, only a few commands are required.
□ getElementByTagName("title").item(i).text;
This command returns the value of the element from the XML file that is the i-th element in the order of listing these elements.
□ getElementsByTagName("title").length;
This command returns the total number of elements from the XM L-document.
□ String.indexOf(stringl);
This command returns the position from which stringi is included in string string or -i if there are no occurrences.
Now let's show the extended HTML code for this task (Listing 2.14).
Listing2.14. Enhanced HTML Document to Display XML Table
function showelement()
// Connecting an XML document:
var odoc=new ActiveXObject("Microsoft.XMLDOM");
odoc.async=false; // Pause the program,
// until loading is completed odoc.load("textbd.xml"); // Load an XML document into memory var stringl=document.myform.mytext.value; z=odoc.getElementsByTagName("title").length;// Getting
