HOME

XML Tutorial

picture

XML stands for EXtensible Markup Language.

XML was designed to transport and store data.

In this tutorial you will learn about XML, and the difference between XML and HTML.

XML is important to know, and very easy to learn.

Start learning XML!

Table of Contents

Introduction to XML
What is XML, and how does it differ from HTML?

How XML can be used
Some of the different ways XML can be used.

XML Tree
How an XML document forms a logical tree structure.

XML Syntax
The logical and very simple syntax rules of XML.

XML Elements
XML Elements, naming rules, and their parent and child relationships.

XML Attributes
How attributes can be used to provide additional information about elements.

XML Validation
The difference between a well-formed and a valid XML document, and how to specify the structure of an XML document.

XML Validator
A simple on-line tool for syntax-checking (validating) XML.

Viewing XML in Browsers
How to view XML files with your browser.

Displaying XML with CSS
How to use CSS to display an XML file.

Displaying XML with XSLT
How to use XSLT to display an XML file.

XML Parser
How to use your browser to read, update, create, and manipulate XML documents.

XML Browser support
About the XML-support in the most common browsers.

XML to HTML
How to display XML data inside HTML documents.

XML in Real Life
Real-life examples of how XML can be used.

XML Advanced

XML Namespaces
How XML namespaces can be used to avoid element name conflicts.

XML CDATA
How store invalid XML data inside a valid XML document.

XML Encoding
How to use different character sets in your XML documents.

XML Server
How to output XML from the server.

XML Applications
How to use XML data and JavaScript to create a complete HTML application.

XML HTTP Requests
How to update a page with data from a server without reloading the page (AJAX).

XML Save Data
Usually data is stored in databases. However, we can also store data in XML files.

XML Don't
This chapter describes some technologies you should try to avoid when using XML.

XML Technologies
The most common XML-related languages.

XML Editors
Why you should use an XML editor when you edit your XML documents.

XML Summary
This chapter contains a summary on what you have learned in this tutorial and a recommendation on what to do next.

Latest Opera Releases

Latest Opera Releases

Opera 9 (for Windows, Mac, Linux, FreeBSD, and Solaris) - Released in June 2006.

Opera 8.5 (for Windows, Mac, and Linux) - Released in September 2005.

Opera 8 (for Windows) - Released in April 2005.

About Opera

Opera Opera started out as a research project in Norway's telecom company, Telenor, in 1994, and branched out into an independent development company named Opera Software ASA in 1995.

Opera Software ASA develops the Opera Web browser and is an industry leader in the development of Web browsers for the desktop and device markets.

The Opera browser (known as "the third browser", after Internet Explorer and Netscape) has received international acclaim from end-users and the industry press for being faster, smaller and more standards-compliant than other browsers.

Is It Free?

Yes, the Opera browser is free! The earlier banner ads and the licensing fee are removed!!

Web Standard Compliant

When you make your Web site work in Opera, you can be certain that it is open and accessible. Simply write your pages in standards-compliant code, and your site will work in all major browsers and for all major platforms and operating systems.

Opera supports all major Web standards currently in use, including CSS 2.1, HTML 4.01, XHTML1.1, HTTP1.1, DOM 2, ECMAScript (JavaScript), PNG, WML 2.0, SVG 1.1 tiny, Unicode, and the Unicode Bidirectional Algorithm.

Opera Features

Opera has automatic Popup Blocking. This is fine for stopping annoying popup ads, but not so good for sites using popup windows in a good way.

Tabbed Browsing is a modern and time saving feature. It makes it possible to view many web pages in one browser window.

Transfers Panel is is Opera's download manager, with quick access to ongoing and recently finished downloads.

Opera's user interface is translated into multiple languages, and the language can be changed on the fly.

Opera has Customizable Toolbars, allowing the users to add and remove items as well as create new toolbars.

By choosing between different Skins, the users can change the look and feel of Opera.

Opera has direct access to Google's "related pages" feature, available from the "Navigation" menu.

Double clicking on a word on a page will pop up a menu that provides options related to the selected text, such as a Web, dictionary or encyclopedia search.

Opera provides Web authors with immediate access to Page Validation, thus encouraging good practices on the Web.

More about Opera

Opera Software ASA has been a privately held company - headquartered in Oslo, Norway - until they went public in March 2004.

More information and Opera downloads is available at: www.opera.com.

Firefox Browser

Firefox is a free open-source web browser developed by Mozilla.

What is Firefox?

Firefox Firefox is a free, open-source web browser for Windows, Linux and Mac. It is small and fast and offers many new features like popup blocking and tabbed browsing.

Firefox is based on the Mozilla code, and is one of the most standards-compliant browsers available.

Firefox is available for Windows 98, Windows 2000, Windows XP, Mac OS X, and Linux.

What is Mozilla?

Mozilla is an open-source web development project.

The Mozilla Application Suite (also known as SeaMonkey) is a complete set of web applications; a browser, a mail client, a news client, a chat client and more.

Firefox is just a browser. With Firefox you cannot chat or read emails or news. This makes it smaller, faster and easier to use (but makes chat, email and news harder to use?).

Lamp You can read about Mozilla in the previous chapter.

Firefox And Mozilla

Firefox was previously called Mozilla Firebird (which was previously called Phoenix, which was previously called Mozilla).

The confusing name changes have something to do with legal issues (I think). You can read more about the Mozilla name changes in the previous chapter.

It is expected that Firefox will be used as the default browser in a future version of the Mozilla Suite.

Firefox Features

Firefox has automatic Popup Blocking. This if fine for stopping annoying popup ads, but not so good for sites using popup windows in a good way.

Tabbed Browsing is a modern and time saving feature. It makes it possible to view many web pages in one browser window.

Google Search with auto complete is built into Firefox's tool bar.

Keywords for bookmarks with quick searches (e.g., type "goo xml tutorial" into the location bar and get a Google search page on "xml tutorial" in one step).

Dictionary Tooltip - double-click any word to see its definition.

Firefox has Improved Security. It is not integrated with the operating system and does not support ActiveX controls and VBScripts (features known to have security holes).

A built-in modern Download Manager downloads files in the background to the desktop.

Firefox has Customizable Toolbars, allowing users to add and remove items as well as create new toolbars.

With the Theme Manager, the users can change the look and feel of Firefox.

Firefox keeps itself up-to-date. Smart Update searches for updates in the background and informs the user about available updates.

The Mozilla Project

Mozilla is a framework for building web applications.

What is Mozilla?

Mozilla Mozilla is not a web browser.

Mozilla is a framework for building web applications using web standards like CSS, XML, RDF.

Mozilla code is used in Netscape 6 and 7, and in other web browsers such as Firefox and Camino, chat clients, news clients, email clients, games, and other types of web applications for Windows, Linux, and Mac.

Mozilla is an open-source web development project developing the program code used in the Mozilla Application Suite (also known as SeaMonkey).

The Mozilla Application Suite is a complete set of web applications (browser, email client, news client, chat client and more).

Browsers based on Mozilla code (Mozilla, Firefox, & Camino) is the second largest browser family on the Internet today, representing about 30% of the Internet community. Mozilla browsers are known to have very good web standards support.

