![[Previous]](prev.gif)
![[Home]](home.gif)
![[Next]](next.gif)
JavaScript and CGI
Credit: J. Trauger (JPL/NASA)
JavaScript and CGI are complementary systems that let you create and manipulate sophisticated Web pages. Here is a comparison of their properties:
- What they are: JavaScript is a specific language
with a
defined syntax
that is especially suitable for manipulating the many elements that
comprise a Web page. In contrast, CGI (Common Gateway Interface) is not a
language at all:
rather it is a protocol
that facilitates two-way communication between a Web page
client and a server. Almost any language, such as
Perl, shell scripts,
C, C++, or Java can be used to implement a CGI program.
- Where they live: while JavaScript can operate
anywhere, the JavaScript
discussed here is a client-side program. It usually lives inside your HTML
code enclosed in special tags, or as event-handlers attached to HTML
FORM tags. CGI programs, on the other hand, live and operate on the
server and are
usually activated
by clicking on the SUBMIT button to submit a form to be processed by
the CGI program.
- What they are good for: JavaScript is superbly
designed to navigate
and manipulate the
contents and structure of Web pages. Since it resides on the client the
response is immediate with no delays. If the associated HTML is Dynamic
HTML, JavaScript can completely and rapidly control nearly every aspect of
that
page in real time. However, JavaScript is strictly limited in the sources
and
destinations of its information: it cannot read anything from the server
(except for images and JavaScript programs) or from the PC
client machine (except for cookies),
and cannot write or modify anything on the server or
client machines (except for cookies).
In contrast, CGI programs can do anything on the server that any other user program can do, except for certain restrictions imposed by the Web administrators. Thus it can access most of the environmental variables on the server, can read, write, manipulate, and find out information about files or processes, and can run any programs, such as graphics or database programs, that reside on the server.
- How they operate:
JavaScript programs are almost always embedded in an HTML script. They
reside on the server until they are invoked through a URL that loads the
HTML and associated JavaScript code into the browser on the client
machine. From then on they operate strictly on the client. If the
JavaScript is in the header or body of the HTML, and does not consist
exclusively of functions, it begins operating as soon as it is loaded.
This can cause a problem if it references variables or functions that are
declared in
later regions which have not yet been loaded. In most cases, however, the
JavaScript mainly consists of functions that are either invoked after
loading is finished, or are triggered by event handlers in response to
some
user action.
CGI programs, on the other hand, always live and run on the server. Typically they are triggered by the submission of a form, for example:
. . . <FORM METHOD="POST" ACTION="my.cgi"> . . . <INPUT TYPE=submit > </FORM>
When the user clicks on the SUBMIT button, the contents of the form are sent to the program "my.cgi" on the server. Typically, the CGI program calls a library and reads the form name-value pairs into an associative array, for example:#!/usr/local/bin/perl # require 'cgi-lib.pl'; &ReadParse(*in); . . .
is the start of a typical CGI program written in Perl that reads in the form output and stores the name-value pairs in an associative array named "in" (in this case). The program then uses these values to access, change, or manipulate files or other entities on the server, and then typically creates and sends HTML output back to the client. A typical sequence might be:- The HTML (perhaps with embedded JavaScript) is loaded from the server onto the client
- Some JavaScript code may be executed on the client
- The user fills in a form and clicks on SUBMIT
- The form information is sent to the CGI program on the server
- The CGI program parses the form information and carries out any necessary operations, file manipulations, etc
- The CGI program then writes out some HTML (possibly with embedded JavaScript) in the form of a here document . The HTML and JavaScript may or may not be the same as the original HTML/JavaScript.
- This information is then transmitted to the client, and the resulting HTML/JavaScript code is executed on the client.
Thus there is a back-and-forth movement between the client and server when CGI scripts are used.
Example: here is an example that combines JavaScript and CGI programs. It lets a user add, modify, or delete information in a very simple database consisting of names and phone numbers, and operates so:
- When the URL is invoked, it reads an
HTML file containing JavaScript code into the client
browser
- The HTML contains a form to be filled out and JavaScript code that
lets you check the names and phone numbers for a valid syntax (in this
simplified model, we only check to see that names consist of two or three
character strings with no punctuation, and phone numbers are of the form:
aaa-ppp-nnnn, where "aaa" is the 3 digit area code, "ppp" the 3 digit
prefix, and "nnnn" the 4 digit number).
- If the user clicks on the "radio" button to check the name and phone
values, they receive confirmation or an error message
issued by the "Alert" screen created by the JavaScript program.
- If the user clicks on SUBMIT, the form is sent to the CGI program
which carries out the operations specified in the form, such as adding,
deleting, or modifying information in the database on the server.
- When it is done, the CGI program writes a "here document" which
contains the original HTML and JavaScript programs, plus some additional
JavaScript that displays an "Alert" message showing that a person/phone
number has been added, deleted, or modified.
- The "here document", which is prefaced by a special header that informs the client browser to expect HTML code, is displayed and executed.
Click here to run this example, and on here to view the CGI source program.
Class Topics