IT135-8:

Web Systems and

Technologies 2
Fundamentals
Learning Objectives
After completing this chapter, you will be able to:

Introduction to the Internet

Define Internet

Explain how the internet works

Describe and explain AJAX, XML,

and JSON
 A Brief ARPANet
Introduction Network constructed by the US Department of Defense’s
to the Advanced Research Project Agency that connected a
Internet dozen ARPA-funded research laboratories and
(1 of 3) universities.
Used packet switching to allow multiple computers to
communicate on a single network.
The first node of the network was established at UCLA in
1969.
Primary early use was simple text-based communications
through electronic mail.
 A Brief BITNET
Introduction Acronym for Because It’s Time Network that began in City
to the University of New York
Internet Initially built to provide electronic mail and file transfers
(2 of 3) CSNET
Acronym for Computer Science Network
Connected the University of Delaware, Purdue University,
the University of Wisconsin, the RAND Corporation, and
Bolt, Beranek, and Newman (Massachusetts-based
research company)
Initial purpose was to provide electronic mail
 A Brief NSFNet
Introduction New national network created in 1986 sponsored by the
to the National Science Foundation
Internet Initially connected the NSF-funded supercomputer
(3 of 3) centers that were at five universities
By 1990, replaced ARPANet for most nonmilitary uses
By 1992, connected more than one million computers
globally
In 1995, a small part of NSFNet returned to being a
research network, the rest became known as the Internet
 What
is the The Internet is a huge collection of computers connected
in a communications network. These computers are of
Internet? every imaginable size, configuration, and manufacturer.
Transmission Control Protocol/Internet Protocol (TCP/IP)
allows diverse devices to communicate with each other.
It became the standard for computer network
communications in 1982.
All devices connected to the Internet must be uniquely
identifiable.
 Internet
Protocol The Internet Protocol (IP) address of a machine
connected to the Internet is a unique 32-bit number.
Addresses IP addresses are usually written as four 8-bit numbers,
separated by periods. The four parts are separately used
by Internet-routing computers to decide where a
message must go next to get to its destination.
Organizations are assigned blocks of Ips, which in turn
assign to their machines that need Internet access.
In late 1998, a new IP standard IPv6, was approved which
expanded the address size from 32 bits to 128 bits.
Domain Due to the difficulty remembering numbers, machines on the
internet also have textual names.

Names These names begin with the name of the host machine,
followed by progressively larger enclosing collections of
machines called domains
The first domain name is the domain to which the host is a
part
The second domain name gives the domain of which the
first domain is a part
The last domain identifies the type of organization in which
the host resides
Fully qualified domain name example:
movies.marxbros.comedy.com
Domain Name System
Domain name conversion
 Different telnet – protocol developed in 1969 to allow user on one

Protocols computer on the Internet to log onto and use another

computer on the Internet
File Transfer Protocol (ftp) – developed to transfer files
among computers on the Internet
Usenet – developed to serve as an electronic bulletin board
mailto – developed to allow messages to be sent from the
user of one computer to other users of the computer on the
Internet
This variety of protocols, each having their own interface and
useful only for which it was designed, restricted the growth of the
Internet.
The World Wide Web

In 1989, Tim Berners-Lee proposed

a new protocol for the Internet,
which suggested a way to let all
users, but particularly scientists,
browse each other’s papers on the
Internet. He developed HTML,
URLs, and HTTP.
Basic Web Architecture
The web is a two-tiered architecture.
A web browser displays information
content,
A web server that transfers information to
the client.
 Web
Browser A web browser is a software application for retrieving,
presenting, and traversing information resources on the
World Wide Web.
The primary purpose of a web browser is to bring
information resources to the user.
The major web browsers are Windows Internet
Explorer, Mozilla Firefox, Apple Safari, Google Chrome,
and Opera.
 Web
