element, the data will be displayed on a new line. With the examples above, you will only see one line of your XML data. To navigate to the next line of data, you have to add some scripting to your code.

Add a Navigation Script Navigation has to be performed by a script. To add navigation to the XML Data Island, create a script that calls the movenext() and moveprevious() methods of the Data Island. <script type="text/javascript"> function movenext() { x=xmldso.recordset

if (x.absoluteposition < x.recordcount) { x.movenext() } } function moveprevious() { x=xmldso.recordset if (x.absoluteposition > 1) { x.moveprevious() } }

If you have IE 5.0 or higher: See how you can navigate through the XML records.

All Together Now With a little creativity you can create a full application. If you use what you have learned on this page, and a little imagination, you can easily develop this into a full application. If you have IE 5.0 or higher: See how you can add a little fancy to this application. <script type="text/javascript"> function testclick(field) { var row=field.rowIndex xmldso_list.recordset.absoluteposition=row td_title.innerHTML=xmldso_list.recordset("TITLE") td_artist.innerHTML=xmldso_list.recordset("ARTIST") td_year.innerHTML=xmldso_list.recordset("YEAR") td_country.innerHTML=xmldso_list.recordset("COUNTRY") td_company.innerHTML=xmldso_list.recordset("COMPANY") td_price.innerHTML=xmldso_list.recordset("PRICE") } <xml id="xmldso_list" src="cd_catalog.xml">

Title:
Artist:
Year:
Country:
Company:
Price:

Click on one of the CDs in the list:

Title	Artist	Country	Company	Price	Year

The XMLHttpRequest Object The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 9, and Netscape 7.

What is an HTTP Request?

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. By using the XMLHttpRequest object, a web developer can change a page with data from the server after the page has loaded. 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.

Is the XMLHttpRequest Object a W3C Standard? The XMLHttpRequest object is a JavaScript object, and is not specified in any W3C recommendation. 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.

Creating an XMLHttpRequest Object For Mozilla, Firefox, Safari, Opera, and Netscape: var xmlhttp=new XMLHttpRequest()

For Internet Explorer: var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Example <script type="text/javascript"> var xmlhttp function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest() } // code for IE

else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change xmlhttp.open("GET",url,true) xmlhttp.send(null) } else { alert("Your browser does not support XMLHTTP.") } } function state_Change() { // if xmlhttp shows "loaded" if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { // ...some code here... } else { alert("Problem retrieving XML data") } } }

Try it yourself using JavaScript The syntax is a little bit different in VBScript: Try it yourself using VBScript Note: 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.

Why are we Using Async in our Examples? All the examples here use the async mode (the third parameter of open() set to true). 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!

More Examples Load a textfile into a div element with XML HTTP (JavaScript) Make a HEAD request with XML HTTP (JavaScript) Make a specified HEAD request with XML HTTP (JavaScript) List data from an XML file with XML HTTP (JavaScript)

The XMLHttpRequest Object Reference Methods Method

Description

abort()

Cancels the current request

getAllResponseHeaders()

Returns the complete set of http headers as a string

getResponseHeader("headername")

Returns the value of the specified http header

open("method","URL",async,"uname","pswd") Specifies the method, URL, and other optional attributes of a request 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. The URL parameter may be either a relative or complete URL. 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 send(content)

Sends the request

setRequestHeader("label","value")

Adds a label/value pair to the http header to be sent

Properties Property

Description

onreadystatechange

An event handler for an event that fires at every state change

readyState

Returns the state of the object: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete

responseText

Returns the response as a string

responseXML

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

status

Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")

statusText

Returns the status as a string (e.g. "Not Found" or "OK")

JAVASCRIPT : <script type="text/javascript"> var xmlhttp function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) {

xmlhttp=new XMLHttpRequest() } // code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change xmlhttp.open("GET",url,true) xmlhttp.send(null) } else { alert("Your browser does not support XMLHTTP.") } } function state_Change() { // if xmlhttp shows "loaded" if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { alert("XML data OK") document.getElementById('A1').innerHTML=xmlhttp.status document.getElementById('A2').innerHTML=xmlhttp.statusText document.getElementById('A3').innerHTML=xmlhttp.responseText } else { alert("Problem retrieving XML data:" + xmlhttp.statusText) } } }

Using the HttpRequest Object

status:

<span id="A1">

status text: <span id="A2">

response:
<span id="A3">

Load a textfile into a div element with XML HTTP (JavaScript) <script type="text/javascript"> var xmlhttp function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest() } // code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change xmlhttp.open("GET",url,true) xmlhttp.send(null) } else { alert("Your browser does not support XMLHTTP.") } } function state_Change()

{ // if xmlhttp shows "loaded" if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { document.getElementById('T1').innerHTML=xmlhttp.responseText } else { alert("Problem retrieving data:" + xmlhttp.statusText) } } }
Click Make a HEAD request with XML HTTP (JavaScript) <script type="text/javascript"> var xmlhttp function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest() } // code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) {

xmlhttp.onreadystatechange=state_Change xmlhttp.open("GET",url,true) xmlhttp.send(null) } else { alert("Your browser does not support XMLHTTP.") } } function state_Change() { // if xmlhttp shows "loaded" if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { document.getElementById('T1').innerHTML=xmlhttp.getAllResponseHeaders() } else { alert("Problem retrieving data:" + xmlhttp.statusText) } } }

With a HEAD request, a server will return the headers of a resource (not the resource itself). This means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.

Make a specified HEAD request with XML HTTP (JavaScript) <script type="text/javascript"> var xmlhttp

function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest() } // code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change xmlhttp.open("GET",url,true) xmlhttp.send(null) } else { alert("Your browser does not support XMLHTTP.") } } function state_Change() { // if xmlhttp shows "loaded" if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { document.getElementById('T1').innerHTML="This file was last modified on: " + xmlhttp.getResponseHeader('Last-Modified') } else { alert("Problem retrieving data:" + xmlhttp.statusText) } } }

With a HEAD request, a server will return the headers of a resource (not the resource itself). This means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.

