HTTP and Web Application

4/8/2022 1/41
 Objectives
◼ HTTP protocol
◼ Request – reponse model
◼ Request
◼ Response
◼ Status code
◼ HTML
◼ Web page structure
◼ Form tag
◼ Web Application model
◼ Web browser
◼ Web Server

4/8/2022 2/41
 HTTP protocol
• HTTP is the foundation of data
communication for the World Wide Web
• Development of HTTP was initiated by Tim
Berners-Lee at CERN in 1989.
• request–response protocol in the client–server
computing model
• State-less protocol
• Not session-less
• HTTP resources are identified
and located on the network by
Uniform Resource Locators (URL)

4/8/2022 3/41
 HTTP Requests
• An HTTP request consists of
◼ a request method
◼ a request URL
◼ header fields
◼ body.
• HTTP 1.1 defines the following request methods:
◼ GET - retrieves the resource identified by the request URL.
◼ HEAD - returns the headers identified by the request URL.
◼ POST - sends data of unlimited length to the web server.
◼ PUT - stores a resource under the request URL.
◼ DELETE - removes the resource identified by the request URL.
◼ OPTIONS - returns the HTTP methods the server supports.
◼ TRACE - returns the header fields sent with the TRACE
request.
4/8/2022 4/41
 HTTP Request Sample

4/8/2022 5/41
 Idempotency and Safety Methods

4/8/2022 6/41
 Http Request and Response

4/8/2022 7/41
 Http Request and Response

4/8/2022 8/41
 HTTP Responses
• An HTTP response contains
◼ a result code

◼ header fields

◼ a body

• The HTTP protocol expects the result code and all header fields to be
returned before any body content
• Some commonly used status codes include:
◼ 404 - indicates that the requested resource is not
available.
◼ 401 - indicates that the request requires HTTP
authentication.
◼ 500 - indicates an error inside the HTTP server which
prevented it from fulfilling the request.
◼ 503 - indicates that the HTTP server is temporarily
overloaded, and unable to handle the request.

4/8/2022 9/41
 HTTP 1.1 Status Codes
101 Switching Protocols
Server will comply with Upgrade header and change to
different protocol. (New in HTTP 1.1)
200 OK
Everything's fine; document follows for GET and POST
requests. This is the default for servlets; if you
don't use setStatus, you'll get this.
201 Created
Server created a document; the Location header
indicates its URL.
202 Accepted
Request is being acted upon, but processing is not
completed.
203 Non-Authoritative Information
Document is being returned normally, but some of the
response headers might be incorrect since a document
copy is being used.

4/8/2022 10/41
 HTTP Response Sample

4/8/2022 11/41
 Request Headers
• It can also send a number of headers:
◼ Accept The MIME types the browser prefers.
◼ Accept-Charset The character set the browser expects.
◼ Content-Length (for POST messages, how much data is
attached)
◼ Connection Use persistent connection? If a servlet gets a Keep-
Alive.
◼ Cookie (one of the most important headers)
◼ Host (host and port as listed in the original URL)
◼ If-Modified-Since (only return documents newer than this)
◼ Referer (the URL of the page containing the link the user
followed to get to current page)

4/8/2022 12/41
 HTTP Response
• When a Web server responds to a request from Web client, the
response typically consists of a status line, some response headers, a
blank line, and the document:

HTTP/1.1 200 OK status line

Content-Type: text/plain response header
blank line
Welcome to Servlets World the document

Status line:
◼ HTTP version
◼ An integer that is interpreted as a status code
◼ A very short message corresponding to the status code.

◼ In most cases, all of the headers are optional except for Content-
Type, which specifies the MIME type of the document that
follows

4/8/2022 13/41
 What is HTML?
HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup
language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages

4/8/2022 14/41
 HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain
text
• HTML documents are also called web pages

4/8/2022 15/41
 HTML Tags
HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag
is the end tag
• Start and end tags are also called opening tags and
closing tags.

4/8/2022 16/41
 HTML Form
• A form is an area that can contain form elements.
• Form elements are elements that allow the user
to enter information (like text fields, textarea
fields, drop-down menus, radio buttons,
checkboxes, etc.) in a form.

4/8/2022 17/41
 HTML Form

4/8/2022 18/41
 HTML Form Inputs
• Text fileds
<html>
<body>
<form>
First name: <input type="text" name="firstname" />
<br />
Last name: <input type="text" name="lastname" />
</form>
</body>
<html>

How it looks in a browser:

4/8/2022 19/41
 HTML Form Inputs..
Radio Buttons:

<html>
<body>
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
</body>
<html>

How it looks in a browser:

4/8/2022 20/41
The components of Java web app

4/8/2022 21/41
How form interact with Webserver

4/8/2022 22/41
 The Form's Action Attribute and the Submit Button

• When the user clicks on the "Submit" button, the

content of the form is sent to the server. The
form's action attribute defines the name of the
file to send the content to.
• The file defined in the action attribute usually
does something with the received input.

4/8/2022 23/41
 The Form's Action Attribute and the Submit Button
<html>
<body>
<form name="input" action="/LoginServlet" method="post">
<table>
<tr>
<td>User name:</td><td><input type="text" name="user"/></td>
</tr>
<tr>
<td>Password:</td><td><input type="password" name="pass"/></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</body>
<html>
4/8/2022 24/41
 Web page example
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>

<a href=“http:\\cms.fpt.edu.vn”>Studying place</a>

</body>
</html>

4/8/2022 25/41
 Web application
• A web application or webapp is an application that is
accessed via web browser over a network such as the
Internet or an intranet.
• It is also a computer software application that is coded in
a browser-supported language (such as HTML, JavaScript,
Java, etc.) and reliant on a common web browser to
render the application executable.
• Web applications are popular due to the ubiquity of web
browsers, and the convenience of using a web browser as
a client, sometimes called a thin client.

4/8/2022 26/41
 Web browser
• The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages.
• The browser does not display the HTML tags, but
uses the tags to interpret the content of the page

4/8/2022 27/41
 Web server
• The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages.
• The browser does not display the HTML tags, but
uses the tags to interpret the content of the page

4/8/2022 28/41
 Summary
HTTP protocol
• Request – reponse model
• Request methods
• Request – response header
• HTTP status code

HTML Introduction
• What is HTML?
• HTML Tags
• HTML Documents = Web Pages
• HTML form
• Example

Web application
• Web browser
• Web server

4/8/2022 29/41
 Constructivity question
• When a user login into a website, what actions
are taking place behind the scenes? Describe this
process and show how the actors interact.
• How many client-server interactions are there in the
login task?
• Why can we use different browsers to login?
• What are the outstanding features of the HTTP
protocol that should be noted?
• What other protocols are there for the web model
besides HTTP?
• How many ways to talk between client and web-server
in HTTP
• How is the error occurring during the login process
represented and handled?
4/8/2022 30/41