Server The term web server or webserver can mean one of
two things:
A computer program that accepts HTTP requests
and return HTTP responses with optional data
content.
A computer that runs a computer program as
described above.
HTML
Document layout language (not a programming
language)
Defines structure and appearance of Web pages
Many HTML documents are the result of manual
authoring or word processing HTML converters.
HTML files are viewed using a web browser.
Universal Resource Identifier(URI)

URIs are used for two different purposes:

To name a resource (Uniform Resource Names)
To provide a path to, or location, of a resource
(Uniform Resource Locators)
Universal Resource Identifier (URI)

URLs are location dependent

It contains four distinct parts: the protocol type, the
machine name, the directory path and the file name.
There are several kinds of URLs: file URLs, FTP URLs, and
HTTP URLs.
HTTP HTTP is an application-level protocol for distributed,
collaborative, hypermedia information systems.
HTTP is a request/response standard of a client and
a server.
Typically, an HTTP client initiates a request.
Resources to be accessed by HTTP are identified
using Uniform Resource Identifiers (URIs).
Request Message

The request message consists of the following:

Request line
Headers (Accept-Language, Accept, ….)
An empty line
An optional message body
Request
HTTP defines methods (sometimes referred to as "verbs")
Methods indicating the desired action to be performed on the identified

(1 of 2) resource.
HEAD - The HEAD method asks for a response identical to
that of a GET request, but without the response body.
GET - The GET method requests a representation of the
specified resource. Requests using GET should only retrieve
data.
POST - The POST method is used to submit an entity to the
specified resource, often causing a change in state or side
effects on the server.
PUT - The PUT method replaces all current representations
of the target resource with the request payload.
Request
HTTP defines methods (sometimes referred to as "verbs")
Methods indicating the desired action to be performed on the identified

(2 of 2) resource.
DELETE - The DELETE method deletes the specified
resource.
TRACE - The TRACE method performs a message loop-back
test along the path to the target resource.
OPTIONS - The OPTIONS method is used to describe the
communication options for the target resource.
CONNECT - The CONNECT method establishes a tunnel to
the server identified by the target resource.
PATCH - The PATCH method is used to apply partial
modifications to a resource.
 Safe
Methods
HEAD, GET, OPTIONS and TRACE are
defined as safe (no side effects).
POST, PUT and DELETE are intended for
actions which may cause side effects on
the server.
Status The first line of the HTTP response is called the

Lines status line.

The way the user agent handles the response
primarily depends on the code and secondarily on
the response headers.
Informational: 1xx
Success: 2xx
Redirection: 3xx
Client-Side Error: 4xx
Server-Side Error: 5xx
Sample HTTP Request and Response
Client request

Server response
 HTTP is a stateless protocol.
HTTP Hosts do not need to retain information about users
Session between requests.

State Statelessness is a scalability property.

For example, when a host needs to customize the
content of a website for a user. Solution:
Cookies
Sessions
Hidden variables (when the current page is a
form)
URL encoded parameters (such as /index.php?
session_id=some_unique_session_code)
Cookie Cookie is a small piece of text stored on a user's
computer by a web browser.
A cookie consists of one or more name-value pairs
containing bits of information such as user
preferences.
It is sent as an HTTP header by a web server to a
web browser and then sent back unchanged by the
browser each time it accesses that server.
A cookie can be used for authenticating, session
tracking (state maintenance), and remembering
specific information about users.
Setting a Cookie
 Cookie Cookies expire, and are therefore not sent by the
Expiration browser to the server, under any of these
conditions:
At the end of the user session (i.e. when the
browser is shut down) if the cookie is not
persistent
An expiration date has been specified, and has
passed
The expiration date of the cookie is changed (by
the server or the script) to a date in the past
The browser deletes the cookie by user request
Session A session is a reference to a certain time frame for
communication between two devices, two systems
or two parts of a system.
A user session begins when a user logs in to or
accesses a particular computer, network, or
software service. It ends when the user logs out of
the service, or shuts down the computer.
A session can temporarily store information related
to the activities of the user while connected.
 Session
