I was asked to provide a bit more documentation so I thought I’d show a slightly more detailed example.

First lets start with a very simple form:

<form>
number one: <input type="text" name="one" id="one"><br>
number two: <input type="text" name="two" id="two"><br>
</form>

This form has two simple text fields named one and two. I want to use Spry to send the values of these two fields to the server. First lets add a simple button:

<input type="button" value="Add" onClick="doAddPost()">

This simply fires off a JavaScript function. I’m going to break the function up and explain each and every line to make it as clear as possible. First, start the function.

function doAddPost() {

We need to know where we will be posting the form, so next I define the URL:

var url = "moon.cfm";

Now I need to grab the values I want to post. Normally with a submit button you don’t have to worry about this. The browser simply sends all the form fields. In this case though I have to specify the fields manually. First I’ll grab the value of the form field, one, using the Spry/Prototype $() shortcut:

var one = $("one").value;

Then I’ll grab the value from the second form field:

var two = $("two").value;

The form post data must be sent like a query string: foo1=value1&foo2=value2. Again, I have to do this by hand:

var formData = 'one='+one+'&two='+two;

Next I encode any values in the string, like spaces or other special characters:

formData = encodeURI(formData);

So the last thing we do is run the Spry code that will handle the form post. I talked about this more in the last post so I won’t spend a lot of time on it.

Spry.Utils.loadURL(‘POST’, url, true, resFunc, {postData: formData, headers: {“Content-Type”: “application/x-www-form-urlencoded; charset=UTF-8″}});

The first argument defines the type of request (GET or POST). The second argument is the URL value I defined earlier. The third argument defines if the call is asynchronous or not. The fourth argument defines a function to run with the result of the HTTP call.

Lastly there is a structure of arguments that define the request. Again I have to thank Keith for figuring this out.

So here is the function again all in one code block:

function doAddPost() {
    var url = "moon.cfm";
    var one = $("one").value;
    var two = $("two").value;
    var formData = 'one='+one+'&two='+two;
    formData = encodeURI(formData);
    Spry.Utils.loadURL('POST', url, true, resFunc, {postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

So how do we handle this server side? We have a few options. As I mentioned, the loadURL function lets you define code to run with the result. So whatever the server returned I can work with in JavaScript. This can be either a string or XML or WDDX. To make it easier I’ll just return a simple string:

<cfsetting enablecfoutputonly=true>
<cfparam name="form.one" default="0">
<cfparam name="form.two" default="0">

<cfif isNumeric(form.one) and isNumeric(form.two)>
    <cfoutput>#form.one+form.two#</cfoutput>
<cfelse>
    <cfoutput>0</cfoutput>
</cfif>

Obviously there isn’t anything too complex here, just the addition of two numbers. I take the result and simply output it directly to the client requesting the data. With me so far?

Now let’s return to JavaScript and work with the result. I had specified the a function named resFunc would handle the result. The function is all of 4 lines:

function resFunc(request) {
    var result = request.xhRequest.responseText;
    $("result").innerHTML = "Result was: " + result;
}

Spry automatically passes a collection of data back. The information I’m interested in resides in xhRequest.responseText. Once I have that, I can write out the result in the browser.

So I had mentioned more than once I wanted to make this process a bit simpler. Here is my first draft at it:

function doFormPost(url,formlist,resfunc) {
    var formdata = '';
    var formarray = formlist.split(',');
    for(var i=0; i < formarray.length; i++) {
      formdata+='&'+formarray[i]+'=';
      var fValue = $(formarray[i]).value;
      formdata+=fValue;
    }
    formData = encodeURI(formdata);
    Spry.Utils.loadURL('POST', url, true, resfunc, {postData: formdata, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

This lets you pass in a url and a list of form fields to post. The third argument is optional. So to do a Spry post you can do this instead of the button and custom function I had before:

<input type="button" value="Add3" onClick="doFormPost('moon.cfm', 'one,two',resFunc)">

As I said though this is just a first draft. Right now it assumes just text fields.

Comments

Tag:

Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Once upon a time, software used to be something to be purchased shrinkwrapped from value-added resellers, and many times the purchase coincided with a hardware purchase of substantial margins.

Fast forward to the 21st Century. On the VAR side, those that have shifted to focus on solutions and not hardware are seeing the growth.

Tekrati reported how IT Europa’s research of the top growing VARs has found the solution side enjoying an average growth rate of nearly 12 percent.

“Solution VARs are showing the way for the channel model of the future, with 67 percent of their staff involved in support services, software development, and solution delivery,” Alan Norman, Managing Director of IT Europa, said in the report.

IT Europa also found that consulting and project management have commanded much better revenues than the typical support and service contracts.

Businesses have a greater need for implementation and development of better and newer business processes than for hardware-related services.

That may be due to on-site personnel being able to support such hardware instead of paying someone else to be the on-call service department.

The ability to make a legacy system into a more productive, cost effective process can profit a firm well beyond the fees it would pay the VAR for solutions.

Tekrati noted the solution VARs in the IT Europa report generate 54% of their income from the SME sector, (with 50 to 1000 employees) and 27% from the Enterprise sector (1000+).

The biggest gainers proved to be in Russia and Turkey. Both countries demonstrated about 50 percent growth. The U.K. likewise had an impressive average growth rate, which IT Europa pegged at 15.4 percent.

—
Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

David Utter is a staff writer for WebProNews covering technology and business.

One of the vendors under consideration at the time was CipherTrust, and Joel was going to purchase a number of systems in order to evaluate them firsthand prior to making a final recommendation to his client.

Here’s what happened:

Joel: “The salesperson was ready to give us a local value-added reseller (VAR) so we could buy the $5,000 unit. But then he passed me over to CipherTrust PR, which passed me over to the vice president of sales, who passed me to a fourth person so we could apply to be a member of their partner program. This was getting ridiculous, so I explained again that I simply wanted to buy a box for my own company to use. This time, silence. No reply.
After waiting a week, I found a VAR and ordered a system. Then the VAR called back: CipherTrust refused to fill the order. Why is CipherTrust unwilling to sell me a box? I don’t know; they aren’t talking.

More frightening than my experience is the possibility that the company might do this to an existing customer. What good is a security product if the vendor refuses to sell you service on it? Without updates, most of these products are barely useful as doorstops.

In our tests, we look at products, not companies. Things such as training, finances and corporate style don’t come into it. But when it comes to buying products, our tests aren’t enough. It’s important to investigate all those peripheral aspects of the vendor before you sign a purchase order. I was reminded of that the hard way.” (emphasis added)

Here’s the full story.

Any other good stories out there of cases where a vendor simply chose not to show up?

(hat tip: mike)

Add to | Digg | Yahoo! My Web

Technorati:

Christopher Carfi, CEO and co-founder of Cerado, looks at sales, marketing, and the business experience from the customers point of view. He currently is focused on understanding how emerging social technologies such as blogs, wikis, and social networking are enabling the creation of new types of customer-driven communities. He is the author of the Social Customer Manifesto weblog, and has been occasionally told that he drives and snowboards just a little too quickly.

All of the calendar based schedules I’ve done start with the very simple files presented here. This base version doesn’t have much flexibility: it lets you put in one note per day, and anyone who can access the schedule can overwrite that with new information. Obviously most businesses need additional features like multiple items, control of access, and probably much more. But this is the starting point we can build from.

As shown here, your web server needs to support SSI (Server Side Includes). Nowadays most of us would do this with php instead, but I still use the Perl methods because I’m old and stuck in my ways. Maybe I’ll show a php version later.

The entire scheduling program consists of one web page. You can call it whatever you want, but the cgi-bin perl script needs to know where it can find it in your filesystem. The cgi script uses a Perl database to store scheduled events; that can be located anywhere also but of course has to be accessible by the user Apache is running as.

Note that the script serves two purposes: it is called to add items to the schedule and as a server side include to display scheduled events. In this version we have no pretty formatting or other niceties that almost certainly would be needed in a production version.

The script reads the web page and displays it when it is called for a specific day; this could have been done differently with a basically empty web page depending on a cgi script to provide the contents. However, this design lets unskilled people edit the web page without affecting the script.

The web page and associated script follow:

# sched.html
<html><head><title>Schedule</title></head><body bgcolor="lightgreen">
<h2>Schedule</h2>

print "</body></html>" if ($date);

That’s all of it. It’s simple, but can actually be easily expanded to much more complexity without a great deal of effort.

*Originally published at APLawrence.com

Add to | DiggThis | Yahoo! My Web

Technorati:

A.P. Lawrence provides SCO Unix and Linux consulting services http://www.pcunix.com

These awards are significant because they’re voted on and awarded by people and groups within the value-added reseller (VAR) industry. This means that professionals are evaluating the entries and judging them based on high levels of knowledge about the industry.

“Being voted the Best VAR Software Solution at IT ChannelVision underscores our commitment to the 100% dedication we have to our channel partners,” said Steve Orenberg, President, Kaspersky Lab, Inc. “When it comes to fighting Internet crime with our top rated anti-virus, anti-spam, anti-spyware and anti-hacker solutions, we see Kaspersky Lab as a very real win-win proposition – the highest quality and lowest cost solution for our customers and the best possible margins and support in the industry for our partners.”

The IT ChannelVision puts together three events into one groovy event. Those events include the VARVision for value-added resellers; System Builder summit, a white box marketing event; and EnterpriseVision, an event for solution providers serving enterprise customers.

“IT ChannelVision attendees are senior decision-makers who directly influence their customers’ technology buying decisions,” said Eric Lesonsky, senior global director for IT ChannelVision. “Vendor winners and nominees of the IT ChannelVision awards should all be proud to be recognized as among the finest channel solutions in the North American IT marketplace today and for the year to come.”

Kaspersky Lab is known for their complete package of security software. Their software packages provide anti-virus, anti-spyware, anti-spam and firewall capabilities for their customers. Vision Events are put together by Gartner.

John Stith is a staff writer for WebProNews covering technology and business.

It is always good idea to install everything on your own – however Great Plains requires combination of computer networking, some programming, good accounting/distribution/logistics/reporting background – so it is not a surprise that Microsoft Business Solutions requires their customers to have specially assigner Microsoft Great Plains Partner/VAR/Reseller to serve the account.

If you are IT Director/Controller who has the dilemma of proper partner selection – read this and you will have the clues on where to look further.

1. Local partners – if you are in the remote area – there is often seen the opinion that local partner is the best choice. Consider this however as a contra argument – local partners maybe tiny with one/few consultants and they may not serve you adequately when you have somewhat complex – such as Manufacturing, complex Project Accounting needs, integration with UNIX-based legacy system, etc.

2. Mid-Size partners in Major Business Metros – these companies were classical Great Plains VARS/Resellers with balanced application consulting and technical expertise. Please, consider these points, however: in recent recession most of such partners were bought or merged with big auditing companies and lost their flexibility, plus their consulting fee went up due to the fact of belonging to big conglomerates.

3. Nation-wide partners with local representative offices. This maybe a very good option, if you need kind of reliability and complete expertise – missing parts could be taken from different location with this specialization. However the hourly rates are probably the highest among the first three.

4. One-Project-Manager partner with Offshore consultants – Well – this is very new type of partners – and you potentially can save a lot of money if you are risk taker – hourly rate is usually lower, price of the failure maybe higher.

5. Nation-wide partner with tiny local representation, serving via remote support. We are in this category, so let me tell you couple of good points here. Companies like ours – have to specialize in order to do excellent job in what we claim is our specialization (technology challenging projects with heavy customization needs). Serving via remote support lets us keep reasonably low rates and often go for fixed bids.

Also couple of hints about how do you switch the partner. It is actually more easy than you may think – you just send the new proposed partner the letter in free format saying that you would like to switch to you as my Microsoft Business Solutions partner – and this is it.

Happy shopping! if you want us to help you – give us a call 1-866-528-0577! help@albaspectrum.com

Andrew Karasev is Chief Technology Officer in Alba Spectrum Technologies USA nationwide Microsoft CRM, Microsoft Great Plains customization company, based in Chicago, California, Texas, New York, Georgia and Florida and having locations in multiple states and internationally (www.albaspectrum.com), he is Dexterity, SQL, C#.Net, Crystal Reports and Microsoft CRM SDK developer.

Details :

Consider the following XML file:

Now, what we want the script to do is, display the above XML data in the following manner :

Algorithm :

• Read the XML file
• We point a variable, tree to the first node (XML tag) of the XML data.
• If the node has child nodes :
• Print ” <ul><li> “;
• For each child node, traverse(tree.childNodes(nodeNum))
• Print ” </li></ul> “;
• If the node does not have any child :
• Print the node’s value.

Script and explanation :

Now let us take a look at the script :

The above code creates a new instance of the Microsoft.XMLDOM ActiveX object.

function loadXML(xmlFile) {
	xmlDoc.async="false";
	xmlDoc.onreadystatechange=verify;
	xmlDoc.load(xmlFile);
}   

The loadXML() function is used to load a particular .xml file. This function makes reference to the verify() function, which is as follows :

function verify() {
	if(xmlDoc.readyState!=4)
		return false;
}   

The loading of a XML file goes through 5 stages :

• 0 – Object is not initialized
• 1 – Loading object is loading data
• 2 – Loaded object has loaded data
• 3 – Data from object can be worked with
• 4 – Object completely initialized

The state of loading of a XML file is accessible through the XMLDOM’s readyState property. If suppose a file (object) is not initialized then xmlDoc.readyState will return 0 and so on. Thus, in the loadXML() function we verify the status of loading of the XML document because we do not want to use a partially or uninitialized object.

Now, we will see the main function that does the XML data traversal, traverse() :

The traverse() function is a recursive function that takes a node as it’s argument.

As explained earlier in the algorithm, first the function checks if the node has any childs. If the node has any childs, necessary indentation is done using HTML lists ( <ul>,<li> tags). Next, for each child node of this node, the function traverse() is called (recursively) with the argument as that child node.

If the node (argument passed to traverse()) has no child nodes, then the function prints the value held by that node (tag). In this way, the tree structure for the XML file is generated. Now, we will take a look at the initTraverse() function :

function initTraverse(file) {
	loadXML(file);
	var doc=xmlDoc.documentElement;
	traverse(doc);
}   

The initTraverse() function takes a XML filename as it’s argument. This function first loads the XML file, sets the variable doc to the root node of the XML data and then traverses the XML data using the traverse() function with argument as the root node, i.e doc.

This function is the one that is called when you want to generate the tree structure of a XML file.

All the above code may be placed in an external .js file. The following code must be placed where the tree form of a XML file has to be generated :

initTraverse("anyXMLfile.xml"); 

Script listing :

<script language="JavaScript">
//////////////////////////////////////////////////
//	XML Data Traversal			//
// 	(c) 2003 Premshree Pillai		//
//	http://www.qiksearch.com		//
//	http://premshree.resource-locator.com	//
//	Email : qiksearch@rediffmail.com	//
//////////////////////////////////////////////////

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile) {
	xmlDoc.async="false";
	xmlDoc.onreadystatechange=verify;
	xmlDoc.load(xmlFile);
}

function verify() {
	if(xmlDoc.readyState!=4)
		return false;
}

function traverse(tree) {
	if(tree.hasChildNodes()) {
		document.write('<ul><li>');
		document.write('<b>'+tree.tagName+' : </b>');
		var nodes=tree.childNodes.length;
		for(var i=0; i<tree.childNodes.length; i++)
			traverse(tree.childNodes(i));
		document.write('</li></ul>');
	}
	else
		document.write(tree.text);
}

function initTraverse(file) {
	loadXML(file);
	var doc=xmlDoc.documentElement;
	traverse(doc);
}
</script>   

You can find this XML based JavaScript, “XML Data Traversal” at
http://premshree.resource-locator.com/javascripts/xml/traversal/traversal.htm.

I hope, this article has explained “XML Data Traversal”. Your comments and suggestions are welcome.

2003 Premshree Pillai.
Websites: http://www.qiksearch.com, http://premshree.resource-locator.com

Premshree Pillai studies engineering in Information Technology at
Mumbai University, Mumbai, India. He is a programming enthusiast
and maintains a Website (http://www.qiksearch.com), where he posts
his scripts. He is also a freelance writer and has written for a
range of popular Indian magazines.

Abstract

There are many algorithms of automating the process of receiving web updates.
But most of them have the same simple steps:

Connect to the web server and retrieve information about updates available for downloading.
Check whether the version available on the web is up-to-date comparing to the version of your program.
If the web version is up-to-date then download update file(s).
Process downloaded update file(s) with appropriate method: unpacking, copying, executing etc.

Also there are some additional requirements for web update process:

Updated application should have possibility for updating own exe file which it has been run from.
Downloading process should not interfere with main application process and should allow a user to continue his usual work.
Downloading process can be interrupted by a user at any moment and later continued from the last stop place.

Implementation

To implement the first step of web update we need to place some resource (file for example), which contains information about last update, on the website. In our case we use XML-based resource file webupdate.xml. If you like you can use old fashioned TXT file instead of fancy XML format – this is just a matter of your personal preferences.

The main reason why we use XML format is simplicity of parsing information. Since we need to check for matching between your actual program version and version of update available on the web (step 2) we have to save and store information about last update to the local disk.

There are two methods for loading and storing of update information by using the Microsoft Document Object Model (DOM) library:

procedure TclWebUpdate.GetUpdateInfo(); var Dom: IXMLDomDocument; begin Dom := CoDOMDocument.Create(); Dom.load(FDownloader.LocalFile); UpdateInfo.FURL := Dom.selectSingleNode('updateinfo/update/@url').text; UpdateInfo.FRunParameters := Dom.selectSingleNode('updateinfo/update/@runparameters').text; UpdateInfo.FVersion := Dom.selectSingleNode('updateinfo/update/@version').text; UpdateInfo.FSize := Dom.selectSingleNode('updateinfo/update/@size').text; UpdateInfo.FProductURL := Dom.selectSingleNode('updateinfo/product/@url').text; UpdateInfo.FProductName := Dom.selectSingleNode('updateinfo/product/@name').text; UpdateInfo.FAuthor := Dom.selectSingleNode('updateinfo/product/@author').text; UpdateInfo.FEmail := Dom.selectSingleNode('updateinfo/product/@email').text; Dom.load(LastUpdateInfoFile); ActualInfo.FSuccess := Dom.selectSingleNode('update/@success').text; ActualInfo.FUpdateDate := Dom.selectSingleNode('update/@updatedate').text; ActualInfo.FVersion := Dom.selectSingleNode('update/@version').text; ActualInfo.FFileName := Dom.selectSingleNode('update/@file').text; end;

procedure TclWebUpdate.StoreLastUpdateInfo(ASuccess: Boolean); var Dom: IXMLDomDocument; Node: IXMLDomElement; begin Dom := CoDOMDocument.Create(); Node := Dom.createElement('update'); Dom.appendChild(Node); Node.setAttribute('file', ActualInfo.FileName); Node.setAttribute('version', ActualInfo.Version); Node.setAttribute('success', ActualInfo.Success); Node.setAttribute('updatedate', ActualInfo.UpdateDate); Dom.save(LastUpdateInfoFile); end;

Here are the ActualInfo and the UpdateInfo properties which represent structures corresponding to current application version and version of update available on the web. If the downloading process has been completed successfully the update information has been saved to the local file (lastupdate.xml by default). So if you want to run web update one more time using our demo programs (demo1src.zip, demo2src.zip) you may delete this file or modify the version parameter to the previous value (in our case just replace the version attribute with the “1.0″ value).

After the whole update info is received we need to compare versions and determine whether should we download and finally apply the update available on the web. If you are using simple enumeration for your updates (like 1, 2, 3 …. ) then the comparing method looks very simple:

function TclWebUpdate.CheckUpdateVersion(const ANewVersion, ActualVersion: string): Boolean; begin Result := StrToIntDef(ANewVersion, 0) > StrToIntDef(ActualVersion, 0); end;

This function returns True if the web version is up-to-date and needed to be downloaded.
In case of using the standard version format which consists of the following parts: major version.minor version.release.build (2.5.0.33 e.g.) then you need to perform some additional calculations.

This function converts each component version to the corresponding tens place:

function MakeCompleteNumber(S: string): Integer;
var
   i, Cnt, Len, OldPos: Integer;
begin
   S := Trim(S);
   Result := 0;
   Len := Length(S);
   Cnt := 0;
   OldPos := Len + 1;
   for i := Len downto 1 do
   begin
      if (S[i] = '.') then
      begin
         Result := Result + StrToIntDef('0' + system.Copy(S, i + 1, OldPos - i - 1), 0) * Round(Power(1000, Cnt));
         Inc(Cnt);
         OldPos := i;
      end else
      if (i = 1) then
      begin
         Result := Result + StrToIntDef('0' + system.Copy(S, i, OldPos - i), 0) * Round(Power(1000, Cnt));
      end;
   end;
end; 

After all checks completed and web update is up-to-date then the update file downloading process begins. In order to perform the downloading in the background mode without interfering with main application process we use the Clever Downloader component from the Clever Internet Suite library. Following code sample shows how easy downloading process can be implemented:

... FDownloader: TclDownloader; ... FDownloader := TclDownloader.Create(nil); FDownloader.OnProcessCompleted := DoOnProcessCompleted; ... procedure TclWebUpdate.StartDownloading(); begin FDownloader.URL := UpdateInfo.URL; FDownloader.UserName := UserName; FDownloader.Password := Password; FDownloader.Start(True); end;

Since the Start downloader method is called with Async parameter which equal to True the component returns control immediately after calling of this method. So to find out the time when the downloading process is completed we use the OnProcessCompleted downloader event.

To process downloaded update file(s) we implement simple algorithm with using of ShellExecute WinApi function. So if you are about to extract archived update files you can simple call this function as follows:

ShellExecute(Application.Handle, 'open', 'webupdate.zip', nil, nil, SW_SHOWNORMAL);

This function opens your archive with application which assigned as default one for such a file type. If you have WinZip installed and it is assigned as default application for the ‘*.zip’ files then the webupdate.zip archive will be opened and unpacked. You can specify your own method of handling and applying updates to suit your own needs.

Full component source code is available at component.zip and allows you to customize the executing process with specifying the run application and its run parameters. This can be useful if you want to run a custom application with its specific command line parameters.

It’s well known that to replace running application you have to terminate it before. You can make the update process more comfortable and include the code which closes the application just after ShellExecute call:

... var CanTerminate: Boolean; ... if NeedTerminate then begin CanTerminate := True; DoTerminating(CanTerminate); // raises an event which user can overwrite in order to perform some custom actions on application terminating request or cancel closing if CanTerminate then begin Application.Terminate(); end; end;

Requirements

You must have installed the Internet Explorer version 3.0 or higher on the client computer.

This code is constantly improved and your comments and suggestions are always welcome.

Please write us at info@clevercomponents.com

With best regards,
Sergey S
Clever Components team.
www.clevercomponents.com

For your convenience we provide following downloads:

component.zip – an archive with WebUpdate component. Delphi 5, 6, 7 packages are available at this moment.
demo1src.zip – an archive with source code for the first sample.
demo2src.zip – an archive with source code for the second sample.
demo1exe.zip – an archive with compiled executable file for the first sample.
demo2exe.zip – archive with compiled executable file for the second sample.
webupdate.xml – web resource which provides the update information.
Clever Internet Suite downloads - demo version of Clever Internet Suite.

Sergey S. is a member of the Clever Components Team. The history of our site began from an Interbase DataPump and the original idea was to provide Delphi / Borland C++ and Interbase developers with high quality consultations. Nowadays we have many satisfied customers and can offer some excellent tools and utilities. We wish to maintain the highest standards in our service and keep our customers happy. Please feel free to contact us at info@clevercomponents.com

The saving and displaying process is nearly always required. In this article I will show you how you can easily use an ASP form to add data into a XML file and how you can retrieve this data to display it in a well formed table. We will create an example ASP page, in which the user will be able to enter his Name, Age, Gender and a Postalcode. This data will be stored in a XML file. To display the data we will use XSL. The example ASP page and the resulting table look like this:

Its has always been important for me to divide the ASP Page in two parts and I would suggest you to do the same. Some people are mixing the asp and html code, but I would not recommend it to you. But sometimes it isn`t possible to spilt the ASP Page in two parts, in this case you will need to find your own and best suitable way. But anyway, try it! Here an image of the structure how my ASP page always looks like:

The first part contains a simple Form, and the second part contains the ASP Code which will do the saving for us. For a better understanding we will start with the Form.

Part I the Form:

You can create any simple form, with any controls you like. In addition to the other controls, we also need a submit and a reset button.

In my example I have created a simple form called frmPerson, which contains three textfields and a drop down field.

This form will use the post method to process the entered data.

Here is the code of my form:

<form action="VerifyPerson.asp" method="post" name="frmPerson" id="frmPerson">
<INPUT name=Name>
<INPUT name=Age>
<SELECT style="WIDTH: 154px" name=Gender>
    <OPTION value=Male selected>Male</OPTION>
    <OPTION value=Female>Female</OPTION>
</SELECT>
<INPUT name=Postalcode>
<INPUT type=submit value=Submit name=submit><INPUT type=reset value=Reset name=reset>
</form>

It is very important to give each used TAG which will hold the data, a variable name.

For Example: The name textfield <INPUT name=Name> contains the variable Name. In order to retrieve the data from the form we will use this and other variables in the next ASP paragraph.

You dont need to write down this code, because the examples covered in this Article are available for download. To get familar with ASP and XML I suggest you download the examples and try to work with it. To give the form a better and professional look I have included a table with some effects, so dont get worried about the whole code. As you can see this was the first easy part of the ASP page and the second part will be even easier.

Part II the ASP code:

In this paragraph I will show you in 7 easy steps how you can retrieve the data from the form and how you can save the data to a XML
file.

1. The first step is to check whether the user has pressed the submit button or not! For this we will use the JScript function count.

var submit = Request.Form("submit").Count;
if( submit > 0 ){
  // The user has pressed the submit button
  // So the code to save the data will take place here.
}
else{
  // We could also place our form in this part of code, which must be then written in JScript.
  //But I would not recommend that !!!
}

2. Now we need to retrieve the data from the form. This data will be stored in some variables. To retrieve the data we will use the Request.Form("variable_name");
function. So let us create 4 variables and retrieve the required data.

var name = Request.Form("Name");
var age = Request.Form("Age");
var gender	= Request.Form("Gender");
var pcode	= Request.Form("PostalCode");

3.The third step is to check whether the user has entered some data, or not. For this we can just check whether the variables in step 2 are still empty or not.

var error = "";
if ( name == "" )
  error = "Name ";
if ( age == "" )
  error += "Age ";
if ( pcode == "")
  error += "PostalCode ";

4. In step 3 we have saved the result in the var error. Now we need to check, if "error" consists some data or not. If yes, then we have found an error, and we will display it. If not, then we will start with the saving procedure.

if(error!=""){
  //We have found an error, so display this to the user!
  Response.Write("Please enter the following data:<br>");
  Response.Write(<b>);
  Response.Write(error);
  Response.Write("</b>");
}
else{
//Everything is fine, so let us start to save the data.

5. Now we have done the nessesary checks and can start with saving the data. For that we will load the Person.xml in a xmlDocument. Then we will load the current node list to get the current root node. To get the current root node, we will use the function xmlDoc.getElementsByTagName. After that we need to create the required nodes, this can be achived with the function xmlDoc.createElement("AnyNodeName"). At last we only need to save the entered data from the form to the approriate xml variables. So here is the code, how it could look like:

.
.
.
else{
  // here we are loading the requried xml file
  var xmlDoc=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
  xmlDoc.async="false";
  xmlDoc.load(Server.MapPath("Person.xml"));
  // Get the current root
  var nodeList = xmlDoc.getElementsByTagName("PersonList");
  if(nodeList.length > 0){
    var parentNode = nodeList(0) ;
    // Create the required nodes
    var personNode = xmlDoc.createElement("Person");
    var nameNode   = xmlDoc.createElement("Name");
    var ageNode    = xmlDoc.createElement("Age");
    var genderNode = xmlDoc.createElement("Gender");
    var pcodeNode  = xmlDoc.createElement("PostalCode");
    // Assign the variables, which we have retrieved in step 2 to the xml variables.
    nameNode.text  = name;
    ageNode.text   = age;
    genderNode.text= gender;
    pcodeNode.text = pcode;
	.
	.
	.

6. We have done nearly everything to save the data, but there are still two steps left. In this step we will append the created nodes to the parent node. This can be done with the function parentNode.appendChild("personNode");

   .
   .
   .
   parentNode.appendChild(personNode);
   personNode.appendChild(nameNode);
   personNode.appendChild(ageNode);
   personNode.appendChild(genderNode);
   personNode.appendChild(pcodeNode);
   .
   .
   .

7. Finally we only need to save the nodes to the xml file. For this you can use the function xmlDoc.save(Server.MapPath("Person.xml"));.

   // 7) Now save the nodes to the file
   xmlDoc.save(Server.MapPath("Person.xml"));

XSL:

With this example you can save easily the data of any Person into a XML file. Right now we have only seen how to save the data, but how do we display it ? The answer is again easy. We will use ASP and XSL to display the data. The first thing you need to do is to load the XML file, this can be achieved with a XML Parser. The XML parser from Microsoft is available directly with Internet Explorer 5.0. After you have loaded the XML file in the document Object, you can retrieve the XML data with the help of a DOM Object. In the same way you must load the XSL file. 

   // This part is used to display the data 
   var objXMLDoc = Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
   objXMLDoc.async = false;
   objXMLDoc.load(Server.MapPath("person.xml"));
   var xsl=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
   xsl.async = false;
   xsl.load(Server.MapPath("person.xsl"));

Now you have loaded both files, each one DOM Object. Now you only need to create a query which will select the nodes for us. Of course we could select some specific nodes, but for our needs we will just select the root node, so all other nodes will be selected automatically.

   var xmlQuery="//Person";
   var docHeadlines=objXMLDoc.documentElement.selectNodes(xmlQuery);

After that you only need to iterate through the nodes to display each stored item.

   var numNodes;
   numNodes=docHeadlines.length;
   var nn;
   for(var i=0;i<numNodes;i++){
     nn = docHeadlines.nextNode();
     Response.Write(nn.transformNode(xsl));
   }

Conclusion:

That’s it ! Now you have created a fully functional system which can save, read and display data from a form. You have learned the advantages of ASP,XML and XSL. To practice a little bit more, I suggest you to modify the ASP page, to create your own Address book. Once you have mastered and created your own ASP page you will understand much more.

Download examples

First published at SitePoint.com

Codefinger was founded 2000 by Sonu Kapoor. Sonu has studied E-Commerce in India and currently lives in Germany. After graduation he worked for several companies in Germany. He currently works as a Network Consultant and Software Developer. He has written many applications in various programming languages like VC++, ASP, ASP.NET, XML or XSL. Besides his passion for developing applications, Sonu writes articles for several major websites like Developer.com. He also works as a freelancer for CodeGuru.

Unlike other programming languages, JavaScript manipulates web pages through a relatively sluggish API, the DOM. Interacting with the DOM is almost always more expensive than straight computations. After choosing the right algorithm and data structure and refactoring, your next consideration should be minimizing DOM interaction and I/O operations.

With most programming languages, you can trade space for time complexity and vice versa.³ But on the web, JavaScripts must be downloaded. Unlike desktop applications where you can trade another kilobyte or two for speed, with JavaScript you have to balance execution speed versus file size.

How Fast Is JavaScript?

Unlike C, with its optimizing compilers that increase execution speed and decrease file size, JavaScript is an interpreted language that usually is run over a network connection (unless you count Netscape's Rhino, which can compile and optimize JavaScript into Java byte code for embedded applications⁴). This makes JavaScript relatively slow compared to compiled languages.⁵ However, most scripts are usually so small and fast that users won't notice any speed degradation. Longer, more complex scripts are where this chapter can help jumpstart your JavaScript.

Design Levels

A hierarchy of optimization levels exists for JavaScript, what Bentley and others call design levels.⁶ First comes the global changes like using the right algorithms and data structures that can speed up your code by orders of magnitude. Next comes refactoring that restructures code in a disciplined way into a simpler, more efficient form⁷). Then comes minimizing DOM interaction and I/O or HTTP requests. Finally, if performance is still a problem, use local optimizations like caching frequently used values to save on recalculation costs. Here is a summary of the optimization process:

1. Choose the right algorithm and data structure.
2. Refactor to simplify code.
3. Minimize DOM and I/O interaction.
4. Use local optimizations last.

When optimizing your code, start at the highest level and work your way down until the code executes fast enough. For maximum speed, work at multiple levels.

Measure Your Changes

Measurement is a key part of the optimization process. Use the simplest algorithms and data structures you can, and measure your code's performance to see whether you need to make any changes. Use timing commands or profilers to locate any bottlenecks. Optimize these hot spots one at a time, and measure any improvement. You can use the date object to time individual snippets:

<script type="text/javascript">
function DoBench(x){
  var startTime,endTime,gORl='local';
  if(x==1){
    startTime=new Date().getTime();
    Bench1();
    endTime=new Date().getTime();
  }else{
    gORl='global';
    startTime=new Date().getTime();
    Bench2();
    endTime=new Date().getTime();
  }
alert('Elapsed time using '+gORl+' variable: '+((endTime-startTime)/1000)+' seconds.');
}
...
</script>

This is useful when comparing one technique to another. But for larger projects, only a profiler will do. Mozilla.org includes the Venkman profiler in the Mozilla browser distribution to help optimize your JavaScript.

The Venkman JavaScript Profiler

For more information on the Venkman profiler, see the following web sites:

• http://mozilla.org/performance/jsprofiler.html
• http://www.hacksrus.com/~ginda/venkman/profiles/

The Pareto Principle

Economist Vilfredo Pareto found in 1897 that about 80 percent of Italy's wealth was owned by about 20 percent of the population.⁸ This has become the 80/20 rule or the Pareto principle, which is often applied to a variety of disciplines. Although some say it should be adjusted to a 90/10 rule, this rule of thumb applies to everything from employee productivity and quality control to programming.

Barry Boehm found that 20 percent of a program consumes 80 percent of the execution time.⁹ He also found that 20 percent of software modules are responsible for 80 percent of the errors.¹⁰ Donald Knuth found that more than 50 percent of a program's run time is usually due to less than 4 percent of the code.¹¹ Clearly, a small portion of code accounts for the majority of program execution time. Concentrate your efforts on these hot areas.

Algorithms and Data Structures

As we learn in computer science classes, global optimizations (such as algorithm and data structure choices) determine in large part the overall performance of our programs. For larger values of "n," or the number of input elements, the complexity of running time can dominate any local optimization concerns. This complexity is expressed in O-notation, where complexity or "order" is expressed as a function of n. Table 10.1 shows some examples.

Table 10.1 Run-Time Complexity of Classic Algorithms^{12, 13}

Array access or simple statements are constant-time operations, or O(1). Well-crafted quicksorts run in nlogn time or O(nlogn). Two nested for loops take on the order of nxn or O(n²) time. For low values of n, choose simple data structures and algorithms. As your data grows, use lower-order algorithms and data structures that will scale for larger inputs.

Use built-in functions whenever possible (like the Math object), because these are generally faster than custom replacements. For critical inner loops, measure your changes because performance can vary among different browsers.

Refactor to Simplify Code

Refactoring is the art of reworking your code to a more simplified or efficient form in a disciplined way. Refactoring is an iterative process:

1. Write correct, well-commented code that works.

2. Get it debugged.

3. Streamline and refine by refactoring the code to replace complex sections with shorter, more efficient code.

4. Mix well, and repeat.

Refactoring clarifies, refines, and in many cases speeds up your code. Here's a simple example that replaces an assignment with an initialization. So instead of this:

function foo() {
  var i;
  // ....
  i = 5;
}

Do this:

function foo() {
  var i = 5;
  // ....
}

var link = location.href;

var link = window.location.href;

for(var i = 0; i < 1000; i++)
  a.b.c.d(i);

var e = a.b.c.d;
for(var i = 0; i < 1000; i++)
  e(i);

for (i=0; i<someArrayOrObject.length; i++)

for (i=0, var n=someArrayOrObject.length; i<n; i++)

var form = document.f2; // refer to form by name

var form = document.forms[1]; // refer to form by position

with (document.formname) {
field1.value = "one";
field2.value = "two";...
}

var form = document.formname;
form.field1.value = "one";
form.field2.value = "two;

var tableEl, rowEl, cellEl;
var numRows = 10;
var numCells = 5;

tableEl = document.createElement("TABLE");
tableEl = document.body.appendChild(tableEl);
for (i = 0; i < numRows; i++) {
  rowEl = document.createElement("TR");
  for (j = 0; j < numCells;j++) {
    cellEl = document.createElement("TD");
    cellEl.appendChild(document.createTextNode("[row "+i+" cell "+j+ "]"));
    rowEl.appendChild(cellEl);
  }
  tableEl.appendChild(rowEl);
}

var tableEl, rowEl, cellEl;
var numRows = 10;
var numCells = 5;

tableEl = document.createElement("TABLE");
for (i = 0; i < numRows; i++) {
  rowEl = document.createElement("TR");
  for (j = 0; j < numCells;j++) {
    cellEl = document.createElement("TD");
    cellEl.appendChild(document.createTextNode("[row " +i+ " cell "+j+"]"));
    rowEl.appendChild(cellEl);
  }
  tableEl.appendChild(rowEl);
 }
document.body.appendChild(tableEl);

var ul = document.getElementById("myUL");
for (var i = 0; i < 200; i++) {
  ul.appendChild(document.createElement("LI"));
}

var ul = document.getElementById("myUL");
var li = document.createElement("LI");
var parent = ul.parentNode;

parent.removeChild(ul);

for (var i = 0; i < 200; i++) {
  ul.appendChild(li.cloneNode(true));
}

parent.appendChild(ul);

document.write(' string 1');
document.write(' string 2');
document.write(' string 3');
document.write(' string 4');

var txt = ' string 1'+
' string 2'+
' string 3'+
' string 4';
document.write(txt);

nl = document.getElementsByTagName("P");
for (var i = 0; i < nl.length; i++) {
  p = nl[i];
}

for (var i = 0; (p = document.getElementsByTagName("P")[i]); i++)

car = new Object();
car.make = "Honda";
car.model = "Civic";
car.transmission = "manual";
car.miles = 1000000;
car.condition = "needs work";

car = {
  make: "Honda",
  model: "Civic",
  transmission: "manual",
  miles: 1000000,
  condition: "needs work"
}

board=[16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,2,3,4,5,6,2,3,4,5,16,....]

bstring="ggggggggggggggggggggg23456432gg11111111gg0000 ... g";
for (z=0;z<120;z++){
   board[z]=parseInt(bstring.charAt(z),35);
}

bit 4 (16):	0 = on board, 1 = off board.
bit 3  (8):	0 = white, 1 = black.
bits 0-2(7):	0 = empty, non-zero = the piece type:

1 - pawn
2 - rook
3 - knight
4 - bishop
5 - queen
6 - king

ourCol=movingPiece & 8;	// what color is it? 8=black, 0=white
    movingPiece &= 7;	// now we have the color info, dump it.
   if(movingPiece > 1){	// If it is not a pawn.

var d=35;
for (var i=0; i<1000; i++) {
  y += Math.sin(d)*10;
}

var d=35;
var math_sind = Math.sin(d)*10;

for (var i=0; i<1000; i++) {
  y += math_sind;
}

function foo(i) {
  if (i < 10) {return i * i - i;}
}

values = [0*0-0, 1*1-1, 2*2-2, ..., 9*9-9];

function foo(i) {
  if (i < 10) {return values[i];}
}

for (var i=1; i<=360; i++) {
  sin[i] = Math.sin(i);
}

function MyInnerLoop(){
  for(i=0;i<1000;i++);
}

function MyInnerLoop(){
  for(var i=0;i<1000;i++);
}

var serialData=new;
Array(-1,10,23,53,223,-1,32,98,45,32,32,25,-1,438,54,26,84,-1,487,43,11);
var splitData=new Array();
function init(){
  var ix=-1,n=0,s,l=serialData.length;
  for(;n<l;n++){
    s=serialData[n];
    switch(s){ // switch blocks are much more efficient
      case -1 : // than if... else if... else if...
        splitData[++ix]=new Array();
        break;
      default :
        splitData[ix].push(s);
    }
  }
  alert(splitData.length);
}

  if(n==12)
    someBlock();
  else if(n==26)
    someOtherBlock();

  cmp eax,12;
  jz  someBlock;
  cmp eax,26;
  jz  someOtherBlock;

switch(a){
  case 12 :
    someBlock();
    break;
  case 26 :
    someOtherBlock();
    break;
}

  jmp [VECTOR_LIST+eax];

for (i=0;i<iter;i++) {
  d=Math.sqrt(y);
  j+=i*d;
}

d=Math.sqrt(y);
for (i=0;i<iter;i++) {
  j+=i*d;
}

function loopNormal() {
  for (var i=0;i<iter;i++) {
    // do something here
  }
}

function loopReverse() {
  for (var i=iter;i>0;i--) {
    // do something here
  }
}

function loopDoWhile() {
var i=0;
do
{
  i++;
}
while (i<iter);
}

function loopDoWhileReverse() {
var i=iter;
do
{
  i--;
}
while (i>0);
}

function loopDoWhileReverse2() {
var i=iter-1;
do
{
  // do something here
}
while (i--);
}

function loopDoWhileReverse3() {
var i=iter;
do
{
  // do something here
}
while (--i);
}

var iter = number_of_iterations;

for (var i=0;i<iter;i++) {
  foo();
}

var iter = multiple_of_number_of_unroll_statements;

for (var i=0;i<iter;) {
  foo();i++;
  foo();i++;
  foo();i++;
  foo();i++;
  foo();i++;
  foo();i++;
}

testVal=0;
iterations=500125;

for (var i=0;i<iterations;i++) {
  // modify testVal here
}

function duffLoop(iterations) {

  var testVal=0;

  // Begin actual Duff's Device
  // Original JS Implementation by Jeff Greenberg 2/2001

  var n = iterations / 8;
  var caseTest = iterations % 8;  

  do {
    switch (caseTest)
    {
    case 0: [modify testVal here];
    case 7: [ditto];
    case 6: [ditto];
    case 5: [ditto];
    case 4: [ditto];
    case 3: [ditto];
    case 2: [ditto];
    case 1: [ditto];
    }
    caseTest=0;
  }
  while (--n > 0);
}

function duffFastLoop8(iterations) {

// from an anonymous donor to Jeff Greenberg's site

  var testVal=0;
  var n = iterations % 8;
  while (n--)
  {
    testVal++;
  }

  n = parseInt(iterations / 8);
  while (n--)
  {
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
  }
}

function duffFasterLoop8(iterations) {

  var testVal=0;
  var n = iterations % 8;

  if (n>0) {
    do
    {
      testVal++;
    }
    while (--n); // n must be greater than 0 here
  }

  n = parseInt(iterations / 8);
  do
  {
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
    testVal++;
  }
  while (--n);
}

for (i=0; i<j; i++) {
  sumserv += serv(i);
}

for (i=0; i<j; i++) {
  prodfoo *= foo(i);
}

for (i=0; i<j; i++) {
  sumserv += serv(i);
  prodfoo *= foo(i);
}

a > Math.sqrt(b);

a*a > b;

var c = a*a;
c>b; 

for (var i=iter;i>0;i--)

var i=iter-1;
do {} while (i--);