Since the introduction of the Internet Information Server (IIS) and Internet
Explorer (IE), developers have been developing application where the GUI is handled by the client computer using IE and HTML and the processing of data and creation of HTML is handled by the IIS server. This type of development has the distinct advantage that once the application is developed, everyone on the network can use it with no installation on the client machine. All a user has to know to use the application is the URL of the application, and, given the proper security rights, he can access the application.
This type of development has one distinct disadvantage when compared with
more standard development environments. Once the HTML is rendered and sent
to the client browser, it cannot be changed. The user can view the HTML document
and enter data into a form but any further processing requires the HTML form to
be submitted back to the server where a new page is rendered and returned to
the client, sometimes called a "hard refresh". Doing a hard refresh every time
the client needs more information makes the interface difficult for a user to
use in complex applications and causes unnecessary strain on the network because
frequently the same data is being sent to the client repeatedly.
The first step toward solving this problem is Dynamic HTML (DHTML). DHTML allows a developer to not only send HTML to the client but also send code that can respond to users actions. This is generally implemented using JavaScript that responds to events such as "onClick". With the introduction of Internet Explorer v4.0 (IE4) the application developer has a great deal of control over the client interface, even the ability to completely replace all or part of the HTML. Still missing from the equation is the ability to respond to an event and query the server for more information. With the introduction of Internet Explorer v5 (IE5) developers can now solve this problem using XML and ASP.
The simple example I use in this article is an Intranet application that
looks up employees in a SQL database based on parameters provided by the user.
The example allows the user to enter any combination of Last Name and/or First
Name . The application then queries the SQL database using an ASP page and
shows the user the entries in the database that matched the query without
performing a hard refresh.
Languages Used in This Article
The examples presented in this article use JavaScript on the client side
and VBScript on the server/ASP side. I develop this way for several reasons.
First I use JavaScript in hopes that some day IE and Netscape will use the
same JavaScript / Document Object Model (DOM) and my application will run in
both environments without having to do some kind of browser detection voodoo.
This may be a pipe dream but hey, I am still holding out hope that Santa is
real. I use VBScript on the server because I have been programming in basic
for twelve years and it feels like an old friend. Also using this combination
allows me to put server-side scripts and client-side scripts in the same ASP
file and quickly tell where the code will run. VBScript is always on the
server, and JavaScript is always on the client.
Requirement to run the application:
Client: Internet Explorer v5.x
Server: Internet Information Server v4.x
Overview of sample application
This application illustrates how XML communicates between IE5 and an ASP page. There are four basic steps in using XML. They are:
Create a URL that has references the appropriate ASP page with the query parameters
appended to the end of the ASP page (i.e. getEmpInfo.asp?LName=H&FName=D)
Use the XMLDOM object to send the request to the server side ASP page.
Have the ASP page query the database and put the data in a XML string that
is returned to the client.
Parse through the returned XML string and show the user the result.
Some basic XML rules
Before getting into the detail of the application here are some basic tips on XML. This is by no means a comprehensive description of XML, just some information I found handy as an XML novice.
1. XML uses matched open and close tags to identify element. All tags that are
opened must be closed.
2. XML objects have one and only one root node. This means that if you are going
to return more than one row of data in an XML string you must wrap the rows in
a single outer tag.
The following is a simple XML string that is used for this application. I have
put comments in using the // notation. Don't do this in your actual XML string creation.
<tbl_Employee> //Starting the XML string
<EmployeeRow> //Start of first row
<FirstName> //FirstName field in first row
John //Data
</FirstName> //Close FirstName field
<LastName> //LastName field in first row
Doe //Data
</LastName> //Close LastName field
</EmployeeRow> //Close first row
<EmployeeRow> //Start second row
<FirstName>
Jane
</FirstName>
<LastName>
Doe
</LastName>
</EmployeeRow>
</tbl_Employee> //Ending the XML String
4. The primary object you use to enable IE to use XML for data access is
the XMLDOM object. The XMLDOM is an XML parser. It allows the developer
to easily access data in an XML string without writing a complex parsing
routine. The second object that can be optionally used is the XMLHTTP object
which allows you to send and receive XML to and from a server. This control
is not used for this example but is very handy if you want to call a service
that can receive XML request via HTTP. I have also included an example of
this style of application in the ZIP file on my Web site
(http://www.hurstinc.com/xml/xmlexample.zip).
Communicating Between IE5 and ASP via XML
The following walks you through the sequence of events that occur when using XML
and DHTML inside IE5.
1. Presenting the user interface: First, the user is presented with the
following HTML form and allowed to enter the query parameters. The DIV
tag will be used later to show the result of the query.:
<!--Client side HTML -->
Last Name: <input type=text id=idLastName><br>
First Name: <input type=text id=idFirstName><br>
<INPUT onClick="fxSearch()" type="button" value="Search" id=button1><br>
<div id=tgtResult></div>
2. When the user clicks the button, the fxSearch function is called.
//Create the XML string to send to the server
sreq = "getEmpInfo.asp?LName=" + escape(idLastName.value);
sreq += "&FName=" + escape(idFirstName.value);
3. Now we create a XMLDOM object to send, receive and parse the XML string
//Create a xml document object, and load the server's response
source = new ActiveXObject("Microsoft.XMLDOM");
source.async = false; //Don't forget to set this
//Send the request string and read the result into the XMLDOM object
source.load(sreq);
4. When "source.load" is called the ASP page is called using the URL created
in step 1. The following is the server code that is executed to create the XML
string.
sLName = request("LName")
sFName = request("FName")
'* Connect to database and query the database
set Conn = Server.CreateObject("ADODB.Connection")
set rs = Server.CreateObject("ADODB.Recordset")
Conn.Open "DSN=hurstinc"
sSql = "select LastName + ', ' + FirstName as sName, " & _
"Title as sTitle, Email, Phone, Cell " & _
"from Employees "
' Build the WHERE clause of the SQL statement
if sLName <> "" then
sWhere = " lastname like '" & sLName & "%' "
end if
if sFName <> "" then
if sWhere <> "" then
sWhere = sWhere & " and FirstName like '" & sFName & "%' "
else
sWhere = " FirstName = '" & sFName & "%' "
end if
end if
if sWhere <> "" then
sSql = sSql & " where " & sWhere
end if
set rs = conn.Execute(sSql)
'* Create the XML recordset to send to the client
sT = "<?xml version=" & chr(34) & "1.0" & chr(34) & "?>"
sT = sT & "<tbl_EmpInfo>" & vbcrlf
do while not rs.EOF
sT = sT & "<Employee>" & vbcrlf
sT = sT & "<sName>" & xmlFix(rs("sName")) & "</sName>"
sT = sT & "<sTitle>" & xmlFix(rs("sTitle")) & "</sTitle>"
sT = sT & "<EMail>" & xmlFix(rs("EMail")) & "</EMail>"
sT = sT & "<Phone>" & xmlFix(rs("Phone")) & "</Phone>"
sT = sT & "<Cell>" & xmlFix(rs("Cell")) & "</Cell>"
sT = sT & "</Employee>"
rs.MoveNext
loop
sT = sT & "</tbl_EmpInfo>"
Response.Write sT
'* Clean up the ADO objects
rs.Close
conn.Close
set rs = nothing
set conn = nothing
5. Now that we have the data back from the server we can verify that there were
no problems loading the XML string returned by the ASP page into the XMLDOM object. If there were no errors we can show the result to the user. For this example I am building a table and showing the result.
//Check to see if there was an error parsing the response from the server
if (source.parseError != 0){
sT = "XML Error...<br>reason:" + source.parseError.reason + "<br>";
sT += "errorCode:" + source.parseError.errorCode + "<br>";
sT += "filepos:" + source.parseError.filepos + "<br>";
sT += "line:" + source.parseError.line + "<br>";
sT += "linepos:" + source.parseError.linepos + "<br>";
sT += "reason:" + source.parseError.reason + "<br>";
sT += "srcText:" + source.parseError.srcText + "<br>";
sT += "<pre>" + xmlhttp.responsexml + "</pre><br>";
status = "XML Error!";
}
else {
//Get a reference to root XML object
root = source.documentElement;
//Now build the table to show the document
sT = "<table border=1 cellspacing=0 cellpadding=0 bordercolor='gray'>";
sT += "<th>Name</th><th>Title</th><th>EMail</th><th>Phone</th><th>Cell</th>";
for (i = 0 ; i < root.childNodes.length ; i++)
{
sT += "<tr border=1 cellspacing=0 cellpadding=0 bordercolor='gray'>"
sT += "<td>" + getRS(root, i, "sName") + "</td>";
sT += "<td>" + getRS(root, i, "sTitle") + "</td>";
sT += "<td>" + getRS(root, i, "EMail") + "</a></td>";
sT += "<td>" + getRS(root, i, "Phone") + "</td>";
sT += "<td>" + getRS(root, i, "Cell") + "</td></tr>";
}
sT += "</table>";
status = "Done";
}
//Replace the contents of the <DIV> tag with the table we just built.
tgtResult.innerHTML = sT; //Show the table
}
Utility Functions
If you noticed I used a couple of non-standard function in the ASP and
JavaScript code. They were xmlFix() in the ASP code and getRS() in the
JavaScript code. The xmlFix() function cleans up data before it is sent
back to the client and the getRS() function makes getting data out of the
XMLDOM object a bit easier. Here is the listing for both:
'*
'* Source code for ASP function xmlFix()
'* by: Dennis Hurst
function xmlfix(sIn)
'*
'* Function to clean up any illegal characters in XML string
'*
dim sWorking
sWorking = sIn
if trim(sWorking & "") = "" then
sWorking = "#20"
end if
sWorking = replace(sWorking, "&", "and")
xmlFix = sWorking
end function
//
//Source code for JavaScript function getRS()
//
function getRS(rootnode, iCurRec, sFieldName){
var iField;
var sData;
sData = "";
for (iField = 0 ; iField < rootnode.childNodes.item(iCurRec).childNodes.length ; iField++){
if (rootnode.childNodes.item(iCurRec).childNodes.item(iField).tagName == sFieldName){
if (rootnode.childNodes.item(iCurRec).childNodes.item(iField).childNodes.length > 0){
sData = rootnode.childNodes.item(iCurRec).childNodes.item(iField).childNodes.item(0).text;
}
else {
sData = "_";
}
}
}
if (sData == "#20") {
sData = " ";
}
return(sData);
}
This example can be viewed at www.HurstInc.Com/xml. The full source code with error checking can also be downloaded from this site.
About the Author
Dennis Hurst is a consultant in Alpharetta, GA with over twelve years of
database and application development experience. He has his B.S. degree
in Industrial Engineering from the University of Tennessee. He specializes
in developing database driven web sites and large scale SQL databases using
ASP, DHTML, Microsoft SQL Server, Visual Basic, Oracle, Java and Delphi.
Dennis is currently working with Security First Network Bank,
the worlds first Internet bank, developing their next generation online
banking systems.
Dennis also performs consulting services with his wife Susan in their
Internet development and training business. When not hacking or playing
with his family, he enjoys sailing and traveling. Dennis can be reached
at dennis@HurstInc.com.
When errors occur on a Web site, they should be handled in a way that helps the user to get back on track. Unfortunately, setting up customized error pages in IIS usually requires something many Web developers lack -- access to and familiarity with the Web server's administrative interface. With CustomError for IIS, developers can add error pages, coded by hand or created in their favorite editor, by simply uploading them to a designated directory. No administrator intervention is required.
Stonebroom.ASP2XML(c) is an interface component designed to make building
applications that transport data in XML format much easier. It can be used
to automatically pass updates back to the original data source.
Right now the latest buzzword around town is AJAX. AJAX is an acronym for Asynchronous JavaScript and XML and is a method used to implement remote calling. The problem is that AJAX is only implemented in ASP.NET 2.0. This article will show you one way to implement remote calling without using AJAX or the XMLHttpRequest object. The technique outlined can even be used from classic ASP and is sufficient for most remote calling needs. [Read This Article][Top]
This article is the third and final installment of Alex Homer's series covering the new XML support in Microsoft SQL Server 2005. In it he covers updating the contents of xml columns, comparing traditional XML update techniques with XQuery, and using XQuery in a managed code stored procedure. [Read This Article][Top]
In the second part of his series on SQL Server 2005's new XML support, Alex Homer looks at extracting data from XML columns, comparing traditional XML data access approaches with XQuery, and combining XQuery and XSL-T.
[Read This Article][Top]
Microsoft SQL Server 2005 now offers great support for and close integration with XML as a data persistence format. In the first article of his series examining this new support, Alex Homer offers an overview of how SQL Server 2005 stores XML documents and schemas, examines how it supports querying and manipulating XML documents, and provides a simple test application that allows you to experiment with XQuery. [Read This Article][Top]
In the final article of his series on reading and writing XML in .NET 2.0, Alex Homer looks at how the updated XML document store objects XmlDocument, XmlDataDocument and PathDocument can be used to read, persist and write XML documents and fragments more easily and more efficiently than in .NET 1.x. [Read This Article][Top]
In the final article of his series on reading and writing XML in .NET 2.0, Alex Homer looks at how the updated XML document store objects XmlDocument, XmlDataDocument and PathDocument can be used to read, persist and write XML documents and fragments more easily and more efficiently than in .NET 1.x. [Read This Article][Top]
Alex Homer continues his series on reading and writing XML in .NET 2.0. In part one, we focused on the reading side of things, examining the XmlReader and XmlReaderSettings classes. In this article, we move on to look at the XmlWriter and XmlWriterSettings classes, and how they can be used to write XML documents and fragments more easily and more efficiently than in version 1.x of .NET.
[Read This Article][Top]
Alex Homer continues his series on reading and writing XML in .NET 2.0. In part one, we focused on the reading side of things, examining the XmlReader and XmlReaderSettings classes. In this article, we move on to look at the XmlWriter and XmlWriterSettings classes, and how they can be used to write XML documents and fragments more easily and more efficiently than in version 1.x of .NET. [Read This Article][Top]
In the first part of his series on reading and writing XML in .NET 2.0, Alex Homer discusses the XmlReader and XmlReaderSettings classes. The XmlReader exposes several useful new features and the all new XmlReaderSettings class makes it easy to generate single or multiple instances of an XmlReader with a range of useful properties. [Read This Article][Top]
In the first part of his series on reading and writing XML in .NET 2.0, Alex Homer discusses the XmlReader and XmlReaderSettings classes. The XmlReader exposes several useful new features and the all new XmlReaderSettings class makes it easy to generate single or multiple instances of an XmlReader with a range of useful properties. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.