INFS2052 lecture 2.3

Browser-Server Interaction through HTML :2

Interaction between Browser and Server

These mechanisms:

are all that is used to support the interactions between browser and server required for

1. Simple link anchor requests - GET

Simple link requests just use GET as shown earlier.

The response is a status line and a document for display.

Types of Web document

3 types of Web document

Comer [chapter 28] sees 3 types of Web document

  1. static
  2. dynamic
  3. active

Static documents

Advantages

  • + simple
  • + reliable
  • + fast - no need to start process (or thread) to retrieve document
  • + document can be cached locally at client
  • Disadvantages

  • - inflexible - content can be changed only by updating file
  • - poor timeliness - information can become stale easily
  • Dynamic documents

    Advantages

  • + timeliness at scale of days/hours-
    document can always reflect latest information
  • Disadvantages

  • - cost of establishing and maintaining the program
  • - reliability - more risk of broken programs
  • - cost of executing program each time-
    needs more powerful server or clients suffer delays
  • - slower access-
    doc cannot be cached at client or proxy
  • - timeliness at scale of hours/minutes-
    document content is frozen at time of retrieval
  • The generator script may be very simple (insert date/time into doc body...)
    or as complex as a front-end to a database management system.

    This form of giving Web access to non-Web information is very powerful,
    - may include updates as well as accesses
    - can provide a standard or simplified wrapper giving access via forms
    or a client-side application etc.
    to legacy software

    Active documents

    Document contains executable elements that are executed by the client on arrival
    - possibly execute repeatedly, whenever page is being viewed.

    Executable elements are in various script languages or mobile code

    javascript
    active X
    Java

    applets

    Advantages

  • ++ timeliness at scale of minutes/seconds-
    document can always reflect latest information when active at client
  • + performance - scalability
    The extra execution work is done at the many clients,
    not all concentrated at the few servers.
  • Disadvantages

  • - cost of establishing and maintaining the active program
  • - complexity - executable code needs to run everywhere, cross-platform
  • - potential security risks from untrustworthy servers, untrustworthy code
  • 2. Queries and <ISINDEX> tag

    Browser - client

    A document containing an <ISINDEX> tag is displayed with a text box for user input.

    When RETURN or ENTER is typed, the browser sends a GET request with the contents of the box appended to the original document's URL as a query.

    E.g. document from http://iwaki/cgi-bin/staff.html

    -- if user types in the search text box

    			 Freda Nurke? who cares

    then the browser sends

    GET http://cgi-bin/cgi-bin/staff.html?Freda+Nurke%3F+who+cares

    The typed text is encoded:
    spaces are encoded as "+"

    or (like all other URL-significant punctuation)
    as a hex-code of their ASCII representation

    % hex-digit hex-digit

    Server

    The server parses the URL and splits it:
    delivers the query part as environment variable to an execution of a program (if any) or discards it (if a plain file is named).

    Delivers dynamic document
    - which may be just a selection from a collection of static documents.


    HTML note: Strictly, the ISINDEX tag is a head element, but many browsers accept it in the body part and display it at that point.

    The text associated with ISINDEX is standard to the browser and cannot be set by the document.

    3. Forms

    Forms are a collection of HTML tags:

  • -> FORM
  • TEXTAREA - simple text box (one line, nonscrollable)
  • SELECT lists - items specified by OPTION
    choose one only or one or more - MULTIPLE attribute
  • INPUT
  • attribute TYPE = "text" scrollable areas of many rows and columns
  • attribute TYPE = "password" non echoing text field
  • attribute TYPE = "checkbox"
  • "radio"
  • attribute TYPE = "reset"
  • attribute TYPE = "submit"
  • Browser

    The various widgets in the FORM are displayed for user input and selection.

    All widgets are reset if a "reset" button is selected.

    When a "submit" button is selected, the data in that form is encoded as for query strings, tagged with the name of each item in the form
    and is sent as contents of a POST message (or as a query string, if method=GET)
    to the server specified in the form's
    ACTION attribute.

    Server

    The program referred to in the POST request pathname is executed, with the message body attached as standard input
    (or the information in the query part of the URL supplied as environment variable QUERY_STRING, if the request was received was a GET).

    The program generates a response to standard output
    - which the server packages as the return message.

    Example of a Form - Elisa

    Look at the page giving a choice of 3 different search engines, provided by ANU library Elisa service.

    Note that this is 3 forms in one document. The action in each specifies a different server to send the Query string added to its URL.
    Note the hidden fields which are included in the query automatically by the browser. The HTML source in part is:

     
    <CENTER>	
    <TABLE BORDER=1>
    
    <!-- ALTA VISTA -->
    <TR>
    	<TD ALIGN=center>
    	<A HREF="http://www.altavista.yellowpages.com.au/">
    	<IMG SRC="/graphics/alta.gif" ALT="Alta Vista" BORDER=0><BR>
    	<IMG SRC="/graphics/altaoz2.gif" ALT="Australian Mirror" BORDER=0></A>
    	</TD>
    	
    	<TD>
    		<FORM method=GET action="http://www.altavista.yellowpages.com.au/cgi-bin/telstra">
    		<INPUT TYPE=hidden NAME=pg VALUE=q>
    		<INPUT TYPE=hidden NAME=what VALUE=web>
    		<INPUT TYPE=hidden NAME=fmt VALUE=".">
    		<INPUT NAME=q size=35 maxlength=200 VALUE="">
    		<INPUT TYPE=submit VALUE="Search">
    		</FORM>
    		
    ... part omitted ...
    	</TD></TR>
    	
    <!-- INFOSEEK -->
    <TR>
    	<TD ALIGN=center VALIGN=center>
    	<A HREF="http://www.infoseek.com/">
    	<IMG SRC="/graphics/infoseek.gif" ALT="infoseek" BORDER=0></A>
    	</TD>
    	
    	<TD>
    		<FORM method="get" action="http://guide-p.infoseek.com/WW/IS/Titles">
    		<INPUT NAME="qt" SIZE=35 VALUE="" MAXLENGTH=80>
    		<INPUT TYPE=submit VALUE="Search">
    		<input type=hidden name="cat" VALUE="">
    		<input type=hidden NAME=col VALUE=WW>
    		</form>
    	</TD>
    </TR>
    </table></center>
    
    
    

    Lecture Notes Index Lecture 7 Lecture 5

    Last modified: Tue Mar 30 11:24:08 EST 1999
    Queries to : infs2052.iwaki.anu.edu.au