Introduction to the Web

Most web applications now use Java, you need JSPs and Servlets to add life in to boring old static web pages. JSP and Servlets offer dynamic, interactive and custom-tailored web pages, they also offer flexibility and salability.

A web browser (client) lets a user request a resource, the web server gets the request, finds the resource and returns something to the user via the browser, it could be text, picture, video stream, etc. The browsers job is to interpret the HyperText Markup Language (HTML) code and render the web page for the user.

A web server often sends the browser a set of instructions written HTML, HTML tells the browser how to present the content to the user, all modern browsers know how to interpret HTML. The protocol used between the web browser and the web server is HyperText Transfer Protocol (HTTP), it allows simple request and response conversations.

Below is a simple guide to HTML

Tag Description
<!--  --> Comments
<a> anchor for put in hyperlinks
<align> align the contents (left, right, centered, justified)
<body> define the boundaries of the document's body
<br> a line break
<center> center the contents
<form> define a form (request data from a user)
<h1> the first level heading
<head> define the boundaries of the documents header
<html> define the boundaries of the HTML document
<img> display an image (picture)
<input type> defines a input widget to a form
<p> a new paragraph
<title> the HTML documents title
HTML Example
Example HTML

<html>
<!-- Some sample HTML -->
<head>
  <title>A Login Page</title>
</head>
<body>
<h1 align="center">Datadisk's Login Page</h1>

<p align="right">
   <img src="Datadisk_logo.jpg" width=130" height="150"/>
</p>

<form action="date">
        Name: <input type="text" name="param1"/><br>
   Password: <input type="text" name="param2"/><br><br>

   <center>
     <input type="SUBMIT"/>
   </center>
</form>

</body>
</html>

What is HTTP

HTTP runs on top of TCP/IP, TCP is responsible for making sure that a file is sent from one computer to another and ends up as a complete file at the destination, even if the file is split up into chucks when it is sent. IP is the underlying protocol that moves/routes the chunks (called packets) from one computer to another. HTT is another protocol that has web-specific features but depends on TCP/IP to get the complete request and response from place to another. The structure of an HTTP conversation is a simple Request/Response sequence, a browser requests and a web server responds (see picture below).

An HTTP response can contain HTML (as seen above). HTTP adds header information to the top of whatever content is in the response, an HTML browser uses that header information to help process the HTML page.

The HTTP method name tells the server the kind of request that's being made and how the rest of the message will be formatted. There are several methods but the most often used are the GET and POST methods, I have listed all the methods in the Servlet web page.

GET method this method is the simplest, its life is to ask the server to get a resource (web page) and send it back
POST method this method is more powerful request, with POST you can request something and at the same time send form data to the server
other methods HEAD, TRACE, PUT, DELETE, OPTIONS and CONNECT

However GET can send some data but the following reasons are why you should use POST over GET

Anatomy of a HTTP GET

GET /select/selectBeerTaste.jsp?color=dark$taste=malty HTTP/1.1
Host: www.datadisk.co.uk
User-Agent Mozilla/5.0.......
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text..........
Accept-Language en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

Note: the parameters are in the URL notice that all the parameetrs will be seen by all

Anatomy of a HTTP POST

POST /advisor/selectBeerTaste.do HTTP/1.1
Host: www.datadisk.co.uk
User-Agent Mozilla/5.0.......
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text..........
Accept-Language en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

color=dark&taste=malty

Note: the parameters are now in the body (sometimes called the payload) and cannot be seen in the URL

Anatomy of a HTTP Response

HTTP/1.1 200 OK
Set-Cookie: JSESSONID=...............;Path=/testEL
Content-Type=: text/html
Conent-Length: 397
Date: Fri, 13 Mar 2009 15:55:20 GMT
Server: Apache-Coyote/1.1
Connection: close

<html>
    ................
</html

Putting all the steps together we get the following

  1. The user types a in URL (URL could be www.datadisk.uk)
  2. The browser creates an HTTP GET request (like the one above)
  3. The HTTP GET is then sent to the web server
  4. The web server finds the page
  5. And then generates the HTTP response
  6. The HTTP response is then sent back to the browser
  7. The browser then renders the HTML code and displays it

What is a URL

There are many names for this URI, URL, URN but I will use URL (Uniform Resource Locators), this is what you type in the web browsers address bar when you want to display a particular web site, but what does it mean

Complete URL http://www.datadisk.co.uk:80/beeradvice/select/beer1.do?beertype=ale&size=pint
Breaking down a URL
http:// This is the protocol used for communication
www.datadisk.co.uk The unique name of the physical server you're looking for, this maps to a IP address for an example 192.168.0.1
:80 This is optional because port 80 is the default, but it specifies the port number of the web server that is responding to HTTP requests.
/beeradvice/select The path to the location on the server of the resource being requested
beer1.do The name of the content being requested (this could be a HTML page, PDF document, Image, etc)
?beertype=ale&size=pint An optional query string that starts with a question mark "?" and with each parameter (name/value pair) separated by an ampersand "&"

Static Web Pages and CGI

Web servers love serving static web pages, but sometimes you need a dynamic web page, for instance you may want to display the current data and time, this cannot be achieved by a static page as the time is always changing, also you may want to create a web page on the fly based on the users request. In the earlier days of the web we used CGI (Common Gateway Interface) which were scripts that were written in Perl, C, etc to create dynamic web pages although used today, they are be coming less common this is because the Java programming language was created. I have discuss the history of the web in a Tomcat topic so take a look at what happened then pop back.

If you did read the Tomcat web history then you know that JSP's are the way to go, but I will be discussing the difference between Java Servlets and JSP in much more detail and I will also be covering advanced topics such as MVC, EL, JSTL and web security.