The Mozilla Project

The Mozilla Project was created to continue developing Netscape as an open source project.

In November 1998 AOL (America Online) purchased Netscape.

The development of the core engine for Netscape was moved to an open source project called "The Mozilla Project".

The project was renamed SeaMonkey after April 2006 with the Mozilla Foundations main intention of phasing out the Mozilla suite and shifting it's main focus to the Firefox/Thunderbird/SeaMonkey projects

The Mozilla Foundation

The Mozilla Foundation was created in July 2003 when AOL laid off the employees involved in the Mozilla open-source browser team.

Mozilla Foundation's Roadmap

The Mozilla project decided to make a new roadmap for the development. Some of the points in the new roadmap is listed below:

  • Focus on standalone applications (the FireFox browser, the Thunderbird mail/news application, and standalone composer)
  • Make Firefox and Thunderbird the premier products of Mozilla
  • Maintain the SeaMonkey (current Mozilla browser) application suite for enterprises and organizations with large Mozilla deployments
  • Maintain the Mozilla 1.4 branch as the "distributor/vendor" branch used by organizations with year-long lead times
  • Fix crucial Gecko layout architecture bugs. All Mozilla applications benefit from such Gecko improvements
  • Prefer quality over quantity. Do less, but better!

Products of Mozilla

  • Mozilla - the application suite
  • Firefox - a standalone browser
  • Thunderbird - an email and newsgroup client
  • Camino - a web browser for Mac
  • Composer - a web page editor

Versions for Windows, Linux, and Mac can be downloaded from:

http://www.mozilla.org

Confusing Mozilla Names

The very first Netscape browser had a code engine called Mozilla. Netscape 1.0 was powered with a code engine called Mozilla 1.0. Netscape 2.0 used Mozilla 2.0, Netscape 3.0 used Mozilla 3.0, and Netscape 4.0 used Mozilla 4.0.

In 1998 the source code of Netscape 4 was made public - and the development of Netscape 5 was made an open source project.

The open source project for creating Netscape 5 was called "The Mozilla Project". Strangely enough, the code engine for the Mozilla Project was called Gecko.

Unfortunately it took Netscape more than three and a half years after the release of 4.0, to produce its next generation browser. This delay destroyed Netscape's possibilities to remain a credible alternative to Microsoft's Internet Explorer. Microsoft released IE 5.0 just after the Mozilla project had started, and was ready with IE 6.0 before Netscape managed to release a workable browser.

Netscape 6.0 based on Gecko M18 (Milestone 18) was released in November 2000.

After the release of Netscape 6.0, the Mozilla Project started to work on Netscape 7 based on an engine called Mozilla 1.0 !!.

Netscape 6 and 7 are built on Mozilla and Netscape and Mozilla are nearly an identical suite of applications.

The current version of Netscape 7 claims to have a code engine called Gecko 1.0 !!

At the moment the Mozilla Project is developing a new web browser called Firefox. Firefox was previously called Mozilla Firebird (which was previously called Phoenix, which claimed to be a new version of Mozilla).

Confused? I am.

The confusing name changes must have something to do with legal issues (I think).

Mozilla Releases

The Mozilla Foundation has released the following versions of Mozilla:

Mozilla 1.8 Alpha 5 November 22, 2004

Mozilla 1.8 Alpha 4 September 28, 2004

Mozilla 1.8 Alpha 3 August 18, 2004

Mozilla 1.8 Alpha 2 July 14, 2004

Mozilla 1.8 Alpha 1 May 20, 2004

Mozilla 1.7.3 September 13, 2004

Mozilla 1.7.2 August 4, 2004

Mozilla 1.7.1 July 8, 2004

Mozilla 1.7 June 17, 2004

Mozilla 1.7 RC3 June 8, 2004

Mozilla 1.7 RC2 May 17, 2004

Mozilla 1.7 RC1 April 21, 2004

Mozilla 1.7 Beta March 18, 2004

Mozilla 1.7 Alpha February 23, 2004

Mozilla 1.6 January 15, 2004

Mozilla 1.6 Beta December 9, 2003

Mozilla 1.6 Alpha October 31, 2003

Mozilla 1.5.1 November 26, 2003

Mozilla 1.5 October 15, 2003

Mozilla 1.5 RC2 September 26, 2003

Mozilla 1.5 RC1 September 17, 2003

Mozilla 1.5 Beta August 27, 2003

Mozilla 1.5 Alpha July 22, 2003

Mozilla 1.4.1 October 10, 2003

Mozilla 1.4 June 30, 2003

Source: http://www.mozilla.org/releases/

Netscape Browser

Netscape is Officially Dead

After 10 years of support, on December 28th 2007, AOL announced that the Netscape browser will be taken off life from February 1st 2008.

Source:
http://blog.netscape.com/2007/12/28/end-of-support-for-netscape

"AOL's focus on transitioning to an ad-supported Web business leaves little room for the size of investment needed to get the Netscape browser to a point many of its fans expect it to be." Netscape development director Tom Drapeau wrote.

AOL acquired Netscape in a $4.2 billion deal in 1998. In 2003 the Mozilla Foundation separated from Netscape and AOL with its former parent providing a $2 million dollar parting gift.

Netscape had been based on Mozilla code since Netscape version 6 appeared in 2000.

Netscape Navigator 9

Netscape Navigator 9 (Beta 1) was released in June 2007. It is based on Mozilla Firefox 2.

Some of the new features in Navigator 9:

Mozilla Features
Since Navigator 9 is based on Mozilla, it has all the latest Mozilla features.
URL Correction
Navigator 9 will automatically correct common typos in URLs.
Link Pad
A new sidebar feature that allows you to save links/URLs that you want to visit later without cluttering your bookmarks.
Extension Compatibility
Navigator 9 will let you install extensions that are compatible with Firefox 2.
Sidebar Mini Browser
Bookmarks and links can be open in the sidebar.
Resizeable Textarea
Drag the bottom-right corners of text fields in forms to add more typing space.
Tab History
Opening a link in a new tab will give the new tab the same history as the source tab.
OPML Support
Navigator 9 supports importing and exporting your bookmarks in OPML format.
Combined Stop/Reload button
To save space in your toolbar, the stop and reload buttons are combined.

Netscape 8

Netscape 8.1.2 was released in September 2006.

Netscape 8 allows you to adjust the security level (Java, JavaScript, cookies settings), and also allows you to switch to use Internet Explorer's engine to render pages when necessary.

New features in Netscape 8:

  • Site Controls (dual rendering engine)
  • Multi-Bar (dynamic toolbar)
  • Form fill/passcard
  • Live Content
  • Improved tabbed browsing
  • Adware & Spyware protection
  • Dynamic Security Center

Netscape 7

Netscape 7 is based on open source engine (Gecko) and fine-tune of Netscape 6.

Netscape 7 has been reported very stable and fast.

Netscape 6

Netscape 6 was released in November 2000. This version was the first Netscape browser with powerful support for CSS and XML.

Netscape 6 is based on open source engine (Gecko), while Netscape Communicator 4.8 used the engine that was originally released in late 1994.