Variables In computer programming, session variables store
temporary information, sometimes to use for
retrieving and viewing data on multiple web pages.
Websites requiring a username and password use
session variables to help transfer data between web
pages, but only while the user is logged in to the
computer.
Sample HTTP Request and Response
This basic web architecture is fast evolving to serve a wider
variety of needs beyond static document access and
browsing.
CGI extends the architecture to three-tiers by adding a
back-end server that provides services to the Web server.
Common
Gateway
Interface CGI is a standard protocol for interfacing external

(CGI) application software with a web server.

CGI programs are executable programs that run on
the Web server.
The CGI program typically returns HTML
pages that it constructs on the fly.
Traditional
JavaScript is a scripting language designed for
Uses of creating dynamic, interactive Web
JavaScript applications that link together objects and
resources on both clients and servers.
Getting your Web page to respond or react directly
to user interaction with form elements and
hypertext links
Preprocessing data on the client before
submission to a server
Changing content and styles
Database-driven Website Architecture
Server-side
processing
In server-side processing, the Web server:
Receives the dynamic Web page request
Performs all the processing necessary to
create the dynamic Web page
Sends the finished Web page to the client for
display in the client’s browser
Client-side
processing In client-side processing:
Some processing needs to be “executed” by
the browser, either to form the request for the
dynamic Web page or to create or display the
dynamic Web page.
Eg. Javascript code to validate user input
Programming Languages

Server-side processing Client-side processing

PHP CSS
ASP HTML
ASP.NET JavaScript
Perl Adobe Flex
J2EE Microsoft Silverlight
Python, e.g. Django
Ruby, e.g. Ruby on Rails
ColdFusion
AJAX
Asynchronous JavaScript and
XML
Ajax isn’t a technology. It’s
really several technologies,
each flourishing in its own
right, coming together in
powerful new ways. Ajax
incorporates:
XHTML and CSS
Jesse James
Document Object Model Garrett, essay in
XML and XLST February 18, 2005
XMLHttpRequest Ajax: A New
JavaScript Approach to Web
Applications
AJAX
Drawbacks It breaks browser history engine (Back
of AJAX button).
No bookmark.
The same origin policy.
Ajax opens up another attack vector for
malicious code that web developers might
not fully test for.
Web Services
Web Service is a software system designed to support
machine-to- machine interaction over a network.
Web services are frequently just Internet Application
Programming Interfaces (API) that can be accessed over a
network.
 Web
Web Services are platform-independent and language-
Services independent, since they use standard XML languages.
Most Web Services use HTTP for transmitting messages
(such as the service request and response).
Style of Use
RPC
SOAP
REST
XML XML is a universally agreed markup meta-language
primarily used for information exchange.
The two primary building blocks of XML are elements and
attributes.
Elements are tags and have values.
Elements are structured as a tree.
Alternatively, elements may have both attributes as
well as data
Attributes help you to give more meaning and
describe your element more efficiently and clearly.
XML <?xml version=\"1.0\" encoding=\"UTF-8\"?>
<person>
<id type="integer">1111</id>
<last_name>Smith</last_name>
<first_name>John</first_name>
<address>
<city>New York</city>
<street>21 2nd Street</street>
<postal_code
type="integer">10021</postal_code>
<state>NY</state>
</address>
</person>
JSON
JSON is a lightweight computer data
interchange format.
JSON is based on a subset of the
JavaScript programming language.
It is considered a language-
independent data format.
It serves as an alternative to the use Douglas Crockford is a
of the XML format. senior JavaScript Architect
at Yahoo! He is well known
for his work in introducing
JavaScript Object Notation
(JSON).
 {

JSON
"firstName": "John",
"lastName": "Smith",
"address": {
"street": "212nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers":[ "212
555-1234",
"646555-4567"
]
}
 R|R

Questions
?