4.

HTTP and the Web

Services
Compiled By
Bibek Ropakheti
Outlines
• HTTP, Web Servers, and Web Access
• Universal naming with URL’s
• WWW Technology : HTML, DHTML, XML
• Helper Applications: CGI, PERL, JAVA, JAVA SCRIPTS, PHP, ASP, .NET
Applications
• Introduction to AJAX (Programming)
• Browser as a rendering engine: Text, HTML, gif, and jpeg

2
HTTP, Web Servers and Web Access
HTTP
• A communication protocol
• A set of rules and regulations that determine how data is transmitted
over internet
• Works on Application Layer of OSI Model
• Application Layer provides services for user application to use
• User application uses protocols that reside at the application layer. Eg.
Browsers – HTTP/s, Thunderbird - SMTP

3
HTTP, Web Servers and Web Access
HTTP
• an application-level protocol for distributed, collaborative,
hypermedia information systems (RFC-2616)
• Not only text but graphics and multimedia
• A part of TCP/IP protocols suite

4
HTTP protocol?
• History
• 1990 – HTTP/0.9
• 1996 – HTTP/1.0
• 1999 – HTTP/1.1
• Next HTTP/2.0 (draft)

5
HTTP Communication chain

• The HTTP protocol is a request/response

protocol
• A client sends a request to the server
• The server responds data

Request

Response

HTTP Client HTTP Server 6

HTTP Communication chain

• HTTP Request/Response Chain with

Intermediaries
Request Request

Response Response
Intermediary HTTP Server
HTTP Client

Proxy
Gateway
7
HTTP stateless protocol
• Do not remember previous request/response chain

Request 1
Response 1

Request 2
Response 2

HTTP Client HTTP Server

How to maintain state?
8
HTTP Transport binding
• Transitory connection
• One connection is created for each request/response
• Persistent connection
• The connection is kept open after each request/response set until the client
is done requesting all the documents.

9
HTTP Methods
• GET (*)
• HEAD (*)
• POST (*)
• OPTIONS
• PUT
• DELETE
• TRACE
• CONNECT

10
HTTP GET vs. POST
• GET - Requests data from a specified resource
• POST - Submits data to be processed to a specified resource

11
HTTP GET vs. POST

12
HTTP Message
• Communication between devices using the HTTP takes place via HTTP
messages
• Two types: requests and responses.
• Text-based message format.

13
HTTP Request Message