The Netscape Problem

Netscape's 4.x series of browsers had a poor support for CSS and no support for XML.

It took Netscape nearly three and a half years after the release of 4.0, to produce its next generation browser. This delay has clearly hurt Netscape's possibilities to dominate the browser market.

Our browser statistics are showing that Netscape is losing the browser war.

Older Netscape Versions

Netscape 5.0 - Netscape skipped the version number 5.

Netscape Communicator 4.0 (released in 1997) Too old. Don't use it.

Netscape Navigator 3.0 (released in 1996). Too old. Don't use it.

Netscape Navigator 2.0 (released in 1996). Too old. Don't use it.

Netscape 1.0 (released in 1994). Too old. Don't use it.

Internet Explorer

nternet Explorer is the most commonly used Internet browser today.

Internet Explorer 7

Internet Explorer 7.0 was released in November 2006.

Internet Explorer 7 provides improved navigation through tabbed browsing, web search from the toolbar, advanced printing, easy discovery, reading and subscription to RSS feeds.

New features:

  • Advanced printing (automatically scales a webpage for printing)
  • Instant Search box
  • Favorites Center
  • RSS feeds (automatically detects RSS feeds)
  • Tabbed browsing (view multiple sites in a single browser window)
  • Quick Tabs
  • Tab Groups
  • Page zoom

See W3Schools' month by month statistics.

Internet Explorer 6

Internet Explorer 6.0 is the standard browser in Windows XP. It was released in August 2001.

Windows XP is built on Windows 2000 and is the successor to Windows 98, Millennium, and Windows 2000.

Internet Explorer 5

Internet Explorer 5 was the first major browser with XML support.

Version 5.5 (July 2000) for Windows 95, 98, NT 4.0, and Windows 2000. Support for XML/XSL, CSS, printing (print preview) and HTC behaviors.

Version 5.01 (November 1999) Primarily a bug fix for 5.0.

Version 5.0 (March 1999) The first major browser with XML support.

Older Internet Explorer Versions

The oldest versions of Internet Explorer are no longer in use by any majority of users. Web developers will ignore them. Their functionality is outdated.

Version 4.0 (released in 1997) is used by less than 1%. It has respectable CSS and DOM support, but no XML support.

Version 3.0 (released in 1996) is now used by less than 0.1%.

Version 2.0 (released in 1995). It is too old. Nobody uses it.

Version 1.0 (released in 1995). Does anyone remember it?

Internet Explorer for Macintosh

Version 5.1.7 is the latest version of Internet Explorer for Mac OS 8 and 9. It was released in July 2003.

Version 5.2.3 is the latest version of Internet Explorer for Mac OS X. It was released in June 2003.

Note: version 5.2.3 requires special features in Mac OS X. Mac OS 8 and 9 users must download and install version 5.1.7.

Microsoft Internet Explorer Downloads

Download Internet Explorer for free at: http://www.microsoft.com/windows/products/winfamily/ie/default.mspx.

Download the latest security updates and bug fixes at: http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

Internet Explorer for Mac is no longer available for download!

In June 2003, the Microsoft Macintosh Business Unit announced that Internet Explorer for Mac would undergo no further development, and support would cease in 2005. Microsoft ended support for Internet Explorer for Mac on December 31st, 2005. Accordingly, as of January 31st, 2006, Internet Explorer for the Mac is no longer available for download from Microsoft. It is recommended that Macintosh users migrate to more recent web browsing technologies such as Apple's Safari.

Browser Display Statistics

What is the trend in browser usage, display colors and screen resolution?

Web Statistics and Trends

Statistics are important information. What you can read from the statistics below is that most users are using a display with 1024x768 pixels or more, with a color depth of at least 65K colors.

W3Schools is a website for people with an interest for web technologies. This fact indicates that the figures below might not be 100% realistic. The average user might have display screens with a lower resolution.

Anyway, our data, collected from W3Schools' log-files over five years, clearly shows the long and medium-term trends.

Display Resolution

The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:

2007 Higher 1024x768 800x600 640x480 Unknown
January 26% 54% 14% 0% 6%
2006
July 19% 58% 17% 0% 6%
January 17% 57% 20% 0% 6%
2005
July 14% 55% 25% 0% 6%
January 12% 53% 30% 0% 5%
2004
July 10% 50% 35% 1% 4%
January 10% 47% 37% 1% 5%
2003
July 8% 43% 44% 2% 5%
January 6% 40% 47% 2% 5%
2002
October 6% 38% 49% 2% 5%

lamp Web developers be aware: Many users still have only 800x600 display screens.

Color Depth

The current trend is that most computers use 24 or 32 bits hardware to display 16,777,216 different colors.

Older computers and laptops often use 16 bits display hardware. This gives a maximum of 65,536 different colors.

Handheld computers (and very old computers) often use 8 bits color hardware. This gives a maximum of 256 colors.

2007 16,777,216 65,536 256
January 86% 11% 2%
2006
July 85% 13% 2%
January 81% 16% 3%
2005
July 77% 20% 3%
January 72% 25% 3%
2004
July 69% 28% 3%
January 65% 31% 4%
2003
July 55% 40% 5%
January 51% 44% 5%
2002
October 49% 46% 5%
Read more about the display of colors

OS Platform Statistics

What is the trend in operating systems usage?

Web Statistics and Trends

Statistics are important information. From the statistics below, collected from onlinexml.blogspot.com' log-files over a period of five years, you can extract the long and medium-term trends of operating system usage.

OS Platform Statistics

Windows XP is the most popular operating system. The windows family counts for nearly 90%:

2007 WinXP W2000 Win98 Vista W2003 Linux Mac
December 73.4% 4.7% 1.3% 6.5% 1.9% 3.5% 4.0%
November 72.8% 5.1% 1.0% 6.3% 2.0% 3.3% 3.9%
October 73.9% 4.9% 0.9% 5.6% 1.9% 3.3% 3.9%
September 74.3% 5.4% 0.9% 4.5% 2.0% 3.4% 3.9%
August 74.4% 5.7% 0.9% 4.0% 2.0% 3.4% 3.9%
July 74.6% 6.0% 0.9% 3.6% 2.0% 3.4% 4.0%
June 74.6% 6.2% 0.9% 3.2% 2.0% 3.4% 4.0%
May 75.0% 6.5% 0.9% 2.8% 1.9% 3.4% 3.9%
April 75.8% 6.8% 0.9% 2.6% 1.9% 3.4% 3.9%
March 76.0% 7.2% 0.9% 1.9% 1.9% 3.4% 3.8%
February 76.1% 7.4% 0.9% 1.2% 1.9% 3.5% 3.8%
January 76.1% 7.7% 1.0% 0.6% 1.9% 3.6% 3.8%








