asp tutorials, asp.net tutorials, sample code, and Microsoft news from 15Seconds
Data Access  |   Troubleshooting  |   Security  |   Performance  |   ADSI  |   Upload  |   Email  |   Control Building  |   Component Building  |   Forms  |   XML  |   Web Services  |   ASP.NET  |   .NET Features  |   .NET 2.0  |   App Development  |   App Architecture  |   IIS  |   Wireless
 
Pioneering Active Server
 Power Search





Active News
15 Seconds Weekly Newsletter
• Complete Coverage
• Site Updates
• Upcoming Features

More Free Newsletters
Reference
News
Articles
Archive
Writers
Code Samples
Components
Tools
FAQ
Feedback
Books
Links
DL Archives
Community
Messageboard
List Servers
Mailing List
WebHosts
Consultants
Tech Jobs
15 Seconds
Home
Site Map
Press
Legal
Privacy Policy
internet.commerce














internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

HardwareCentral
Compare products, prices, and stores at Hardware Central!

GUI Input: Solving the Hard Refresh Problem Using XML and ASP
By Dennis Hurst
Rating: 3.1 out of 5
Rate this article


  • email this article to a colleague
  • suggest an article

    Introduction

    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:

    1. 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)
    2. Use the XMLDOM object to send the request to the server side ASP page.
    3. Have the ASP page query the database and put the data in a XML string that is returned to the client.
    4. 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);
    	}
    
    
    

    References:

    Microsoft MSDN site: at http://msdn.microsoft.com

    XML Developer's Guide at http://msdn.microsoft.com/xml/xmlguide/default.asp

    15seconds.com article by Kyle Patrick XMLHTTP: Super Glue for the Web on 15seconds.com at http://www.15seconds.com/issue/991125.htm

    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.

  • Rate This Article
    Not HelpfulMost Helpful
    1 2 3 4 5
    Supporting Products/Tools
    CustomError 2.0 for IIS
    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.
    [Top]
    Stonebroom.ASP2XML
    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.
    [Top]
    Other Articles
    Sep 22, 2005 - Implementing Remote Calling Without Using AJAX
    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]
    Aug 18, 2005 - SQL Server 2005 XQuery and XML-DML - Part 3
    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]
    Aug 11, 2005 - SQL Server 2005 XQuery and XML-DML - Part 2
    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]
    Aug 3, 2005 - SQL Server 2005 XQuery and XML-DML - Part 1
    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]
    Jun 30, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 3, Cont'd
    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]
    Jun 29, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 3
    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]
    Jun 16, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 2, Cont'd
    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]
    Jun 15, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 2
    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]
    Jun 2, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 1, Cont'd
    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]
    Jun 1, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 1
    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.

    Support the Active Server Industry



    JupiterOnlineMedia

    internet.comearthweb.comDevx.commediabistro.comGraphics.com

    Search:

    Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

    Jupitermedia Corporate Info


    Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

    Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers