How can I exchange values between server and client script?

FAQ written by link9, edited by Swany


When it comes to scripting for the Internet, there are two different breeds û client side and server side. They both have their place, advantages, and disadvantages.

Client side scripting is normally used for the ôfront endö (i.e. - user interface) whereas server side script is normally used for the ôback endö (i.e. û data access).
There are exceptions, especially with MicrosoftÆs remote scripting, but for now, weÆll leave that to the well written FAQ that already exists on this site devoted to that issue and stick to what has been the norm for a while now.

By verifying data in client side script, the server does not have to work as hard and can serve more users than it could if all the script was handled serverside.

The question to deal with here is, ôCan they interact?ö The answer is yes, and there are a few different ways of handling this. For the purposes of this, I will be talking server side VBScript (aka - Active Server Pages), and client side JavaScript (since client side VBScript is proprietary to MicrosoftÆs Internet Explorer)

The thing to remember is that server script is executed before the browser even sees the document. This allows the server side script to create or modify client script. Take a second to soak that up. It is a pretty cool concept.

First of all, we will deal with server side script talking to client side script; specifically getting a variable from server script to client script û WeÆll look at an example of how to dynamically size a popup window with client side script with values that we got from our database with server side script. WeÆll say that we have some picture that we want to open and we got the image source and dimensions from fields in our database --

So we have three variables in server side script called width, height, and src, which have values 400, 350, and ômyPicture.jpgö respectively. We need to use these values in a JavaScript function to set the size and target of our popup window because JavaScript is what we use to pop-up windows.

The function would look like:

<script language=javascript>
funtion popUpWindow(){
var x = window.open(æ<%=src%>Æ,ÆpictureWindowÆ,Æwidth=<%=width%>,height=<%height%>Æ);
}
</script>

Please note the use of the <%%> tags to denote where we are switching over to server side script. We are simply outputting the values to the browser using the = operator, which is just a shortcut for the VBScript method, response.write û

ItÆs that simple. What you see above is what it looks like when you write it, but assuming that the server side variables have been properly initialized before you try to output them up there, the resulting JavaScript function looks like this when it is rendered to the browser:

<script language=javascript>
funtion popUpWindow(){
var x = window.open(æmyPicture.jpgÆ,ÆpictureWindowÆ,Æwidth=400,height=350Æ);
}
</script>

and when you call it later on in the page with a simple HTML tag, such as an anchor, it will pop-up a window that is 400 wide by 350 tall with myPicture.jpg in the window.

<a href=öjavascriptopUpWindow();ö>Click here to see the picture</a>

----------------------------------------

So now on to getting client side variables into server side script û

There really is only one way (short of using the Remote Scripting mentioned above), and that is via reloading of the page, and the passing of variables via either ôgetö or ôpostö in a form

LetÆs say, for this example, that we have a form that asks for a userÆs name, address, and telephone number û These form elements are called, ænameÆ, æaddressÆ, and æphoneÆ. We have this form on a page, myPage.htm, and we want to have the user click a submit button, and then have the variables that they typed be written to the screen on the receiving page, myPage.asp û

Using a ôpostö method, the form would look like this:

<form method=post action=ömyPage.aspö name=myForm>
Enter your name:<input type=text name=name><br>
Enter your address: <input type=text name=address><br>
Enter your phone number: <input type=text name=phone><br>
<input type=reset value=öReset Formö name=reset>

<input type=submit value=öSubmit Formö name=submit>
</form>

Simple enough, right? When the user fills in the info, and presses the submit button, the brower takes the values, stuffs them in a request object, and wisks them away (along with your visitor) to æmyPage.aspÆ, where you can promptly do whatever you would like with the values.

HereÆs how you would get them:
<%
dim name, address, phone
name = request.form(ônameö)
address = request.form(ôaddressö)
phone = request.form(ôphoneö)
%>

And there you are. You have now picked up the client side variables that were placed into the text boxes on the previous page, and placed them into server side variables to do anything you want with them. LetÆs write them out in a simple table.

<table>
<tr>
<td>Name:</td><td><%=name%></td>
</tr><tr>
<td>Address:</td><td><%=address%></td>
</tr><tr>
<td>Phone Number:</td><td><%=phone%></td>
</tr>
</table>

Table rendered. Task complete. But donÆt stop there, you can write these values to hidden form elements to be passed along to another page on your site, write them to cookies to give your users a better experience, store them in a database so that you can use them later to make money selling their information to telemarketers (kidding!) û or email the results to yourself using ASP components. The list goes on and on.

Note that above I talked about two methods of sending variables, and I only covered ôpostö. Well, thereÆs a thing called get, too. Ever notice that on some websites you look up in the address bar and see that the address is followed by a bunch of garbage? ThatÆs ôgetö û the browser sends the variables via what is referred to as a queryString, and it looks more or less like this:

http://mysite.com/myPage.asp?name=value&address=value&phone=value

value being whatever your visitor typed into the text boxes. This method has itÆs advantages, but it has itÆs disadvantages, too. (I guess thatÆs why they offer both, huh). A user can **usually** bookmark a page that is requested in this method, and not have to go through the motions of logging in each and every time they come to the site. This site offers that functionality, in fact, and I use it every time I donÆt log in (get it?). The only downfall to that is if there is sensitive information being sent via that queryString, you wouldnÆt want to do it, because anyone that sees the address, sees the information. You also don't want to place information that the user could modify to their advantage in a querystring. They could simply change the querystring and resend the data.

The only thing you have to change in order to send via get is the keyword û change it from ôpostö to ôgetö û everything else stays the same. The only difference in how you pick those values up is instead of asking for request.form, just ask for request.querystring û everything else stays the same.

This is where it gets a little interesting. Because get parameters are placed at the end of a URL you can construct your only URLs to pass information between pages, or between local script and the server.

For instance your page could contstuct a list of order numbers. In the database you use order_id as a key, not the order number, so you could do something like the following:

<A Href="showOrder.asp?order_id=<%=rs("order_id")%>"><%=rs("order_number")%></A>

That would display an order number that when clicked on would go to the showOrder.asp page with an order_id parameter of the complementary order_id.

Ok, so thatÆs more or less what there is to know about communicating between client side and server side script. I hope this helps someone out of a jam sometime.

Happy Coding!