2006 WinXP W2000 Win98 WinNT W2003 Linux Mac
December 75.7% 7.9% 1.0% 0.2% 1.9% 3.6% 3.8%
November 74.9% 8.0% 1.0% 0.3% 1.9% 3.5% 3.6%
October 74.6% 8.9% 1.2% 0.3% 2.0% 3.5% 3.6%
September 74.6% 9.2% 1.4% 0.3% 2.0% 3.5% 3.6%
August 74.4% 10.1% 1.4% 0.3% 2.1% 3.5% 3.6%
July 74.3% 10.1% 1.5% 0.3% 2.0% 3.4% 3.6%
June 74.1% 10.6% 1.6% 0.3% 2.0% 3.4% 3.6%
May 74.2% 10.7% 1.6% 0.2% 2.0% 3.4% 3.6%
April 74.0% 11.2% 1.8% 0.3% 1.9% 3.3% 3.6%
March 72.9% 11.9% 2.0% 0.3% 1.8% 3.4% 3.5%
February 73.3% 12.3% 2.1% 0.3% 1.8% 3.4% 3.6%
January 72.3% 13.1% 2.4% 0.3% 1.7% 3.3% 3.5%








2005 WinXP W2000 Win98 WinNT W2003 Linux Mac
November 71.0% 14.6% 2.7% 0.4% 1.7% 3.3% 3.3%
September 69.2% 15.8% 3.2% 0.5% 1.7% 3.3% 3.1%
July 65.3% 17.7% 3.9% 0.6% 1.6% 3.5% 3.0%
May 64.5% 19.4% 3.9% 0.8% 1.4% 3.3% 2.9%
March 63.1% 20.2% 4.7% 0.9% 1.4% 3.2% 3.0%
January 61.3% 21.6% 5.3% 1.0% 1.2% 3.2% 2.8%








2004 WinXP W2000 Win98 WinNT Win95 Linux Mac
November 59.1% 23.7% 5.6% 1.2% 0.1% 3.1% 2.7%
September 55.9% 26.2% 6.4% 1.5% 0.2% 3.1% 2.6%
July 52.5% 28.4% 7.5% 1.9% 0.2% 3.1% 2.4%
May 51.0% 29.6% 8.2% 2.0% 0.3% 2.9% 2.5%
March 48.0% 31.1% 9.4% 2.4% 0.4% 2.6% 2.4%
January 44.1% 33.6% 10.4% 3.0% 0.4% 2.7% 2.4%








2003 WinXP W2000 Win98 WinNT Win95 Linux Mac
November 42.6% 36.3% 10.9% 3.5% 0.4% 2.6% 2.2%
September 38.0% 37.9% 12.1% 4.1% 0.5% 2.4% 2.0%
July 33.9% 40.6% 12.6% 5.3% 0.6% 2.3% 1.9%
May 31.4% 41.0% 13.9% 5.8% 0.7% 2.2% 1.8%
March 29.1% 41.9% 14.8% 6.6% 0.8% 2.2% 1.8%

Platforms that count for less than 0.5% are not listed.

Other Statistics

Browser usage statistics

Browser display statistics

Statistics Are Often Misleading

You cannot - as a web developer - rely only on statistics. Statistics can often be misleading.

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old low spec computers.

Quotes

"There are three kinds of lies: lies, damn lies, and statistics."
Benjamin Disraeli

"Then there was the man who drowned crossing a stream with an average depth of six inches."
W. I. E. Gates

Browser Statistics

What is the trend in browser usage?

Web Statistics and Trends

Statistics are important information. From the statistics below, you can see that Internet Explorer is the most common browser. However, FireFox has become quite popular as well.

Browser Statistics Month by Month

2007 IE7 IE6 IE5 Fx Moz S O
December 21.0% 33.2% 1.7% 36.3% 1.4% 1.7% 1.4%
November 20.8% 33.6% 1.6% 36.3% 1.2% 1.8% 1.6%
October 20.7% 34.5% 1.5% 36.0% 1.3% 1.7% 1.6%
September 20.8% 34.9% 1.5% 35.4% 1.2% 1.6% 1.5%
August 20.5% 35.7% 1.5% 34.9% 1.3% 1.5% 1.7%
July 20.1% 36.9% 1.5% 34.5% 1.4% 1.5% 1.9%
June 19.7% 37.3% 1.5% 34.0% 1.4% 1.5% 1.8%
May 19.2% 38.1% 1.6% 33.7% 1.3% 1.5% 1.7%
April 19.1% 38.4% 1.7% 32.9% 1.3% 1.5% 1.6%
March 18.0% 38.7% 2.0% 31.8% 1.3% 1.6% 1.6%
February 16.4% 39.8% 2.5% 31.2% 1.4% 1.7% 1.5%
January 13.3% 42.3% 3.0% 31.0% 1.5% 1.7% 1.5%
2006 IE7 IE6 IE5 Fx Moz N7/8 O
December 10.7% 45.3% 3.4% 30.3% 2.6% 0.2% 1.5%
November 7.1% 49.9% 3.6% 29.9% 2.5% 0.2% 1.5%
October 3.1% 54.5% 3.8% 28.8% 2.4% 0.3% 1.4%
September 2.5% 55.6% 4.0% 27.3% 2.3% 0.4% 1.6%
August 2.0% 56.2% 4.1% 27.1% 2.3% 0.3% 1.6%
July 1.9% 56.3% 4.2% 25.5% 2.3% 0.4% 1.4%
June 1.6% 58.2% 4.3% 24.9% 2.2% 0.3% 1.4%
May 1.1% 57.4% 4.5% 25.7% 2.3% 0.3% 1.5%
April 0.7% 58.0% 5.0% 25.2% 2.5% 0.4% 1.5%
March 0.6% 58.8% 5.3% 24.5% 2.4% 0.5% 1.5%
February 0.5% 59.5% 5.7% 25.1% 2.9% 0.4% 1.5%
January 0.2% 60.3% 5.5% 25.0% 3.1% 0.5% 1.6%
2005 IE6 IE5 Fx Moz N7 O8 O7
November 62.7% 6.2% 23.6% 2.8% 0.4% 1.3% 0.2%
September 69.8% 5.7% 18.0% 2.5% 0.4% 1.0% 0.2%
July 67.9% 5.9% 19.8% 2.6% 0.5% 0.8% 0.4%
May 64.8% 6.8% 21.0% 3.1% 0.7% 0.7% 0.6%
March 63.6% 8.9% 18.9% 3.3% 1.0% 0.3% 1.6%
January 64.8% 9.7% 16.6% 3.4% 1.1% 1.9%
2004 IE6 IE5 Moz N3 N7 N4 O7
November 66.0% 10.2% 16.5% 0.2% 1.2% 0.3% 1.6%
September 67.8% 11.2% 13.7% 0.3% 1.4% 0.3% 1.7%
July 67.2% 13.2% 12.6% 0.4% 1.4% 0.4% 1.6%
May 68.1% 13.8% 9.5% 0.6% 1.4% 0.4% 1.6%
March 68.2% 14.6% 7.9% 0.8% 1.4% 0.6% 1.4%
January 68.9% 15.8% 5.5% 0.4% 1.5% 0.5% 1.5%
2003 IE6 IE5 Moz N3 N7 N4 O7
November 71.2% 13.7% 7.2% 0.5% 1.6% 0.5% 1.9%
September 69.7% 16.9% 6.2% 0.6% 1.5% 0.6% 1.8%
July 66.9% 20.3% 5.7% 0.6% 1.5% 0.6% 1.7%
May 65.0% 22.7% 4.6% 1.0% 1.4% 0.9% 1.4%
March 63.4% 24.6% 4.2% 0.9% 1.4% 1.1% 1.2%
January 55.3% 29.3% 4.0% 1.2% 1.1% 1.7%
2002 IE6 IE5 AOL N3 N5 N4 IE4
November 53.5% 29.9% 5.2% 1.1% 4.9% 2.0%
September 49.1% 34.4% 4.5% 1.3% 4.5% 2.2%
July 44.4% 40.1% 3.5% 1.2% 3.5% 2.6% 0.5%
May 40.7% 46.0% 2.8% 1.2% 2.7% 3.4% 0.7%
March 36.7% 49.4% 3.0% 1.2% 2.4% 4.1% 0.7%
January 30.1% 55.7% 2.8% 1.3% 2.2% 4.4% 1.0%


