HTML and CSS Reference
In-Depth Information
Figure 18.14 A text file is retrieved and it contents displayed in a div container.
18.4.2 Using Ajax to Retrieve XML from a File
XML is the Extensible Markup Language. Although similar in structure to HTML, XML
was designed to transport and store data, whereas HTML was designed to describe the lay-
out and looks of the data. With XML you create markup that defines the structure of a doc-
ument, but instead of having predefined tags as with HTML, you make your own. The
XML tree looks similar to the HTML upside-down document tree, starting with a root ele-
ment at the top and branching down to parents, attributes, children, and so on. XML has
rules, very XML-specific syntax rules on how to create a “well-formed” document. It is not
hard to learn, but if you are unfamiliar with XML, go to the W3C schools Web site where
you will find an excellent tutorial at
XML data is often stored in external files as plain text. The data in the XML files can be
easily exchanged between different programs, applications, and computers. In this chapter
we are using Ajax to exchange data between a client and server. In the previous example
the server returned a string of text from a simple text file. In this example we will use Ajax
to get data from an XML file as an object and use the XML DOM to parse and display the
data. And finally, at the end of this chapter, we will use an easier technology, called JSON,
to make exchanging and parsing data a little simpler. In fact JSON is said to be rapidly
replacing XML because of its easy lightweight data-interchange format.
The XML file for the following example, called “bookstore.xml”, is found in Example
18.10. 3 If you are not familiar with XML, this file is a good example of how the markup
is structured. The Ajax program (Example 18.11) makes a request to the server to get
the XML file. The server returns an XML object, and the rest of the program uses DOM
methods and properties to parse out the data from the XML object and to create the ele-
ments and text nodes that will be placed in an HTML div container.
3. This example uses an XML file slightly modified from one found in the W3Schools XML tutorial.
Search WWH ::

Custom Search