SP2 Predavanje 1 - HTTP
SP2 Predavanje 1 - HTTP
Predavanje 1
Doc. dr. Biljana Mileva Bokoska
sklop 1:
- HTTP
- JSON
- AJAX
sklop 2:
- Web services intro
- WSDL Web services
- RESTful Web services
HTML 5
HTML5 is a core technology markup language of the Internet used for
structuring and presenting content for theWorld Wide Web. As of
October 2014 this is the final and complete fifth revision of
the HTML standard of theWorld Wide Web Consortium (W3C). The
previous version, HTML 4, was standardised in 1997.
Source: Wikipedia
HTML repeated
(source: codeacademy.com)
Every webpage you look at is written in a language called HTML. You
can think of HTML as the skeleton that gives every webpage
structure.
HTML
HTML stands for HyperText Markup Language. Hypertext means "text with links in it."
Any time you click on a word that brings you to a new webpage, you've clicked on
hypertext!
A markup language is a programming language used to make text do more than just sit
on a page: it can turn text into images, links, tables, lists, and much more. HTML is the
markup language we'll be learning.
<!DOCTYPE html>
<html>
<h1>This is h1</h1>
and this is not
</html>
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's
reading (in this case, HTML).
b. Always put <html> on the next line. This starts the HTML document.
c. Always put </html> on the last line. This ends the HTML document.
CSS
What makes webpages pretty? That's CSSCascading Style Sheets.
Think of it like skin and makeup that covers the bones of HTML. We'll
learn HTML first, then worry about CSS in later courses.
Basic terminology
To learn more HTML, we should learn how to talk about HTML. Already you
have seen we use <>s a lot.
Hyperlinks
What if you wanted to send the user to another part of your website, or
another website altogether? You use hyperlinks, or links for short!
<a href="http://www.codecademy.com">My Favorite Site!</a>
First, there's an opening <a> tag and that tag has an attribute called href. The
href value tells your link where you want it to go, in this case
http://www.codecademy.com.
Then you have a description of your link between your opening <a> and your
closing </a> tags. This is what you will be able to click on.
Finally, you have your closing </a> tag.
Adding images
You can add images to your websites to make them look fancy.We use an image tag, like so: <img>. This tag is a bit different from
the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It's also different
because there is no ending tag. It has / in the tag to close it: <img src="url" />.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://ssl.gstatic.com/accounts/ui/logo_2x.png" />
</body>
</html>
See the web address (or URL) after src=? It's "http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg". That tells the
<img> tag where to get the picture from! Every image on the web has its own image URL. Simply right-click on an image and
choose "Copy image URL." Paste that URL in quotes after src= to insert with your <img> tag.
HTML5 Introduction
What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTTP Protokol
The HTTP stands for HyperText Transfer Protocol. HyperText is text
with links in it (like this!) and a transfer protocol is a fancy way of
saying "rules for getting something from one place to another."
In this case, the rules are for transferring web pages to your browser.
Check out our fancy diagram in the editor. This is how clients and servers interact
on the Internet! One server can handle many requests from several clients at once.
//////////
//Server//
/////////
// //////////
\\
// //////////
\\
//
||
\\
//
// || \\
\\
//////////
// || \\
//////////
//Client// //
||
\\
//Client//
////////// //
||
\\
//////////
////////// ////////// //////////
//Client// //Client//
//Client//
////////// ////////// //////////
1xx: Information
Message:
Description:
100 Continue
103 Checkpoint
2xx: Successful
Message:
Description:
200 OK
The request is OK (this is the standard response for successful HTTP requests)
201 Created
202 Accepted
The request has been accepted for processing, but the processing has not been
completed
The request has been successfully processed, but is returning information that may be
from another source
204 No Content
The request has been successfully processed, but is not returning any content
The request has been successfully processed, but is not returning any content, and
requires that the requester reset the document view
The server is delivering only part of the resource due to a range header sent by the
client
3xx: Redirection
Message:
Description:
A link list. The user can select a link and go to that location.
Maximum five addresses
302 Found
Indicates the requested page has not been modified since last
requested
No longer used
Description:
401 Unauthorized
The request was a legal request, but the server is refusing to respond to it. For use when authentication is
possible but has failed or not yet been provided
403 Forbidden
The request was a legal request, but the server is refusing to respond to it
The requested page could not be found but may be available again in the future
A request was made of a page using a request method not supported by that page
The server can only generate a response that is not accepted by the client
409 Conflict
410 Gone
The "Content-Length" is not defined. The server will not accept the request without it
The server will not accept the request, because the request entity is too large
The server will not accept the request, because the URL is too long. Occurs when you convert a POST request
to a GET request with a long query information
The server will not accept the request, because the media type is not supported
The client has asked for a portion of the file, but the server cannot supply that portion
The server cannot meet the requirements of the Expect request-header field
Description:
What is HTTP?
The Hypertext Transfer Protocol (HTTP) is designed to enable
communications between clients and servers.
HTTP works as a request-response protocol between a client and
server.
A web browser may be the client, and an application on a computer
that hosts a web site may be the server.
Example: A client (browser) submits an HTTP request to the server;
then the server returns a response to the client. The response
contains status information about the request and may also contain
the requested content.
https://www3.ntu.edu.sg/home/ehchua/program
ming/webprogramming/HTTP_Basics.html
The WEB
Browser
Whenever you issue a URL from your browser to get a web resource using
HTTP, e.g.
http://www.test101.com/index.html, the browser turns the URL into
a request message and sends it to the HTTP server. The HTTP server interprets
the request message, and returns you an appropriate response message,
which is either the resource you requested or an error message. This process
is illustrated below:
HTTP Protocol
As mentioned, whenever you enter a URL in the address box of the browser, the browser translates the URL into
a request message according to the specified protocol; and sends the request message to the server.
For example, the browser translated the URL http://www.test101.com/doc/index.html into the following
request message:
The server:
When this request message reaches the server, the server can take
either one of these actions:
The server interprets the request received, maps the request into
a file under the server's document directory, and returns the file
requested to the client.
The server interprets the request received, maps the request into
a program kept in the server, executes the program, and returns the
output of the program to the client.
The request cannot be satisfied, the server returns an error message.
The browser:
The browser receives the response message, interprets the message and displays the contents of the
message on the browser's window according to the media type of the response (as in the Content-Type
response header).
Common media type include "text/plain", "text/html", "image/gif", "image/jpeg", "audio/mpeg",
"video/mpeg", "application/msword", and "application/pdf".
In its idling state, an HTTP server does nothing but listening to the IP address(es) and port(s) specified in
the configuration for incoming request. When a request arrives, the server analyzes the message header,
applies rules specified in the configuration, and takes the appropriate action. The webmaster's main
control over the action of web server is via the configuration, which will be dealt with in greater details in
the later sections.
HTTP Specifications
The HTTP specification is maintained by W3C (World-wide Web
Consortium) and available at
http://www.w3.org/standards/techs/http.
There are currently two versions of HTTP, namely, HTTP/1.0 and
HTTP/1.1. The original version, HTTP/0.9 (1991), written by Tim
Berners-Lee, is a simple protocol for transferring raw data across the
Internet. HTTP/1.0 (1996) (defined in RFC 1945), improved the
protocol by allowing MIME-like messages. HTTP/1.0 does not address
the issues of proxies, caching, persistent connection, virtual hosts,
and range download. These features were provided in HTTP/1.1
(1999) (defined in RFC 2616).
Request Line
The first line of the header is called the request line, followed by optional
request headers.
The request line has the following syntax:
Request-method-name request-URI HTTP-version
request-method-name: HTTP protocol defines a set of request methods, e.g.,
GET, POST, HEAD, and OPTIONS. The client can use one of these methods to
send a request to the server.
request-URI: specifies the resource requested.
HTTP-version: Two versions are currently in use: HTTP/1.0 and HTTP/1.1.
Request Headers
The request headers are in the form of name:value pairs. Multiple
values, separated by commas, can be specified.
request-header-name: request-header-value1, request-header-value2,
...
Examples of request headers are:
Host: www.xyz.com
Connection: Keep-Alive
Accept: image/gif, image/jpeg, */*
Accept-Language: us-en, fr, cn
Status Line
The first line is called the status line, followed by optional response
header(s).
The status line has the following syntax:
HTTP-version status-code reason-phrase
HTTP-version: The HTTP version used in this session. Either HTTP/1.0 and
HTTP/1.1.
status-code: a 3-digit number generated by the server to reflect the
outcome of the request.
reason-phrase: gives a short explanation to the status code.
Common status code and reason phrase are "200 OK", "404 Not Found",
"403 Forbidden", "500 Internal Server Error".
Response Headers
The response headers are in the form name:value pairs:
response-header-name: response-header-value1, response-header-value2,
...
Examples of response headers are:
Content-Type: text/html
Content-Length: 35
Connection: Keep-Alive
Keep-Alive: timeout=15, max=100
The response message body contains the resource data requested.
The following shows the response of an HTTP/1.0 GET request (issue via telnet or your
own network program - assuming that you have started your HTTP server):
GET /index.html HTTP/1.0
(enter twice to create a blank line)
HTTP/1.1 200 OK
Date: Sun, 18 Oct 2009 08:56:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
ETag: "10000000565a5-2c-3e94b66c2e680"
Accept-Ranges: bytes
Content-Length: 44
Connection: close
Content-Type: text/html
X-Pad: avoid browser bug
<html><body><h1>It works!</h1></body></html>
Connection to host lost.
In this example, the client issues a GET request to ask for a document named "/index.html"; and negotiates to use HTTP/1.0
protocol. A blank line is needed after the request header. This request message does not contain a body.
The server receives the request message, interprets and maps the request-URI to a document under its document directory. If the
requested document is available, the server returns the document with a response status code "200 OK". The response headers
provide the necessary description of the document returned, such as the last-modified date (Last-Modified), the MIME type
(Content-Type), and the length of the document (Content-Length). The response body contains the requested document. The
browser will format and display the document according to its media type (e.g., Plain-text, HTML, JPEG, GIF, and etc.) and other
information obtained from the response headers.
Notes:
The request method name "GET" is case sensitive, and must be in uppercase.
If the request method name was incorrectly spelt, the server would return an error message "501 Method Not Implemented".
If the request method name is not allowed, the server will return an error message "405 Method Not Allowed". E.g., DELETE is a
valid method name, but may not be allowed (or implemented) by the server.
If the request-URI does not exist, the server will return an error message "404 Not Found". You have to issue a proper request-URI,
beginning from the document root "/". Otherwise, the server would return an error message "400 Bad Request".
If the HTTP-version is missing or incorrect, the server will return an error message "400 Bad Request".
In HTTP/1.0, by default, the server closes the TCP connection after the response is delivered. If you use telnet to connect to the
server, the message "Connection to host lost" appears immediately after the response body is received. You could use an optional
request header "Connection: Keep-Alive" to request for a persistent (or keep-alive) connection, so that another request can be
sent through the same TCP connection to achieve better network efficiency. On the other hand, HTTP/1.1 uses keep-alive
connection as default.
100 Continue: The server received the request and in the process of giving the response.
301 Move Permanently: The resource requested for has been permanently moved to a new location. The URL of the new location is given in the response header called Location.
The client should issue a new request to the new location. Application should update all references to this new location.
302 Found & Redirect (or Move Temporarily): Same as 301, but the new location is temporarily in nature. The client should issue a new request, but applications need not update
the references.
304 Not Modified: In response to the If-Modified-Since conditional GET request, the server notifies that the resource requested has not been modified.
400 Bad Request: Server could not interpret or understand the request, probably syntax error in the request message.
401 Authentication Required: The requested resource is protected, and require clients credential (username/password). The client should re-submit the request with his
credential (username/password).
403 Forbidden: Server refuses to supply the resource, regardless of identity of client.
404 Not Found: The requested resource cannot be found in the server.
405 Method Not Allowed: The request method used, e.g., POST, PUT, DELETE, is a valid method. However, the server does not allow that method for the resource requested.
500 Internal Server Error: Server is confused, often caused by an error in the server-side program responding to the request.
501 Method Not Implemented: The request method used is invalid (could be caused by a typing error, e.g., "GET" misspell as "Get").
502 Bad Gateway: Proxy or Gateway indicates that it receives a bad response from the upstream server.
503 Service Unavailable: Server cannot response due to overloading or maintenance. The client can try again later.
504 Gateway Timeout: Proxy or Gateway indicates that it receives a timeout from an upstream server.
References
https://www3.ntu.edu.sg/home/ehchua/programming/webprogram
ming/HTTP_Basics.html
http://www.jmarshall.com/easy/http/
http://www.tutorialspoint.com/http/
http://www.codecademy.com/courses/javascript-beginner-enxTAfX/0/1
http://www.w3schools.com/tags/ref_httpmethods.asp
http://www.codecademy.com/courses/javascript-beginner-enx9DnD/0/1?curriculum_id=506324b3a7dffd00020bf661