14
HTTP Request Headers
• Accept:
• tell the server what Internet media types it is willing to accept in a
response
• Accept: type/subtype; text/plain; image/jpg; */*
• Accept-Charset
• specifies what character sets the client is willing to accept in a
response
• Accept-Charset: iso-8859-5, UTF-8
• Accept-Encoding
• specifies what content encodings the client is willing to accept
• Accept-Encoding: compress, gzip
• Accept-Language
• indicate what languages the client supports
• Accept-Language: en-gb; vi-vn 15
HTTP Request Headers (cont.)
• Host:
• Specifies the Internet host
• Host: www.vgu.edu.vn:8080
• User-Agent
• Specifies what agent (application) is sending the request
• User-Agent: Mozilla/5.0
• Cookie
• Cookie data which previously set by the server
• Cookie: user=1; category=pc;
• Referer
• the URL of the resource from which the URL of the current
request was obtained 16
HTTP Response Message

17
HTTP Response Headers
• Server
• Server info that serves the request
• Server: Apache/2.4.1 (Unix)
• Expires
• gives the date/time after which the response is considered
• Expires: Thu, 20 Jul 2013 16:00:00 GMT
• Refresh
• Used in redirection, or when a new resource has been created.
• Refresh: 5; url=http://www.vgu.edu.vn

18
HTTP Status codes
• 1xx (Informational): Request received, server is continuing the
process.
• 2xx (Success): The request was successfully received, understood,
accepted and serviced.
• 3xx (Redirection): Further action must be taken in order to complete
the request.
• 4xx (Client Error): The request contains bad syntax or cannot be
understood.
• 5xx (Server Error): The server failed to fulfill an apparently valid
request.
19
Common HTTP Status codes
• 200 OK: The request is fulfilled.
• 301 Move Permanently: The resource requested for has been
permanently moved to a new location
• 304 Not Modified: Server notifies that the resource requested
has not been modified.

20
Common HTTP Status codes
• 400 Bad Request: Server could not understand the request
(syntax error).
• 401 Authentication Required: The requested resource is
protected, and require client’s credential.
• 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.

21
Common HTTP Status codes
• 500 Internal Server Error: Server is error in the server-side
program responding to the request.
• 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.

22
HTTP Cookie
• HTTP is a
stateless
protocol. Cookies
provide a
mechanism to
"maintain state".

23
HTTP Caching
• Cache: local copy of a resource

Request
Request

Response Response
HTTP Server
Intermediary
HTTP Client

24
HTTP Caching
• Expiration Model
• How long a resource is valid?
• Eliminate requests to server
• Reduce network round-trip
• Cache-Control: max-age=3600
• Expires: Tue, 15 Aug 2013 07:19:00 GMT

25
HTTP Caching
• Validation Model
• When the resource last changed?
• Eliminate full response to client
• Reduce network bandwidth
• If-Modified-Since: Thu, 17 Aug 2006 17:53:51 GMT
• ETag: "686897696a7c876b7e"

26
Web Server Definition
 A Web server is a program that generates and transmits
responses to client requests for Web resources.
 Handling a client request consists of several key steps:
 Parsing the request message
 Checking that the request is authorized
 Associating the URL in the request with a file name
 Constructing the response message
 Transmitting the response message to the requesting client

27
Web Server Definition
 The server can generate the response message in a variety of
ways:
 The server simply retrieves the file associated with the URL and
returns the contents to the client.
 The server may invoke a script that communicates with other servers
or a back-end database to construct the response message.

28
Web Sites Versus Web Servers
 Web site and Web server are different:
 A Web site consists of a collection of Web pages associated with a
particular hostname.
 A Web server is a program to satisfy client requests for Web
resources.

29
Steps in Handling Client Request
 A Web server proceeds through the following steps in handling an
HTTP request:
• Read and parse the HTTP request message
for example GET the resource /foo.htm
• Translate the URL to a file name
for example the resource be located in the base directory such as /www,
where the URL
http://www.bar.com/foo/index.html corresponds to
the file of www/foo/index.html
• Determine whether the request is authorized
• Generate and transmit the response that includes header to show the
status information
30
Access control
 A Web server may limit which users can access certain
resources. Access control requires a combination of
authentication and authorization.
• Authentication identifies the user who originated the request.
• Authorization determines which users have access to a particular
resource.

31
Authentication
 Most client-server systems authenticate a user by asking for a name and
password.
 Web server must perform authentication for every request for a resource
that has access restrictions.
 The server returns an HTTP response that indicates that the request
requires authorization.
 The response also identifies what kind of authentication is required.
 The response also identifies the realm
• a string that associates a collection of resources at the server

32
Authorization
 To control access to Web resources, the server must employ an
authorization policy.
 A policy typically expressed in terms of an access control list that
enumerates the users who are granted or denied access to the
resources.
 In addition to checking the user name, the server may allow or deny
access to the resource based on other information associated with the
HTTP request, such as the host name or IP address of the requesting
client.
 Authenticating HTTP requests can impose a heavy load on the Web
server.
33
Dynamically Generated Responses
 This feature differentiates the Web from earlier file transfer
services on the Internet.
 Dynamically generated responses are created in a variety of
ways:
• Server-side include
• Server script

34
Server-side Include
• A server-side include instructs the Web server to customize a
static resource based on directives in an HTML-like file.

35
Server Script
• A server script is a separate program that generates the request
resource.
• The program may run as
• Part of the server
• A separate process
• The main role of the Web server is
• To associate the requested URL with the appropriate script
• To pass data to/from the script
• The main role of the script is
• To process the input from the server
• To generate the content to the client

36
Server Script
• The server can interact with the script in several different
ways:
• Separate process invoked by the server
• Software module in the same process
• Persistent process contacted by the server

37
Passing Data to/from the Scripts
 Decoupling the scripts from the Web server requires a well-
defined interface for passing data between the two pieces of
software.
 Common Gateway Interface (CGI) defines interfaces for a
variety of operating system platforms. Illustrated in next figure.

38
 Example Variable Type

www.bar.com SERVER_NAME Server

Apache/10206 SERVER_SOFTWARE
HTTP/1.0 SERVER_PROTOCOL
80 SERVER_PORT
/www DOCUMENT_ROOT
CGI/2.0 GATEWAY_INTERFACE

10.9.57.188 REMOTE_ADDR Client

users.berkeley.edu REMOTE_HOST

Text/html CONTENT_TYPE Request

158 CONTENT_LENGTH
GET REQUEST_METHOD
NAME=Noam+Chomsky QUERY_STRING
De-CH ACCEPT_LANGUAGE
Mozilla/2.0 HTTP_USER_AGENT

Example of CGI Environment Variables

39
Creating and Using Cookies
 Cookies are typically created, used, and modified by scripts invoked to
generate dynamic responses, rather than by the Web server.
 The browser can be instructed to include a unique cookie in each HTTP
request.
 If the request does not include cookie, the script create a new cookie and
include the cookie in the header of the response message
Set-Cookie: Customer="user17"; Version="1"; Path="/book"
Subsequent requests from the user would include the cookie
Cookie: Customer="user17"; Version="1"; Path="/book"

40
Creating and Using Cookies
 A script can use a cookie as a user identifier in interacting with
a back-end database.
 Storing history information in the cookie may obviate the need
to retain information about the user in a back-end database.

41
Sharing Information Across Request
 A Web server may retain some information to reduce the
overhead of handling future requests by:
 Sharing HTTP responses across requests
 Sharing metadata across requests

42
Sharing HTTP Responses Across
Request
• In server-side caching, data from the disk is cached in main
memory at the server.
• A Web server cache can be
• Static files
• Dynamically generated responses
• the server would need to ensure that the cached result is
consistent with the primary copy of the information.

43
Sharing Metadata Across Requests
 The server could store the information generated in the
process such as:
 Translation of URL to file name
 Control information about the resource
 HTTP response headers
 The server could cache certain information across requests for
different resources:
 Current date/time
 Client name

44
Server Architecture
 Some techniques for allocating system resources
among competing client requests are :
 Event-driven server architecture
 Process-driven server architecture
 Hybrid server architecture

45
Event Driven Server Architecture
• An event-driven server
• Has a single process that alternates between servicing different
requests
• Allows the server to serialize operations that modify the same data
• Performs nonblocking system calls
• Not used in Most high-end Web servers

46
Process Driven Server Architecture
• A process-driven server
• Allocates each request to a separate process
• One master process listens for new connection
• The master process creates, or forks, a separate process for each new
connection
• Terminates the process after parsing the client request and
transmitting the response
• To prevent memory leak
• Introduces overhead for switching from one process to another

47
Hybrid Server Architecture
• In Hybrid server architectures
• The strengths of the event-driven and process-driven models are
combined
• Each process would become an event-driven server that alternates
between a small collection of requests
• A single process has multiple independent threads
• Main process instructs a separate helper process to perform time-
consuming operations

48
Server Hosting
 Multiple Web sites on a single machine
 Multiple machine for a single Web site

Figure below illustrates the above mechanisms

49
 1
www.foo.com
www.bar.com

www.big.com
Surrogate
3
To/From Internet
www.big.com

www.mid.com

Figure Hosting complex with surrogate in front of four server machines

50
Universal Naming With URL’s
• Uniform Resource Locator
• RFC 1738
• The syntax and semantics of formalized information for location and
access of resources via the internet
• Syntax and Semantics in compact string representation known as
Uniform resource locators

51
Universal Naming with URL’s
• URL’s are used to locate resources, by providing an abstract
identification of the resource location
• Having located a resource, a system may perform a variety of
operations on the resources, like: access, update, replace, and find
attribute.
• In general only access method needs to be specified for any URL
scheme

52
Universal Naming with URL’s
• Basic syntax of URL
• <scheme>:<scheme-specific-part>
• Scheme names consists of a sequence of characters. Like: letters (a to
z), digits, character “+”, period “.”,
• URL must treat Uppercase and Lower case as equivalence
• Eg. HTTP and http

53
Universal Naming with URL’s
• Schemes could be
• ftp, http, mailto, etc.
• Example syntax URL’s:
• http://<host>:<port>/<path>?<searchpart>
• mailto:<rfc822-addr-specs>

54
WWW Technology : HTML, DHTML,
XML
• WWW Technology is a mechanism of displaying, and rendering the
contents in the web page / web sites.
• The components used in WWW Technology are primarily HTML,
DHTML, and XML
• These are Markup Languages used in Web Programming

55
HTML
• Hyper Text Markup language
• RFC 1866 for HTML/2.0
• Simple markup language used to create documents that are platform
independent i.e. Chrome, Safari, Firefox, IE, etc.
• Html markup can represent hypertext news, mails, documents, simple
structured documents with in-lined graphics; and hypertext views of
existing bodies of information

56
HTML
• Tag based syntax
• Each tag can contain attributes that further refine the meaning of the tag
• EX:
<html>
<body>
<p>
This paragraph may contain a lot of lines in the source
code, but the browser ignores it.
This paragraph may contain a lot of spaces in the
source code,but the browser ignores it.
The number of lines in a paragraph depends on the size
of your browser window. If you resize the browser
window, the number of lines in this paragraph will
change. </p>
</body>
57
</html>
DHTML
• Dynamic HTML
• Not standard defined by W3C
• Used by Microsoft and Netscape to describe the net technologies the
4.x generation browsers would support
• DHTML is a combination of technologies used to create dynamic Web
sites
• W3C once said: "Dynamic HTML is a term used by some vendors to
describe the combination of HTML, style sheets and scripts that
allows documents to be animated."

58
DHTML
• With DHTML a Web developer can control how to display and position
HTML elements in a browser window
• The HTML DOM is the DOM for HTML. It defines a standard set of
objects for HTML, and a standard way to access and manipulate
HTML objects.
• From W3C, "The W3C DOM is a platform and language neutral
interface that allows programs and scripts to dynamically access and
updates the content, structure, and style of a document".

59
XML
• Extensible Markup Language
• Subset of SGML (Standard Generalized Markup Language)
• SGML itself is not a markup language; rather, it is a language to create
markup languages.
• SGML supports the definition of markup languages that are hardware-
and software-independent.
• SGML was developed and standardized by the International
Organization for Standardization (ISO), which published it in 1986.
• Because of SGML's complexity, HTML and XML were developed as
simplified subsets of SGML for use on the Internet.
60
XML
• XML’s goal is to enable generic SGML to be served, received, and
processed on the Web in the way that is now possible with HTML.
• XML has been designed for ease of implementation and for
interoperability with both SGML and HTML.
• XML is not a replacement for HTML. XML and HTML were designed
with different goals:
• XML was designed to describe data and to focus on what data is.
• HTML was designed to display data and to focus on how data looks.
• HTML is about displaying information, while XML is about describing
information. XML tags are not predefined. You must "invent" your
own tags
61
XML
Namespace
• XML namespaces provide a simple method for qualifying element and
attribute names used in Extensible Markup Language documents by
associating them with namespaces identified by URI references.
• XML Namespaces provide a method to avoid element name conflicts.
• Element names in XML are not predefined, a name conflict will occur
when two different documents use the same element names.

62
XML
XML Schema / XSD Schemas
• XML namespaces provide a simple method for qualifying element and
attribute names used in Extensible Markup Language documents by
associating them with namespaces identified by URI references.
• XML Namespaces provide a method to avoid element name conflicts.
• Element names in XML are not predefined, a name conflict will occur
when two different documents use the same element names.

63
XML
DTD
• Document Type Definition defines the legal building blocks of an XML
document.
• It defines the document structure with a list of legal elements and
attributes.
• A DTD can be declared inline inside an XML document, or as an
external reference.
• The purpose of a DTD is to define the legal building blocks of an XML
document

64
XML
DTD
• It defines the document structure with a list of legal elements and
attributes. XHTML documents have three parts:
• the DOCTYPE (which contains the DTD declaration),
• the head and
• the body. T
• To create web pages that properly conform to the XHTML 1.0
standard, each page must include a DTD declaration; either strict,
transitional, or frameset.

65
XML
DTD – Declaration “Strict”
• Strict DTD is used when XHTML pages will be marked up cleanly, free of
presentational clutter.
• Strict DTD is seen together with cascading style sheets, because it
doesn’t allow attributes like "bgcolor" to be set for the <body> tag, etc.
• Example The strict DTD looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 66
XML
DTD – Declaration “Transitional”
• The transitional DTD should be used when there is a need to take
advantage of the presentational features that are available through
HTML.
• Transitional DTD when you want to support older browsers that don’t
have built-in support for cascading style sheets.
• The transitional DTD looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 67
XML
DTD – Declaration “Frameset”
• You should use the frameset DTD when your XHTML page will contain
frames.
• The frameset DTD looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
68
XML – Example of XML Document
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

69
Helper Applications: CGI, Perl, JAVA, JAVA
SCRIPTS, PHP, ASP, .NET Applications
• These are client-side and server side scripting languages

Client-Side Server-Side

HTML, XML CGI/Perl

Cascading Style Sheets (CSS) PHP
Scripting languages ColdFusion
- JavaScript, VBScript Scripting Languages
Java Applets - Server-side JavaScript
ActiveX controls - ASP, JSP, Java Servlets
Plug-ins and Helpers application ISAPI/NSAPI programs

70
CGI – Common Gateway Interface
• An interface in the Web server
• Used to communicate with non-Web software such as database
server software
• Include a number of environment variables that can be interrogated
• Some examples of CGI variables:
SERVER_SOFTWARE Server Software
REMOTE_ADDER The address of the client
SERVER_PROTOCOL The protocol used and its version
REQUEST_METHOD The method used by the request for
example GET
SERVER_PORT The port number used for the Web
Server (normally 80) 71
Perl
• Server Side scripting language
• Written by Larry Wall and named after his original name “Pearl”
• Huge success with system administrators, and so development of the
language flourished

What is perl?
• “Perl is general purpose programming language developed in 1987 by
Larry Wall. It has become the language choice for WWW development,
text processing, Internet Services, mail filtering, graphical programming,
and every other tasks requiring portable and easily-developed solutions.”
72
Typical uses of Perl
• Text processing
• Main use was text processing. Used to manipulate textual data, reports,
emails, news articles, log fines, or just about any kind of text
• System administration tasks
• Useful for tying together lots of smaller scripts, working with the file systems,
networking, and so on.
• CGI and web programming
• HTML is just test with built-in formatting, Perl can be used to process and
generate HTML. Perl was de facto language for web development, and is still
heavily used today. Many freely available tools and scripts to assist with web
development in Perl.
73
Typical use of Perl
• Database Interaction
• Perl’s DBI module makes interacting with all kinds of databases – ex: oracle. It
is easy and portable.
• Increasingly being used to write large database applications, especially those
which provide a database backend to a website
• Other Internet programming
• Perl modules are available for just about every kind of internet programming,
from mail and news clients, interfaces to Internet Relay Chats(IRC), right down
to lower level socket programming

74
Perl
• File ends with “pl” extension, ex: “abc.pl”

75
JAVA
• Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995.
• Java runs on a variety of platforms, such as Windows, Mac OS, and
the various versions of UNIX.
• With the advancement of Java and its widespread popularity, multiple
configurations were built to suite various types of platforms. Ex: J2EE
for Enterprise Applications, J2ME for Mobile Applications
• Sun Microsystems has renamed the new J2 versions as Java SE, Java
EE and Java ME, respectively.
• Java is guaranteed to be Write Once, Run Anywhere.
76
JAVA
Features of Java:
• Object oriented:
• Platform independent
• Simple
• Secure
• Architectural-neutral
• Portable
• Robust
• Multithreaded
• Interpreted
• High Performance
77
• Dynamic
JAVA
• Object Oriented: In Java, everything is an Object. Java can be easily
extended since it is based on the Object model.
• Platform independent: Unlike many other programming languages
including C and C++, when Java is compiled, it is not compiled into
platform specific machine, rather into platform independent byte code.
This byte code is distributed over the web and interpreted by virtual
Machine (JVM) on whichever platform it is being run.
• Simple: Java is designed to be easy to learn. If you understand the basic
concept of OOP, Java would be easy to master.
• Secure: With Java's secure feature, it enables to develop virus-free,
tamper-free systems. Authentication techniques are based on public-key
encryption. 78
JAVA
• Architectural-neutral: Java compiler generates an architecture-neutral object
file format, which makes the compiled code to be executable on many
processors, with the presence of Java runtime system.
• Portable: Being architectural-neutral and having no implementation
dependent aspects of the specification makes Java portable. Compiler in Java is
written in ANSI C with a clean portability boundary which is a POSIX subset.
• Robust: Java makes an effort to eliminate error prone situations by
emphasizing mainly on compile time error checking and runtime checking.
• Multithreaded: With Java's multithreaded feature, it is possible to write
programs that can do many tasks simultaneously. This design feature allows
developers to construct smoothly running interactive applications.
79
JAVA
• Interpreted: Java byte code is translated on the fly to native machine
instructions and is not stored anywhere. The development process is more
rapid and analytical since the linking is an incremental and lightweight
process.
• High Performance: With the use of Just-In-Time compilers, Java enables
high performance.
• Distributed: Java is designed for the distributed environment of the
internet.
• Dynamic: Java is considered to be more dynamic than C or C++ since it is
designed to adapt to an evolving environment. Java programs can carry
extensive amount of run-time information that can be used to verify and
resolve accesses to objects on run-time. 80
JAVA
Example JAVA Program
Public class MyFirstJavaProgram{
/*this is my first java program. This will print ‘Hello world’ as the output */

