Sharing Javascript source code between client-side (inside a browser) and server-side (inside IIS/ASP) [v1.0]


Author: Emmanuel KARTMANN

Date: June 5th, 2003


Environment: ASP (classical), Javascript, IIS

Keywords: Javascript, JScript, ASP, IIS, Client, Server, Browser, script, src, runat

Client-Side and Server-Side Javascript

This article presents a trick to reuse the same source code (Javascript) in client-side (inside a browser) and server-side (inside IIS/ASP).

Javascript is an amazing language which can be executed in two very different environments; it can run within a browser (client-side) as well as within a Microsoft IIS web server (server-side). Running on client-side, Javascript is a good workaround for HTML limitations and helps building user-friendly Web applications (it's also called Dynamic HTML). Running on server-side, Javascript enables building dynamic Web pages (for example reading data from a database and presenting it in a Web browser).

Client-Side Javascript

In order to use Javascript in client-side context (within a browser like Internet Explorer or Netscape), you have to use the script tag:

Alternatively, you can put your Javascript code in an external file using attribute src of the script tag:

Server-Side Javascript

To use Javascrit in a server-side context (within Microsoft IIS's ASP engine), you have to use the <%@ %> and <% %> tags:

Alternatively, you can use the script tag, with the attribute runat set to "server":

And as for a client-side script, you can add the src attribute:

Shared-Sides Javascript

In order to share the same source code between client-side and server-side context, you have to use an external source file (via the src attribute):

FICHIER "client_server_script.asp":
<%@ language="javascript" %>
<!-- This will load the JAVASCRIPT code into SERVER-SIDE context (no output in browser) -->
< script language ="javascript" src ="client_server_script.js" runat ="server"></ script >

<!-- This will call the JAVASCRIPT code from SERVER-SIDE context -->
<p>
Server:
<%
Response.Write(client_server_function("TEST FROM SERVER"));
%>
</p>

<!-- This will include the JAVASCRIPT code into CLIENT-SIDE context -->
<script language="javascript" src="client_server_script.js"></script>

<!
-- This will call the JAVASCRIPT code from CLIENT-SIDE context when you click on the button -->
<p>
Client:
<input type="submit" onclick="alert(client_server_function('TEST FROM CLIENT'));">
</p>

FICHIER "client_server_script.js"

When run, this page will output the following:

WARNINGS: Restrictions on a Shared-Sides Javascript file

You can use only basic javascript object, types, functions and methods in a shared Javascript file, i.e:

References

Downloads

Download article and source code - 22 Kb

History

Date Posted: June 5th, 2003