IE Internet Explorer
Fx Firefox (identified as Mozilla before 2005)
Moz The Mozilla Suite (Gecko, Netscape)
S Safari (and Konqueror. Both identified as Mozilla before 2007)
O Opera
N Netscape (identified as Mozilla after 2006)
AOL America Online (based on both Internet Explorer and Mozilla)

Browsers that count for less than 0.5% are not listed.

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

Anyway, our data, collected from W3Schools' log-files, over a five year period, clearly shows the long and medium-term trends.

JavaScript Statistics

There are no absolute trends about the use of JavaScript. Some users have scripting turned off. Some browsers don't support scripting:

2007 JavaScript On JavaScript Off
January 94% 6%
2006
July 92% 8%
January 90% 10%
2005
July 90% 10%
January 89% 11%
2004
July 90% 10%
January 92% 8%
2003
July 89% 11%
January 89% 11%
2002
October 88% 12%

Other Statistics

Operating system statistics

Browser display statistics

Statistics Are Often Misleading

You cannot - as a web developer - rely only on statistics. Statistics can often be misleading.

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old low spec computers.

Also be aware that many statistics may have an incomplete or faulty browser detection. It is quite common by many web-stats report programs, not to detect the newest browsers.

(The statistics above are extracted from W3Schools' log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures).

Quotes

"The pure and simple truth is rarely pure and never simple."
Oscar Wilde

"First get your facts; then you can distort them at your leisure."
Mark Twain

You Have Learned XML, Now What?

XML Summary

This tutorial has taught you how to use XML to describe data.

You have learned that XML should be used to separate the data from the HTML code.

You have also learned that XML can be used to exchange, share, and store data.

For more information on XML, please look at our XML examples.

Now You Know XML, What's Next?

The next step is to learn about the XML DOM and XSLT.

If you want to learn about validating XML, the next step is learning about DTD and XML Schema.

XML DOM

The XML DOM defines a standard way for accessing and manipulating XML documents.

The XML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our XML DOM tutorial.

XSLT

XSLT is the style sheet language for XML files.

With XSLT you can transform XML documents into other formats, like XHTML.

If you want to learn more about XSLT, please visit our XSLT tutorial.

DTD and XML Schema

The purpose of a DTD is to define what elements, attributes and entities is legal in an XML document.

With DTD, each of your XML files can carry a description of its own format with it.

DTD can be used to verify that the data you receive, and your own data, is valid.

If you want to learn more about DTD, please visit our DTD tutorial.

XML Schema will replace DTD.

XML Schema is an XML based alternative to DTD.

Unlike DTD, XML Schemas has support for datatypes, and XML Schema use XML Syntax.

XML Editors

If you are serious about XML, you will benefit from using a professional XML Editor.

XML is Text-based

XML is a text-based markup language.

One great thing about XML is that XML files can be created and edited using a simple text-editor like Notepad.

However, when you start working with XML, you will soon find that it is better to edit XML documents using a professional XML editor.

Why Not Notepad?

Many web developers use Notepad to edit both HTML and XML documents because Notepad is included with the most common OS and it is simple to use. Personally I often use Notepad for quick editing of simple HTML, CSS, and XML files.

But, if you use Notepad for XML editing, you will soon run into problems.

Notepad does not know that you are writing XML, so it will not be able to assist you.

Why an XML Editor?

Today XML is an important technology, and development projects use XML-based technologies like:

  • XML Schema to define XML structures and data types
  • XSLT to transform XML data
  • SOAP to exchange XML data between applications
  • WSDL to describe web services
  • RDF to describe web resources
  • XPath and XQuery to access XML data
  • SMIL to define graphics

To be able to write error-free XML documents, you will need an intelligent XML editor!

XML Editors

Professional XML editors will help you to write error-free XML documents, validate your XML against a DTD or a schema, and force you to stick to a valid XML structure.

An XML editor should be able to:

  • Add closing tags to your opening tags automatically
  • Force you to write valid XML
  • Verify your XML against a DTD
  • Verify your XML against a Schema
  • Color code your XML syntax

XML Don't

Here are some technologies you should try to avoid when using XML

Internet Explorer XML Data Islands

What is it? An XML data island is XML data embedded into an HTML page.

Why avoid it? XML Data Island only works with Internet Explorer browsers.

What to use instead? You should use JavaScript and XML DOM to parse and use XML data in HTML.

For more information about using JavaScript and the XML DOM to get and use information from XML in HTML pages, visit our XML DOM tutorial.

Example - Embed XML Data in a HTML Table

Here is how it works; assume we have the following XML document ("cd_catalog.xml"):

View "cd_catalog.xml"

Then, in an HTML document, you can embed the XML file above with the tag. The id attribute of the tag defines an ID for the data island, and the src attribute points to the XML file to embed:

The next step is to format and display the data in the data island by binding it to HTML elements.

The HTML file looks like this:

Example explained:

The datasrc attribute of the

tag binds the HTML table element to the XML data island. The datasrc attribute refers to the id attribute of the data island.

tags cannot be bound to data, so we are using tags. The tag allows the datafld attribute to refer to the XML element to be displayed. In this case, it is datafld="ARTIST" for the element and datafld="TITLE" for the element in the XML file. As the XML is read, additional rows are created for each <cd> element.</p> <p>If you are running IE (5.0 or higher), you can try it yourself.</p> <p>Also try this example, demonstrating <thead>, <tbody>, and <tfoot>.</p> <hr /> <h2>Internet Explorer Behaviors</h2> <p><b>What is it? </b>Internet Explorer 5 introduced behaviors. Behaviors are a way to add behaviors to XML (or HTML) elements with the use of CSS styles.</p> <p><b>Why avoid it?</b> The behavior attribute is only supported by Internet Explorer. All other browsers will ignore it.</p> <p><b>What to use instead? </b>Use JavaScript and XML DOM (or HTML DOM) instead.</p> <p>For more information about using JavaScript and the XML DOM to get and use information from XML in HTML pages, visit our XML DOM tutorial.</p> <hr /> <h2>Example 1 - Mouseover Highlight</h2> <p>The following HTML file has a <style> element that defines a behavior for the <h1> element:</p> <table class="ex" id="table7" border="1" cellspacing="0" width="100%"> <tbody><tr><td width="100%"> <pre><html><br /><head><br /><style type="text/css"><br />h1 { behavior: url(behave.htc) }<br /></style><br /></head><br /><br /><body><br /><h1>Mouse over me!!!</h1><br /></body><br /></html></pre> </td></tr></tbody></table> <p>The XML document "behave.htc" is shown below:</p> <table class="ex" id="table8" border="1" cellspacing="0" width="100%"> <tbody><tr><td width="100%"> <pre><attach for="element" event="onmouseover" handler="hig_lite"><br /><attach for="element" event="onmouseout" handler="low_lite"><br /><br /><script type="text/javascript"><br />function hig_lite()<br />{<br />element.style.color='red';<br />}</pre> <pre>function low_lite()<br />{<br />element.style.color='blue';<br />}<br /></script></pre> </td></tr></tbody></table> <p>The behavior file contains a JavaScript and event handlers for the elements.</p> <p>Try it yourself (mouse over the text in the example).</p> <h2>Example 2 - Typewriter Simulation</h2> <p>The following HTML file has a <style> element that defines a behavior for elements with an id of "typing":</p> <table class="ex" id="table9" border="1" cellspacing="0" width="100%"> <tbody><tr><td width="100%"> <pre><html><br /><head><br /><style type="text/css"><br />#typing<br />{<br />behavior:url(typing.htc);<br />font-family:'courier new';<br />}<br /></style><br /></head><br /><br /><body><br /><span id="typing" speed="100">IE5 introduced DHTML behaviors.<br />Behaviors are a way to add DHTML functionality to HTML elements<br />with the ease of CSS.<br /><br />How do behaviors work?<br /><br />By using XML we can link behaviors to any element in a web page<br />and manipulate that element.</p><br /></span><br /></body><br /></html></pre> </td></tr></tbody></table> <p>The XML document "typing.htc" is shown below:</p> <pre><attach for="window" event="onload" handler="beginTyping"><br /><method name="type"></pre> <pre><script type="text/javascript"><br />var i,text1,text2,textLength,t;</pre> <pre>function beginTyping()<br />{<br />i=0;<br />text1=element.innerText;<br />textLength=text1.length;<br />element.innerText="";<br />text2="";<br />t=window.setInterval(element.id+".type()",speed);<br />}</pre> <pre>function type()<br />{<br />text2=text2+text1.substring(i,i+1);<br />element.innerText=text2;<br />i=i+1;<br />if (i==textLength)<br /> {<br /> clearInterval(t);<br /> }<br />}<br /></script></pre> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> </span> <span class='post-timestamp'> </span> <span class='post-comment-link'> </span> <span class='post-icons'> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='7877396581341530968' itemprop='blogId'/> <meta content='4869375944540441928' itemprop='postId'/> <a name='4869375944540441928'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://onlinexml.blogspot.com/2008/01/save-data-to-xml-file.html'>Save Data to an XML File</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-4869375944540441928' itemprop='description articleBody'> <p class="intro">Usually, we save data in databases. However, if we want to make the data more portable, we can store the data in an XML file.</p> <hr /> <h2>Create and Save an XML File</h2> Storing data in XML files is useful if the data is to be sent to applications on non-Windows platforms. Remember that XML is portable across all platforms and the data will not need to be converted!<p>First we will learn how to create and save an XML file. The XML file below will be named "test.xml" and will be stored in the c directory on the server. We will use ASP and Microsoft's XMLDOM object to create and save the XML file:</p> <table class="ex" id="table1" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><%<br />Dim xmlDoc, rootEl, child1, child2, p</pre> <pre>'Create an XML document<br />Set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")</pre> <pre>'Create a root element and append it to the document<br />Set rootEl = xmlDoc.createElement("root")<br />xmlDoc.appendChild rootEl</pre> <pre>'Create and append child elements<br />Set child1 = xmlDoc.createElement("child1")<br />Set child2 = xmlDoc.createElement("child2")<br />rootEl.appendChild child1<br />rootEl.appendChild child2</pre> <pre>'Add an XML processing instruction<br />'and insert it before the root element<br />Set p=xmlDoc.createProcessingInstruction("xml","version='1.0'")<br />xmlDoc.insertBefore p,xmlDoc.childNodes(0)</pre> <pre>'Save the XML file to the c directory<br />xmlDoc.Save "c:\test.xml"<br />%></pre> </td> </tr> </tbody></table> <p>If you open the saved XML file it will look something like this ("test.xml"): </p> <table class="ex" id="table2" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><!--xml version="1.0"?--><br /><root><br /> <child1><br /> <child2><br /></root></pre> </td> </tr> </tbody></table><br /><hr /> <h2>Real Form Example</h2> <p>Now, we will look at a real HTML form example.</p> <p>We will first look at the HTML form that will be used in this example: The HTML form below asks for the user's name, country, and e-mail address. This information will then be written to an XML file for storage.</p> <p>"customers.htm":</p> <table class="ex" id="table3" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><html></pre> <pre><body><br /><form action="saveForm.asp" method="post"><br /><p><b>Enter your contact information</b></p><br />First Name: <input type="text" id="fname" name="fname"><br /><br />Last Name: <input type="text" id="lname" name="lname"><br /><br />Country: <input type="text" id="country" name="country"><br /><br />Email: <input type="text" id="email" name="email"><br /><br /><input type="submit" id="btn_sub" name="btn_sub" value="Submit"><br /><input type="reset" id="btn_res" name="btn_res" value="Reset"><br /></form><br /></body></pre> <pre></html></pre> </td> </tr> </tbody></table> <p>The action for the HTML form above is set to "saveForm.asp". The "saveForm.asp" file is an ASP page that will loop through the form fields and store their values in an XML file:</p> <table class="ex" id="table4" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><%<br />dim xmlDoc<br />dim rootEl,fieldName,fieldValue,attID<br />dim p,i</pre> <pre>'Do not stop if an error occurs<br />On Error Resume Next</pre> <pre>Set xmlDoc = server.CreateObject("Microsoft.XMLDOM")<br />xmlDoc.preserveWhiteSpace=true</pre> <pre>'Create a root element and append it to the document<br />Set rootEl = xmlDoc.createElement("customer")<br />xmlDoc.appendChild rootEl</pre> <pre>'Loop through the form collection<br />for i = 1 To Request.Form.Count<br /> 'Eliminate button elements in the form<br /> if instr(1,Request.Form.Key(i),"btn_")=0 then<br /> 'Create a field and a value element, and an id attribute<br /> Set fieldName = xmlDoc.createElement("field")<br /> Set fieldValue = xmlDoc.createElement("value")<br /> Set attID = xmlDoc.createAttribute("id")<br /> 'Set the value of the id attribute equal to the name of<br /> 'the current form field<br /> attID.Text = Request.Form.Key(i)<br /> 'Append the id attribute to the field element<br /> fieldName.setAttributeNode attID<br /> 'Set the value of the value element equal to<br /> 'the value of the current form field<br /> fieldValue.Text = Request.Form(i)<br /> 'Append the field element as a child of the root element<br /> rootEl.appendChild fieldName<br /> 'Append the value element as a child of the field element<br /> fieldName.appendChild fieldValue<br /> end if<br />next</pre> <pre>'Add an XML processing instruction<br />'and insert it before the root element<br />Set p = xmlDoc.createProcessingInstruction("xml","version='1.0'")<br />xmlDoc.insertBefore p,xmlDoc.childNodes(0)</pre> <pre>'Save the XML file<br />xmlDoc.save "c:\Customer.xml"</pre> <pre>'Release all object references<br />set xmlDoc=nothing<br />set rootEl=nothing<br />set fieldName=nothing<br />set fieldValue=nothing<br />set attID=nothing<br />set p=nothing</pre> <pre>'Test to see if an error occurred<br />if err.number<>0 then<br /> response.write("Error: No information saved.")<br />else<br /> response.write("Your information has been saved.")<br />end if<br />%></pre> </td> </tr> </tbody></table> <p><b>Note:</b> If the XML file name specified already exists, it will be overwritten!</p> <p>The XML file that will be produced by the code above will look something like this ("Customer.xml"):</p> <table class="ex" id="table5" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><!--xml version="1.0" ?--><br /><customer><br /> <field id="firstName"><br /> <value>Hege</value><br /> </field><br /> <field id="lastName"><br /> <value>Refsnes</value><br /> </field><br /> <field id="country"><br /> <value>Norway</value><br /> </field><br /> <field id="email"><br /> <value>mymail@myaddress.com</value><br /> </field><br /></customer></pre> </td> </tr> </tbody></table> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> </span> <span class='post-timestamp'> </span> <span class='post-comment-link'> </span> <span class='post-icons'> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='7877396581341530968' itemprop='blogId'/> <meta content='1523919483474979117' itemprop='postId'/> <a name='1523919483474979117'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://onlinexml.blogspot.com/2008/01/xmlhttprequest-object-is-supported-in.html'>The XMLHttpRequest Object</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-1523919483474979117' itemprop='description articleBody'> <p class="intro">The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 9, and Netscape 7.</p> <hr /> <h2>What is an HTTP Request?</h2> <p>With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts might request pages, or send data to a server in the background.</p> <p><b>By using the XMLHttpRequest object, a web developer can change a page with data from the server after the page has loaded.</b></p> <p>Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.</p> <hr /> <h2>Is the XMLHttpRequest Object a W3C Standard?</h2> <p>The XMLHttpRequest object is a JavaScript object, and is not specified in any W3C recommendation.</p> <p>However, the W3C DOM Level 3 "Load and Save" specification contains some similar functionality, but these are not implemented in any browsers yet. So, at the moment, if you need to send an HTTP request from a browser, you will have to use the XMLHttpRequest object.</p> <hr /> <h2>Creating an XMLHttpRequest Object</h2> <p>For Mozilla, Firefox, Safari, Opera, and Netscape:</p> <table class="ex" id="table1" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre>var xmlhttp=new XMLHttpRequest()</pre> </td> </tr> </tbody></table> <p>For Internet Explorer:</p> <table class="ex" id="table2" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre>var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")</pre> </td> </tr> </tbody></table> <h3>Example</h3> <table class="ex" id="table7" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><script type="text/javascript"><br />var xmlhttp;</pre> <pre>function loadXMLDoc(url)<br />{<br />xmlhttp=null;<br />// code for Mozilla, etc.<br />if (window.XMLHttpRequest)<br /> {<br /> xmlhttp=new XMLHttpRequest();<br /> }<br />// code for IE<br />else if (window.ActiveXObject)<br /> {<br /> xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br />if (xmlhttp!=null)<br /> {<br /> xmlhttp.onreadystatechange=state_Change;<br /> xmlhttp.open("GET",url,true);<br /> xmlhttp.send(null);<br /> }<br />else<br /> {<br /> alert("Your browser does not support XMLHTTP.");<br /> }<br />}</pre> <pre>function state_Change()<br />{<br />// if xmlhttp shows "loaded"<br />if (xmlhttp.readyState==4)<br /> {<br /> // if "OK"<br /> if (xmlhttp.status==200)<br /> {<br /> // ...some code here...<br /> }<br /> else<br /> {<br /> alert("Problem retrieving XML data");<br /> }<br /> }<br />}<br /></script></pre> <br /></td> </tr> </tbody></table> <p>Try it yourself using JavaScript</p> <p>The syntax is a little bit different in VBScript: Try it yourself using VBScript</p> <p><b>Note:</b> An important property in the example above is the onreadystatechange property. This property is an event handler which is triggered each time the state of the request changes. The states run from 0 (uninitialized) to 4 (complete). By having the function xmlhttpChange() check for the state changing, we can tell when the process is complete and continue only if it has been successful.</p> <hr /> <h2>Why are we Using Async in our Examples?</h2> <p>All the examples here use the async mode (the third parameter of open() set to true).</p> <p>The async parameter specifies whether the request should be handled asynchronously or not. True means that script continues to run after the send() method, without waiting for a response from the server. false means that the script waits for a response before continuing script processing. By setting this parameter to false, you run the risk of having your script hang if there is a network or server problem, or if the request is long (the UI locks while the request is being made) a user may even see the "Not Responding" message. It is safer to send asynchronously and design your code around the onreadystatechange event!</p> <hr /> <h2>More Examples</h2> <p>Load a textfile into a div element with XML HTTP (JavaScript)</p> <p>Make a HEAD request with XML HTTP (JavaScript)</p> <p>Make a specified HEAD request with XML HTTP (JavaScript)</p> <p> List data from an XML file with XML HTTP (JavaScript)</p> <hr /> <h2>The XMLHttpRequest Object Reference</h2> <h3>Methods</h3> <table class="ex" id="table3" border="1" cellpadding="3" cellspacing="0" width="100%"> <tbody><tr valign="top"> <th align="left" width="45%">Method</th> <th align="left" width="55%">Description</th> </tr> <tr valign="top"> <td>abort()</td> <td>Cancels the current request</td> </tr> <tr valign="top"> <td>getAllResponseHeaders()</td> <td>Returns the complete set of http headers as a string</td> </tr> <tr valign="top"> <td>getResponseHeader("headername")</td> <td>Returns the value of the specified http header</td> </tr> <tr valign="top"> <td>open("method","URL",async,"uname","pswd")</td> <td>Specifies the method, URL, and other optional attributes of a request<p>The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes.</p> <p>The URL parameter may be either a relative or complete URL.</p> <p>The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing</p></td> </tr> <tr valign="top"> <td>send(content)</td> <td>Sends the request</td> </tr> <tr valign="top"> <td>setRequestHeader("label","value")</td> <td>Adds a label/value pair to the http header to be sent</td> </tr> </tbody></table> <h3>Properties</h3> <table class="ex" id="table4" border="1" cellpadding="3" cellspacing="0" width="100%"> <tbody><tr valign="top"> <th align="left" width="30%">Property</th> <th align="left" width="70%">Description</th> </tr> <tr valign="top"> <td>onreadystatechange</td> <td>An event handler for an event that fires at every state change</td> </tr> <tr valign="top"> <td>readyState</td> <td>Returns the state of the object:<p>0 = uninitialized<br />1 = loading<br />2 = loaded<br />3 = interactive<br />4 = complete </p></td> </tr> <tr valign="top"> <td>responseText</td> <td>Returns the response as a string</td> </tr> <tr valign="top"> <td>responseXML</td> <td>Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties</td> </tr> <tr valign="top"> <td>status</td> <td>Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")</td> </tr> <tr valign="top"> <td>statusText</td> <td>Returns the status as a string (e.g. "Not Found" or "OK")</td> </tr> </tbody></table> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> </span> <span class='post-timestamp'> </span> <span class='post-comment-link'> </span> <span class='post-icons'> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='7877396581341530968' itemprop='blogId'/> <meta content='4202324901739241812' itemprop='postId'/> <a name='4202324901739241812'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://onlinexml.blogspot.com/2008/01/xml-application.html'>XML Application</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-4202324901739241812' itemprop='description articleBody'> <p class="intro">This chapter demonstrates a small XML application built with HTML and JavaScript</p> <hr /> <h2>The XML Example Document</h2> <p>Look at the following XML document ("cd_catalog.xml"), that represents a CD catalog:</p> <table class="ex" border="1" cellspacing="0" width="100%"> <tbody><tr> <td> <pre><!--xml version="1.0" encoding="ISO-8859-1"?--><br /><catalog><br /> <cd><br /> <title>Empire Burlesque
Bob Dylan
USA
Columbia
10.90
1985

.
.
... more ...
.

View the full "cd_catalog.xml" file in your browser.

Load the XML Document

To get your XML document "inside" an HTML page, load the XML document into a variable:

var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");

With the example code above, the XML file "cd_catalog.xml" will be loaded into the xmlDoc variable.

This is the same way we load an XML document in the XML Parser chapter.

Bind the XML Data to an HTML Table

In the example below the JavaScript creates a table and fills it with data from the XML document:

var x=xmlDoc.getElementsByTagName("CD");

document.write("");
for (var i=0;i{
document.write("");
document.write("");

document.write("");
document.write("");
}
document.write("
");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("		");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("
");

For each CD element in the XML document, a table row is created. Each table row contains two table data cells with ARTIST and TITLE data from the current CD element.

Try it yourself: See how the XML data is displayed inside an HTML table.

Bind the XML Data to a
Element

You can add XML data to any HTML element you can add text to.

The code below is a part of the section of the HTML file. It gets the correct XML data and outputs it in the specified HTML element (in this case the element with the "show" id).

In this specific example it gets the data from the first CD element in the XML file.

var x=xmlDoc.getElementsByTagName("CD");
i=0;

function display()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);

document.getElementById("show").innerHTML="Artist: " + artist +
"
Title: " + title + "
Year: "+ year;
}

The display() function is then executed in the HTML section.

Try it yourself: See how the XML data is displayed inside the

element.

With the example above, you will only see data from the first CD element in the XML document. To navigate to the next line of data, you have to add some scripting to your code.

Add a Navigation Script

To add navigation to the displayed XML data, we create two functions called next() and previous().

var x=xmlDoc.getElementsByTagName("CD");
i=0;

function next()
{
if (i {
 i++;
 display();
 }
}

function previous()
{
if (i>0)
 {
 i--;
 display();
 }
}

The next() function makes sure that nothing new is displayed if you are at the last CD element, and the previous () function makes sure that nothing new is displayed if you are at the first CD element.

The display() function is then executed in the HTML section.


XML on the Server

XML can be generated on a server without installing any XML controls.

Storing XML on the Server

XML files can be stored on an Internet server exactly the same way as HTML files.

Start Windows Notepad and write the following lines: 



 Jani
 Tove
 Remember me this weekend

Save the file on your web server with a proper name like "note.xml".

Generating XML with ASP

XML can be generated on a server without any installed XML software.

To generate an XML response from the server - simply write the following code and save it as an ASP file on the web server:

<%
response.ContentType="text/xml"
response.Write("")
response.Write("")
response.Write("Jani")
response.Write("Tove")
response.Write("Remember me this weekend")
response.Write("")
%>

Note that the content type of the response must be set to "text/xml".

See how the ASP file will be returned from the server.

If you don't know how to write ASP, please visit our ASP tutorial

Getting XML From a Database

XML can be generated from a database without any installed XML software.

To generate an XML database response from the server, simply write the following code and save it as an ASP file on the web server:

<%
response.ContentType = "text/xml"
set conn=Server.CreateObject("ADODB.Connection")
conn.provider="Microsoft.Jet.OLEDB.4.0;"
conn.open server.mappath("/db/database.mdb")
sql="select fname,lname from tblGuestBook"
set rs=Conn.Execute(sql)
rs.MoveFirst()
response.write("")
response.write("")
while (not rs.EOF)
 response.write("")
 response.write("" & rs("fname") & "")
 response.write("" & rs("lname") & "")
 response.write("")
 rs.MoveNext()
wend
rs.close()
conn.close()
response.write("")
%>

XML Encoding

XML documents may contain foreign characters, like Norwegian æ ø å , or French ê è é.

To let your XML parser understand these characters, you should save your XML documents as Unicode.

Windows 2000 Notepad

Windows 2000 Notepad can save files as Unicode.

Save the XML file below as Unicode (note that the document does not contain any encoding attribute):



 Jani
 Tove
 Norwegian: æøå. French: êèé

The file above, note_encode_none_u.xml will NOT generate an error in IE 5+, Firefox, or Opera, but it WILL generate an error in Netscape 6.2.

Windows 2000 Notepad with Encoding

Windows 2000 Notepad files saved as Unicode use "UTF-16" encoding.

If you add an encoding attribute to XML files saved as Unicode, windows encoding values will generate an error.

The following encoding (open it), will NOT give an error message:

The following encoding (open it), will NOT give an error message:

The following encoding (open it), will NOT give an error message:

The following encoding (open it), will NOT generate an error in IE 5+, Firefox, or Opera, but it WILL generate an error in Netscape 6.2.


Error Messages

If you try to load an XML document into Internet Explorer, you can get two different errors indicating encoding problems:

An invalid character was found in text content.

You will get this error message if a character in the XML document does not match the encoding attribute. Normally you will get this error message if your XML document contains "foreign" characters, and the file was saved with a single-byte encoding editor like Notepad, and no encoding attribute was specified.

Switch from current encoding to specified encoding not supported.

You will get this error message if your file was saved as Unicode/UTF-16 but the encoding attribute specified a single-byte encoding like Windows-1252, ISO-8859-1 or UTF-8. You can also get this error message if your document was saved with single-byte encoding, but the encoding attribute specified a double-byte encoding like UTF-16.

Conclusion

The conclusion is that the encoding attribute has to specify the encoding used when the document was saved. My best advice to avoid errors is:

  • Use an editor that supports encoding
  • Make sure you know what encoding it uses
  • Use the same encoding attribute in your XML documents
Subscribe to: Posts (Atom)

Mix it

Add to Mixx!