public static void main (String[] args)

{
System.out.println(“Hello World !!”); //prints Hello World
}
}

81
Program is saved as MyFirstJavaProgram.java [with .java extension]
JAVA SCRIPTS
• JavaScript gives you the freedom to add interactivity and responsiveness to
your web pages.
• JavaScript is a lightweight, easy to learn, scripting language. It’s used on
almost every website to respond to user actions, validate web forms, detect
browser support, and much more.
• JavaScript is a web programming language, that is, a language that enables
you, the designer of your website, to control how a web page behaves. This
makes JavaScript crucially different from HTML, the language that gives
structure to your web documents, and CSS, the language that controls the
appearance of web pages.

82
JAVA SCRIPTS
• Java Scripts is not the same as Java.
• Java (developed by Sun Microsystems) is a powerful and much more
complex programming language in the same category as C and C++.
• JavaScript was created by Brendan Eich at Netscape and was first
introduced in December 1995 under the name of LiveScript. However, it
was rather quickly renamed JavaScript, although JavaScript’s official name
is ECMAScript, which is developed and maintained by theECMA
(European Computer Manufacturer's Association) International
organization.
• JavaScripts runs in Client, i.e. the browser.
83
JAVA SCRIPTS
What Java scripts can do:
• Put text in an HTML page on-the fly
• Make web pages responsive
• Detect Visitors’ browsers
• Create Cookies
• Validate web form data

84
JAVA SCRIPTS
What Java scripts can do:
• Put text in an HTML page on-the fly
• Say you want to display a nice thank you message to a user who has just submitted a
comment form on your website. Obviously, the message needs to be added after the
user has submitted the form.
• You could let the server do that. However, if your website is very busy and your
server processes hundreds of forms a day, it might take a little while for your thank
you message to appear to the user.
• Here's JavaScript to the rescue. Because JavaScript runs in the user's browser, the
thank you note can be added and displayed on the page almost instantaneously,
making your website users happy.

85
JAVA SCRIPTS
What Java scripts can do:
• Make web pages responsive
• Web environments are dynamic, things happen all the time: the web page loads in
the browser, the user clicks a button or moves the mouse over a link, etc. These are
called events.
• With JavaScript you can make the page immediately react to these events the way
you choose: for example, by showing or hiding specific page elements, by changing
the background color, etc.

86
JAVA SCRIPTS
What Java scripts can do:
• Detect visitors’ browsers
• You can use a JavaScript script to detect the visitor’s browser, or, even better, you
can detect what features a certain browser does or does not support. Depending on
the browser and its capabilities, you can choose to load a page specifically tailored
to that kind of browser
• Create Cookies
• A JavaScript script is great if you want to create cookies so that your visitors can
enjoy a personalized experience the next time they visit your website

• You can use a JavaScript script to validate form data before the form is submitted to
a server. This saves the server from extra processing 87
JAVA SCRIPTS
Example: Syntax Javascript
<!DOCTYPE html>
<html>
<head>
<title>My first JavaScript page</title>
//Embeded JavaScript in HTML Page
<script type="text/javascript"> //JavaScript code goes here </script>
//inserting Javaxcript from outside HTML page
<script type="text/javascript" src="yourjavascript .js"></script>
</head>
<body>
//Javascript can be used in body also
<script type="text/javascript"> //JavaScript code goes here </script>
</body>
88
</html>
JAVA SCRIPT
Example: Functional javascript powered page
<!DOCTYPE html>
<html>
<head> <title>My first JavaScript page</title> </head>
<body>
<script type="text/javascript"> //JavaScript code goes here alert('Hello
World!');
</script>
</body>
</html> 89
PHP
• PHP was originally an acronym for Personal Home Pages, but is now a
recursive acronym for PHP: Hypertext Preprocessor.
• PHP was originally developed by the Danish Greenlander Rasmus Lerdorf,
and was subsequently developed as open source. PHP is not a proper web
standard - but an open-source technology. PHP is neither real
programming language - but PHP lets you use so-called scripting in your
documents.
• To describe what a PHP page is, you could say that it is a file with the
extension .php that contains a combination of HTML tags and scripts that
run on a web server i.e. Server Side

90
PHP
How does PHP work?

Working of simple HTML page

Working of PHP page

91
PHP
• Unlike simple HTML, we need to tell server when the PHP starts and end.
• Tag <?php and ?> to mark start and end for the PHP codes that server must
execute.
• Example
<html>
<head> <title>My first PHP page</title> </head>
<body>
<?php echo "<h1>Hello World!</h1>";
?>
</body>
</html> 92
ASP
• Active Server Pages (ASP)
• ASP is developed by Microsoft. It is not really a standard ASP is
neither a real programming language nor is it a programming
language, but it's a Microsoft technology that lets you use so-called
scripting in your documents.
• To describe what an ASP page is, you could say that it is a file with the
extension .asp that contains a combination of HTML tags and scripts
that run on a web server.
• Server side technology

93
ASP
How ASP works:

94
ASP
How asp works:
• The server first reads the ASP file carefully to see if there are any tasks
that need to be executed. Only when the server has done what it is
supposed to do, the result is then sent to the client. It is important to
understand that the client only sees the result of the server's work -
not the actual instructions.
• This means that if you click "view source" on an ASP page, you do not
see the ASP codes - only basic HTML tags. Therefore, you can not see
how an ASP page is made by using "view source".

95
ASP
• ASP scripts can be written in different languages. Like: Microsoft
Visual Basic Scripting Edition (VBScript), but could also be written in
another language - eg. JScript.
• We need to tell the server when the ASP will start and end. In ASP we
use the tags <% and %> to mark the start and end for the ASP codes
that the server must execute.

96
ASP
<html>
<head>
<title>My first ASP page</title>
</head>
<body>
<% Response.Write "<h1>Hello World!</h1>" %>
</body>
</html>

97
Introduction to AJAX (Programming)
• AJAX = Asynchronous JavaScript and XML.
• AJAX is a technique for creating fast and dynamic web pages.
• AJAX allows web pages to be updated asynchronously by exchanging
small amounts of data with the server behind the scenes. This means
that it is possible to update parts of a web page, without reloading
the whole page.
• Classic web pages, (which do not use AJAX) must reload the entire
page if the content should change.
• Examples of applications using AJAX: Google Maps, Gmail, Youtube,
and Facebook tabs.
98
Introduction to AJAX (Programming)
How ajax works

99
Introduction to AJAX (Programming)
• AJAX is based on internet standards, and uses a combination
of:
• XMLHttpRequest object (to exchange data asynchronously
with a server)
• JavaScript/DOM (to display/interact with the information)
• CSS (to style the data)
• XML (often used as the format for transferring data)

100
Browser as a rendering engine: Text,
HTML, gif, and jpeg
• The main function of a browser is to present the web resource we choose,
by requesting it from the server and displaying it in the browser window.
• The resource is usually an HTML document, but may also be a PDF, image,
or some other type of content.
• The location of the resource is specified by the user using a URI (Uniorm
Resource Identifier).
• The way the browser interprets and displays HTML files is specified in the
HTML and CSS specifications. These specifications are maintained by the
W3C (World Wide Web Consortium) organization

101
Browser as a rendering engine: Text,
HTML, gif, and jpeg
Main components of browsers:

102
Browser as a rendering engine: Text,
HTML, gif, and jpeg
Rendering Engine:
• Rendering, that is display of the requested contents on the browser screen.
• By default the rendering engine can display HTML and XML documents and
images. It can display other types of data via plug-ins or extension; for
example, displaying PDF documents using a PDF viewer plug-in
• Different browsers use different rendering engines: Internet Explorer uses
Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from
version 15) use Blink, a fork of WebKit.
• WebKit is an open source rendering engine which started as an engine for
the Linux platform and was modified by Apple to support Mac and Windows
103
Browser as a rendering engine: Text,
HTML, gif, and jpeg
The main Flow
• The rendering engine will start getting the contents of the requested
document from the networking layer. This will usually be done in 8kB
chunks

104
Browser as a rendering engine: Text,
HTML, gif, and jpeg

Fig: Webkit main Flow 105

Browser as a rendering engine: Text,
HTML, gif, and jpeg

Fig: Mozilla’s Gecko rendering Engine main glow 106

References
• RFC-2616: http://www.w3.org/Protocols/rfc2616/rfc2616.html
• TCP GUIDE:
http://www.tcpipguide.com/free/t_TCPIPHypertextTransferProto
colHTTP.htm
• IBM Software Information Center - The HTTP protocol
http://publib.boulder.ibm.com/infocenter/cicsts/v3r1/topic/com.
ibm.cics.ts31.doc/dfhtl/topics/dfhtl29.htm

107