List data from an XML file with XML HTTP (JavaScript) <script type="text/javascript"> var xmlhttp function loadXMLDoc(url) { xmlhttp=null // code for Mozilla, etc. if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest() } // code for IE else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } if (xmlhttp!=null) { xmlhttp.onreadystatechange=onResponse; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP.") } } function checkReadyState(obj) { if(obj.readyState == 4)

{ if(obj.status == 200) { return true; } else { alert("Problem retrieving XML data"); } } } function onResponse() { if(checkReadyState(xmlhttp)) { var response = xmlhttp.responseXML.documentElement; txt="" x=response.getElementsByTagName("CD") for (i=0;i<x.length;i++) { txt=txt + "" xx=x[i].getElementsByTagName("TITLE") { try { txt=txt + "" } catch (er) { txt=txt + "" } } xx=x[i].getElementsByTagName("ARTIST") { try { txt=txt + "" } catch (er) { txt=txt + "" } } txt=txt + "" }

txt=txt + "

" + xx[0].firstChild.data + "

" + xx[0].firstChild.data + "

" document.getElementById('copy').innerHTML=txt } }

Save Data to an XML File 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.

Create and Save an XML File Storing data in XML files is useful if the data is to be sent to applications on nonWindows platforms. Remember that XML is portable across all platforms and the data will not need to be converted! 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: <% Dim xmlDoc, rootEl, child1, child2, p 'Create an XML document Set xmlDoc = Server.CreateObject("Microsoft.XMLDOM") 'Create a root element and append it to the document Set rootEl = xmlDoc.createElement("root") xmlDoc.appendChild rootEl 'Create and append child elements Set child1 = xmlDoc.createElement("child1") Set child2 = xmlDoc.createElement("child2") rootEl.appendChild child1 rootEl.appendChild child2 'Add an XML processing instruction 'and insert it before the root element Set p=xmlDoc.createProcessingInstruction("xml","version='1.0'") xmlDoc.insertBefore p,xmlDoc.childNodes(0) 'Save the XML file to the c directory xmlDoc.Save "c:\test.xml"

%>

If you open the saved XML file it will look something like this ("test.xml"):

Real Form Example Now, we will look at a real HTML form example. 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. "customers.htm":

Enter your contact information

First Name:
Last Name:
Country:
Email:

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: <% dim xmlDoc dim rootEl,fieldName,fieldValue,attID dim p,i 'Do not stop if an error occurs On Error Resume Next Set xmlDoc = server.CreateObject("Microsoft.XMLDOM") xmlDoc.preserveWhiteSpace=true 'Create a root element and append it to the document Set rootEl = xmlDoc.createElement("customer")

xmlDoc.appendChild rootEl 'Loop through the form collection for i = 1 To Request.Form.Count 'Eliminate button elements in the form if instr(1,Request.Form.Key(i),"btn_")=0 then 'Create a field and a value element, and an id attribute Set fieldName = xmlDoc.createElement("field") Set fieldValue = xmlDoc.createElement("value") Set attID = xmlDoc.createAttribute("id") 'Set the value of the id attribute equal to the name of 'the current form field attID.Text = Request.Form.Key(i) 'Append the id attribute to the field element fieldName.setAttributeNode attID 'Set the value of the value element equal to 'the value of the current form field fieldValue.Text = Request.Form(i) 'Append the field element as a child of the root element rootEl.appendChild fieldName 'Append the value element as a child of the field element fieldName.appendChild fieldValue end if next 'Add an XML processing instruction 'and insert it before the root element Set p = xmlDoc.createProcessingInstruction("xml","version='1.0'") xmlDoc.insertBefore p,xmlDoc.childNodes(0) 'Save the XML file xmlDoc.save "c:\Customer.xml" 'Release all object references set xmlDoc=nothing set rootEl=nothing set fieldName=nothing set fieldValue=nothing set attID=nothing set p=nothing 'Test to see if an error occurred if err.number<>0 then response.write("Error: No information saved.") else response.write("Your information has been saved.") end if %>

Note: If the XML file name specified already exists, it will be overwritten! The XML file that will be produced by the code above will look something like this ("Customer.xml"): <customer> Hege

Refsnes Norway [email protected]

XML DHTML Behaviors Internet Explorer 5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

Behaviors - What are They? IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS. How do behaviors work? By using XML we can link behaviors to any element in a web page and manipulate that element. DHTML behaviors do not use a <script> tag. Instead, they are using a CSS attribute called "behavior". This "behavior" specifies a URL to an HTC file which contains the actual behavior (The HTC file is written in XML).

Syntax behavior: url(some_filename.htc)

Note: The behavior attribute is only supported by IE 5 and higher, all other browsers will ignore it. This means that Mozilla, Firefox, Netscape and other browsers will only see the regular content and IE 5+ can see the DHTML behaviors.

Example The following HTML file has a <style> element that defines a behavior for the

element:

<style type="text/css"> h1 { behavior: url(behave.htc) }

Mouse over me!!!

The XML document "behave.htc" is shown below: <script type="text/javascript"> function hig_lite() { element.style.color='red' } function low_lite() { element.style.color='blue' }

The behavior file contains a JavaScript and the event handlers for the script. Try it yourself (mouse over the text in the example). The following HTML file has a <style> element that defines a behavior for elements with an id of "typing": <style type="text/css"> #typing { behavior:url(typing.htc); font-family:'courier new'; } <span id="typing" speed="100">IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

How do behaviors work?
By using XML we can link behaviors to any element in a web page and manipulate that element.

The XML document "typing.htc" is shown below: <method name="type" /> <script type="text/javascript"> var i,text1,text2,textLength,t function beginTyping() { i=0 text1=element.innerText textLength=text1.length element.innerText="" text2="" t=window.setInterval(element.id+".type()",speed) } function type() { text2=text2+text1.substring(i,i+1) element.innerText=text2 i=i+1 if (i==textLength){clearInterval(t)} }

TRY IT UR SELF : <style type="text/css"> #typing { behavior:url(typing.htc); font-family:'courier new'; } <span id="typing" speed="100">IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

How does behaviors work?
By using XML we can link behaviors to any element in a web page and manipulate that element.

XML Related Technologies XHTML (Extensible HTML) is a stricter and cleaner version of HTML. XML DOM (XML Document Object Model) defines a standard way for accessing and manipulating XML documents. XSL (Extensible Style Sheet Language) - XSL consists of three parts: XSLT - a language for transforming XML documents, XPath - a language for navigating in XML documents, and XSL-FO - a language for formatting XML documents. XSLT (XSL Transformations) is used to transform XML documents into other XML formats, like XHTML. XPath is a language for navigating in XML documents. XSL-FO (Extensible Style Sheet Language Formatting Objects) is an XML based markup language describing the formatting of XML data for output to screen, paper or other media. XLink (XML Linking Language) is a language for creating hyperlinks in XML documents. XPointer (XML Pointer Language) allows the XLink hyperlinks to point to more specific parts in the XML document. DTD (Document Type Definition) is used to define the legal elements in an XML document. XSD (XML Schema) is an XML-based alternative to DTDs. XForms (XML Forms) uses XML to define form data. XQuery (XML Query Language) is designed to query XML data. SOAP (Simple Object Access Protocol) is an XML-based protocol to let applications exchange information over HTTP. WSDL (Web Services Description Language) is an XML-based language for describing web services. RDF (Resource Description Framework) is an XML-based language for describing web resources. RSS (Really Simple Syndication) is a format for syndicating news and the content of news-like sites.

WAP (Wireless Application Protocol) was designed to show internet contents on wireless clients, like mobile phones. SMIL (Synchronized Multimedia Integration Language) is a language for describing audiovisual presentations. SVG (Scalable Vector Graphics) defines graphics in XML format.