Top ASP 101 Stories The Top 10 ASP Links @ Microsoft.com What is Adovbs.inc and Why Do I Need It? An Overview of ASP.NET QUICK TIP: Read-Only Session State Show All Tips >>  ASP 101 Updates

Client-Side Scripting and ASP

Introduction

Most web applications involve both client-side and server-side script. Client-side script is often used to program the user interface for an application - for example, to change a web page's text dynamically, respond to user actions such as button clicks, and perform such client-oriented tasks as input validation. Client-side script executes locally in the browser, which provides the user with a lively and responsive interface.

Server-side script, in contrast, is usually used to program an application's back end. This often involves accessing a database or performing middle-tier business logic. Server-side script is also used to create applications which need a broad reach: applications that might be accessed by many different types of browsers, each with different capabilities.

But client and server script are generally iundependent. When a page is first requested, the server can run server-side script, and then pass the page to the browser, which can then run client-side script. However, if a server-side script on the page must be run again, the page must be submitted back to the server, which effectively restarts the page. Maintaining the state of the controls and values on the page can involve complex scripting to pass information back and forth between the browser and server. In addition, the roundtrip between client and server involves overhead (most notably the upload and download time) that can noticably slow an application.

The following are some techniques that can be used to help reduce some of this overhead:

1. Using Javascript Array
2. Using ASP and XML
3. Using Remote Scripting

This article will give a detailed explanation of the first two topics along with some simple examples to help illlustrate them. Unfortunately Remote Scripting can be a rather complex topic and covering it is beyond the scope of this article.

Before I get into a detailed explanation, I assume that reader has sufficient knowledge of XML, XMLDOM and javascript. The files referenced below can be found in this zip file.

Using Javascript Array

File: UseJavaScript.htm

With reference to the javascript in the file "UseJavaScript.htm", an array called "ProductsArray", containing a group of arrays of product for each category, is declared.

The On_Change event of the "Category" dropdown box calls the getProducts() function to populate the "Products" dropdown based on the category selected.

The ProductsArray can be built using ASP. This is relatively straight-forward and is left as an exercise for the reader.

Using ASP and XML

File: UseASPXML.asp

Let us consider the NorthWinds sample database from MS Access.

The "Category" dropdown box is loaded with categories from the NWind database.

The On_Change event of "Category" dropdown box again calls the getProducts() function to populate &the; quot;Products" dropdown based on the category selected.

Before getting into the details of function "getProducts()", let me explain getProducts.asp included in the zip file.

getProducts.asp will generate an XML list of products based on the category it is given. The generated XML looks like this:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<products>
  <product id="1">Beverages</product>
</products>

If no products exist for the respective category, an error XML file will be generated:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<MyError>Error Occured</MyError>

Coming back to the "getProducts()" function, when this function is called, an instance of DOM Document is created which we'll call the "parser".

This parser then loads the XML document which is generated by the getProducts.asp file. The following line does this task:

parser.load("getProducts.asp?catid="+selmake);

Once the parser is loaded with the XML document, check whether data is available for the selected category. If data is available then populate the "products" dropdown by traversing the XML Document. If an error occurs then we do not populate the dropdown box.

The above technique can also be used for other situations such as:

1. Validating user and password without submitting the form.
2. Data validation on the server while the user continues to interact with a data-entry form.

However, it is best suited for intranet type projects where you can be assured of IE being the browser of choice. Netscape does not support XMLDOM and hence the creation of an instance of XMLDOM Document is not possible.

Supporting materials

As mentioned above, the files discussed in this article can be downloaded from here.