What is the XMLHttpRequest Object?
The XMLHttpRequest object is the developers dream, because you can:
* Update a web page with new data without reloading the page
* Request data from a server after the page has loaded
* Receive data from a server after the page has loaded
* Send data to a server in the background
The XMLHttpRequest object is supported in all modern browsers.
Why Use Async=true?
Our examples use "true" in the third parameter of open().
This parameter specifies whether the request should be handled asynchronously.
True means that the script continues to run after the send() method, without waiting for a response from the server.
The onreadystatechange event complicates the code. But it is the safest way if you want to prevent the code from stopping if you don't get a response from the server.
By setting the parameter to "false", your can avoid the extra onreadystatechange code. Use this if it's not important to execute the rest of the code if the request fails.
Monday, July 14, 2008
XML DOM
The XML DOM
The XML DOM (XML Document Object Model) defines a standard way for accessing and manipulating XML documents.
The DOM views XML documents as a tree-structure. All elements can be accessed through the DOM tree. Their content (text and attributes) can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.
In the examples below we use the following DOM reference to get the text from the element:
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue
* xmlDoc - the XML document created by the parser.
* getElementsByTagName("to")[0] - the first element
* childNodes[0] - the first child of the element (the text node)
* nodeValue - the value of the node (the text itself)
You can learn more about the XML DOM in our XML DOM tutorial.
The HTML DOM
The HTML DOM (HTML Document Object Model) defines a standard way for accessing and manipulating HTML documents.
All HTML elements can be accessed through the HTML DOM.
In the examples below we use the following DOM reference to change the text of the HTML element where id="to":
document.getElementById("to").innerHTML=
* document - the HTML document
* getElementById("to") - the HTML element where id="to"
* innerHTML - the inner text of the HTML element
The XML DOM (XML Document Object Model) defines a standard way for accessing and manipulating XML documents.
The DOM views XML documents as a tree-structure. All elements can be accessed through the DOM tree. Their content (text and attributes) can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.
In the examples below we use the following DOM reference to get the text from the
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue
* xmlDoc - the XML document created by the parser.
* getElementsByTagName("to")[0] - the first
* childNodes[0] - the first child of the
* nodeValue - the value of the node (the text itself)
You can learn more about the XML DOM in our XML DOM tutorial.
The HTML DOM
The HTML DOM (HTML Document Object Model) defines a standard way for accessing and manipulating HTML documents.
All HTML elements can be accessed through the HTML DOM.
In the examples below we use the following DOM reference to change the text of the HTML element where id="to":
document.getElementById("to").innerHTML=
* document - the HTML document
* getElementById("to") - the HTML element where id="to"
* innerHTML - the inner text of the HTML element
XML Parser
Parsing XML
All modern browsers have a build-in XML parser that can be used to read and manipulate XML.
The parser reads XML into memory and converts it into an XML DOM object that can be accessed with JavaScript.
You will learn more about the XML DOM in the next chapter of this tutorial.
There are some differences between Microsoft's XML parser and the parsers used in other browsers. The Microsoft parser supports loading of both XML files and XML strings (text), while other browsers use separate parsers. However, all parsers contain functions to traverse XML trees, access, insert, and delete nodes (elements) and their attributes.
In this tutorial we will show you how to create scripts that will work in both Internet Explorer and other browsers.
Note: When we talk about parsing XML, we often use the term "Nodes" about XML elements.
Loading XML with Microsoft's XML Parser
Microsoft's XML parser is built into Internet Explorer 5 and higher.
The following JavaScript fragment loads an XML document ("note.xml") into the parser:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");
Example explained:
* The first line of the script above creates an empty Microsoft XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".
The following JavaScript fragment loads a string called txt into the parser:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
Note: The loadXML() method is used for loading strings (text), load() is used for loading files.
XML Parser in Firefox and Other Browsers
The following JavaScript fragment loads an XML document ("note.xml") into the parser:
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");
Example explained:
* The first line of the script above creates an empty XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".
The following JavaScript fragment loads a string called txt into the parser:
var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");
Example explained:
* The first line of the script above creates an empty XML document object.
* The second line tells the parser to load a string called txt.
Note: Internet Explorer uses the loadXML() method to parse an XML string, while other browsers uses the DOMParser object.
All modern browsers have a build-in XML parser that can be used to read and manipulate XML.
The parser reads XML into memory and converts it into an XML DOM object that can be accessed with JavaScript.
You will learn more about the XML DOM in the next chapter of this tutorial.
There are some differences between Microsoft's XML parser and the parsers used in other browsers. The Microsoft parser supports loading of both XML files and XML strings (text), while other browsers use separate parsers. However, all parsers contain functions to traverse XML trees, access, insert, and delete nodes (elements) and their attributes.
In this tutorial we will show you how to create scripts that will work in both Internet Explorer and other browsers.
Note: When we talk about parsing XML, we often use the term "Nodes" about XML elements.
Loading XML with Microsoft's XML Parser
Microsoft's XML parser is built into Internet Explorer 5 and higher.
The following JavaScript fragment loads an XML document ("note.xml") into the parser:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");
Example explained:
* The first line of the script above creates an empty Microsoft XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".
The following JavaScript fragment loads a string called txt into the parser:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
Note: The loadXML() method is used for loading strings (text), load() is used for loading files.
XML Parser in Firefox and Other Browsers
The following JavaScript fragment loads an XML document ("note.xml") into the parser:
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");
Example explained:
* The first line of the script above creates an empty XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".
The following JavaScript fragment loads a string called txt into the parser:
var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");
Example explained:
* The first line of the script above creates an empty XML document object.
* The second line tells the parser to load a string called txt.
Note: Internet Explorer uses the loadXML() method to parse an XML string, while other browsers uses the DOMParser object.
XML Syntax Rules
XML Elements Must be Properly Nested
In HTML, you will often see improperly nested elements:
This text is bold and italic
In XML, all elements must be properly nested within each other:
This text is bold and italic
In the example above, "Properly nested" simply means that since the element is opened inside the element, it must be closed inside the element.
XML Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements. This element is called the root element.
.....
XML Attribute Values Must be Quoted
XML elements can have attributes in name/value pairs just like in HTML.
In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct:
Tove
Jani
Tove
Jani
The error in the first document is that the date attribute in the note element is not quoted.
Entity References
Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element.
This will generate an XML error:
if salary < 1000 then
To avoid this error, replace the "<" character with an entity reference:
if salary < 1000 then
There are 5 predefined entity references in XML:
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it.
Comments in XML
The syntax for writing comments in XML is similar to that of HTML.
With XML, White Space is Preserved
HTML reduces multiple white space characters to a single white space:
HTML: Hello my name is Tove
Output: Hello my name is Tove.
With XML, the white space in your document is not truncated.
XML Stores New Line as LF
In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF). The character pair bears some resemblance to the typewriter actions of setting a new line. In Unix applications, a new line is normally stored as a LF character. Macintosh applications use only a CR character to store a new line.
In HTML, you will often see improperly nested elements:
This text is bold and italic
In XML, all elements must be properly nested within each other:
This text is bold and italic
In the example above, "Properly nested" simply means that since the element is opened inside the element, it must be closed inside the element.
XML Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements. This element is called the root element.
XML Attribute Values Must be Quoted
XML elements can have attributes in name/value pairs just like in HTML.
In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct:
The error in the first document is that the date attribute in the note element is not quoted.
Entity References
Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element.
This will generate an XML error:
To avoid this error, replace the "<" character with an entity reference:
There are 5 predefined entity references in XML:
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it.
Comments in XML
The syntax for writing comments in XML is similar to that of HTML.
With XML, White Space is Preserved
HTML reduces multiple white space characters to a single white space:
HTML: Hello my name is Tove
Output: Hello my name is Tove.
With XML, the white space in your document is not truncated.
XML Stores New Line as LF
In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF). The character pair bears some resemblance to the typewriter actions of setting a new line. In Unix applications, a new line is normally stored as a LF character. Macintosh applications use only a CR character to store a new line.
How Can XML be Used?
XML is used in many aspects of web development, often to simplify data storage and sharing.
XML Separates Data from HTML
If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.
With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML.
With a few lines of JavaScript, you can read an external XML file and update the data content of your HTML.
You will learn more about this in a later chapter of this tutorial.
XML Simplifies Data Sharing
In the real world, computer systems and databases contain data in incompatible formats.
XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data.
This makes it much easier to create data that different applications can share.
XML Simplifies Data Transport
With XML, data can easily be exchanged between incompatible systems.
One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet.
Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.
XML Simplifies Platform Changes
Upgrading to new systems (hardware or software platforms), is always very time consuming. Large amounts of data must be converted and incompatible data is often lost.
XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.
XML Makes Your Data More Available
Since XML is independent of hardware, software and application, XML can make your data more available and useful.
Different applications can access your data, not only in HTML pages, but also from XML data sources.
With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities.
XML is Used to Create New Internet Languages
A lot of new Internet languages are created with XML.
Here are some examples:
* XHTML the latest version of HTML
* WSDL for describing available web services
* WAP and WML as markup languages for handheld devices
* RSS languages for news feeds
* RDF and OWL for describing resources and ontology
* SMIL for describing multimedia for the web
If Developers Have Sense
If they DO have sense, future applications will exchange their data in XML.
The future might give us word processors, spreadsheet applications and databases that can read each other's data in a pure text format, without any conversion utilities in between.
We can only pray that all the software vendors will agree.
XML Separates Data from HTML
If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.
With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML.
With a few lines of JavaScript, you can read an external XML file and update the data content of your HTML.
You will learn more about this in a later chapter of this tutorial.
XML Simplifies Data Sharing
In the real world, computer systems and databases contain data in incompatible formats.
XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data.
This makes it much easier to create data that different applications can share.
XML Simplifies Data Transport
With XML, data can easily be exchanged between incompatible systems.
One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet.
Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.
XML Simplifies Platform Changes
Upgrading to new systems (hardware or software platforms), is always very time consuming. Large amounts of data must be converted and incompatible data is often lost.
XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.
XML Makes Your Data More Available
Since XML is independent of hardware, software and application, XML can make your data more available and useful.
Different applications can access your data, not only in HTML pages, but also from XML data sources.
With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities.
XML is Used to Create New Internet Languages
A lot of new Internet languages are created with XML.
Here are some examples:
* XHTML the latest version of HTML
* WSDL for describing available web services
* WAP and WML as markup languages for handheld devices
* RSS languages for news feeds
* RDF and OWL for describing resources and ontology
* SMIL for describing multimedia for the web
If Developers Have Sense
If they DO have sense, future applications will exchange their data in XML.
The future might give us word processors, spreadsheet applications and databases that can read each other's data in a pure text format, without any conversion utilities in between.
We can only pray that all the software vendors will agree.
Introduction to XML
What is XML?
* XML stands for EXtensible Markup Language
* XML is a markup language much like HTML
* XML was designed to carry data, not to display data
* XML tags are not predefined. You must define your own tags
* XML is designed to be self-descriptive
* XML is a W3C Recommendation
The Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.
XML Does not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.
The following example is a note to Tove from Jani, stored as XML:
Tove
Jani
Reminder
Don't forget me this weekend!
The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.
But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive or display it.
XML is Just Plain Text
XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.
However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.
With XML You Invent Your Own Tags
The tags in the example above (like and ) are not defined in any XML standard. These tags are "invented" by the author of the XML document.
That is because the XML language has no predefined tags.
The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like, etc.).
* XML stands for EXtensible Markup Language
* XML is a markup language much like HTML
* XML was designed to carry data, not to display data
* XML tags are not predefined. You must define your own tags
* XML is designed to be self-descriptive
* XML is a W3C Recommendation
The Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.
XML Does not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.
The following example is a note to Tove from Jani, stored as XML:
Don't forget me this weekend!
The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.
But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive or display it.
XML is Just Plain Text
XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.
However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.
With XML You Invent Your Own Tags
The tags in the example above (like
That is because the XML language has no predefined tags.
The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like
,
, etc.).
XML allows the author to define his own tags and his own document structure.
XML is Not a Replacement for HTML
XML is a complement to HTML.
It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.
My best description of XML is this:
XML is a software and hardware independent tool for carrying information.
XML is a W3C Recommendation
The Extensible Markup Language (XML) became a W3C Recommendation 10. February 1998.
XML is Everywhere
We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has developed and how quickly a large number of software vendors have adopted the standard.
XML is now as important for the Web as HTML was to the foundation of the Web.
XML is everywhere. It is the most common tool for data transmissions between all sorts of applications, and becomes more and more popular in the area of storing and describing information.
Subscribe to:
Posts (Atom)
