4GuysFromRolla.com - Passing Arrays Between the Browser and an ASP Page

Senior Web Content Specialist
Aquent
US-NJ-Parsippany

Published: Tuesday, February 06, 2001

Passing Arrays Between the Browser and an ASP Page
By Luke Bailey

Passing Arrays from One ASP Page to Another

This article demonstrates how to create and use arrays on a client-side form and pass this block of data (the array) to an ASP page when the form is submitted. If you are looking for a solution on passing an array from one ASP page to another be sure to read: Passing Arrays from One ASP Page to Another.

- continued -

Introduction:
I have often had a need to pass various arrays of data from the server to a browser and vice a versa, and although JavaScript has good array handling facilities what I really wanted was a simple library that implemented array passing in both JavaScript (for the client-side) and VBScript (for the server-side ASP code). Implementing such a library would allow JavaScript code in the client�s browser to send a large amount of data via a single HTTP POST field that the server could then interpret without having to parse the data in any way.

This library was developed to handle large amounts of data sent by a Shockwave movie and forward it on to an ASP script on a Web server for input to a database. However it could easily be used for other applications such as a "shopping cart" or to deliver a series "slides" in a DHTML page.

This library actually implements a FIFO buffer structure and has the same function calls in both the JavaScript and VBScript versions. A buffer is a data structure into which you can add (push) and remove (pop) data elements. FIFO Stands for First In First Out which means that the elements are removed in the same order they were added for example.

To use the library in the browser or in an ASP script you need to include the script as follows:

Browser: <script language="javascript" src="fifo.js"> </script> ASP Script: 

Before using the library you need to call the initialisation function and, when finished, you should call the finalisation function. These functions can be called as follows:

Initialise: fifo_initialise() Finalise: fifo_finalise()

Once the library is initialised it is ready to be used, you can call the following functions to add (push) and remove (pop) elements from the buffer:

Status = fifo_push(element) Element = fifo_pop()

Other useful functions are the ability to read and write the entire buffer as a string, empty the buffer, and the ability to count the number of elements that are currently in the buffer. These are accomplished with the fifo_readbuffer(), fifo_writebuffer(string), fifo_resetbuffer(), and fifo_countelements() functions.

The functions to read and write the entire buffer can be particularly useful if you need to iterate through the buffer more than once and therefore wish to preserve its state rather than having the elements removed as you read them. For example (in VBScript) you could use the following code to load a buffer from a HTTP POST, iterate through the buffer and print the contents without removing any elements:

'Read in the buffer from the HTTP POST Buffer=Request.Form("thebuffer") 'Initialize the fifo functions Fifo_initialise() 'Write the buffer to our fifo object Fifo_writebuffer(buffer) 'Store the contents of the buffer into Preserved variable '(This is so the fifo buffer won't be destroyed after we ' pop all of the elements...) Preserved = fifo_readbuffer() 'Iterate through the buffer, displaying each element For I=1 to fifo_countelements() Response.Write fifo_pop()+" " Next I 'Reload the preserved buffer back into the fifo structure Fifo_writebuffer(preserved) ' ... 'Finished using the buffer, time to clear it out fifo_finalise()

You could also write a simple script that writes the buffer into a database table:

Dim connectme, ordersdb, ordertab, buffer 'Connect to the database set ordersdb=Server.CreateObject("adodb.Connection") connectme="DSN=mydsn" ordersdb.Open connectme 'Grab information from the orders table set ordertab=Server.CreateObject("adodb.Recordset") ordertab.CursorType=adOpenDynamic ordertab.LockType=adLockOptimistic ordertab.Open "orders", ordersdb 'Initialize the fifo buffer fifo_initialise() 'Populate the fifo buffer from the HTTP POST fifo_writebuffer(Request.Form("thebuffer")) 'For each element in the buffer, add a new row to the 'Orders table for I=1 to fifo_countelements() ordertab.addnew ordertab("orderitem")=fifo_pop() ordertab.update next I 'Clean up... (close DB objects and call finalise function ordertab.close orderdb.close ordertab=nothing orderdb=nothing fifo_finalise()

Included with the source code is an example application which consists of a simple browser based shopping cart (which uses DHTML) and a sever side ASP script which displays the shopping cart and a total price. This demonstration emulates a multi-dimensional array by adding two elements to the array for each object which is added to the cart (a name and a price).

The client utilises javascript URL�s to call a function when a product is clicked on which adds the product name and cost to the buffer, another piece of Javascript then redraws the shopping basket list. Clicking on the purchase button submits a hidden form to the server side ASP script which includes the contents of the buffer, the ASP script then calculates the total cost and displays the complete shopping basket. (The code for this example is included in the source code download, but you can also try it out in a live demo!)

Notes: Note that the buffer only takes character strings so the use integers or decimals they must first be converted to strings using the built in type conversion features for the relevant library. The buffer also reserves one character to demarcate the elements in the buffer, this character can be chosen in the global variables section in the library file but the currently chosen character cannot be used in any of the strings which are added to the buffer.

Happy Programming!

By Luke Bailey

Attachments:

Download the source code for this article (in ZIP format)

Try out the live demo!