Web Architecture

Topic 1 Web Protocols

HTTP

HTTPS

FTP

Web Addresses (URLs)

What is a URL?

What is a Domain Name?

How Does a Website Get a Domain Name?

How DNS Works

What is DNS?

What is a DNS Server?

How does my Browser find the right Website?

Topic 2 Stateless protocol

Advantages and Disadvantages

Examples

Web Server

What Does a Web Server Look Like?

Do I Need A Web Server?

Web Servers are Easy!

Viewing HTML Files Without a Web Server

Viewing HTML Files With a Web Server

Example Web Server

Topic 3 Multiple Websites

Page Not Found

Default Documents

SSL Certificates

Apache HTTP Server

Microsoft Internet Information Services (IIS)

Sun Java System Web Server

HTTP Headers

HTTP Headers in HTTP Requests

HTTP Headers in HTTP Responses

Topic 4

AJAX

What is AJAX?

How AJAX Works

AJAX is Based on Internet Standards

Google Suggest

Basic PKI concept

Web Protocols

Protocol means “rules”

. A protocol is simply a standard for enabling the connection,

communication, and data transfer between two places on a

network

Some of the Protocal

HTTP

HTTPS

FTP

HTTP

HTTP

HTTP stands for Hypertext Transfer Protocol.

It is the standard protocol for transferring web pages (and

their content) across the Internet. You may have noticed

that when you browse a web page, the URL is preceded by

"HTTP://". This is telling the web browser to use HTTP to

transfer the data. Most browsers will default to HTTP if you

don't specify it. You can test this by typing in say...

www.quackit.com (instead of http://www.quackit.com").

HTTPS

HTTPS

HTTPS stands for Hypertext Transfer Protocol over

Secure Socket Layer. Think of it as a secure version of

HTTP. HTTPS is used primarily on web pages that ask you to

provide personal or sensitive information (such as a password

or your credit card details).

Why Https

When we do secured transaction like Credit Card

Email account

We pass through many networks IP provider etc

If you use HTTP any one can access information (costly item

in a courier without locking it))

Hence new protocol was invented for secured data

FTP

FTP stands for File Transfer Protocol. It is used to transfer

files across the Internet. FTP is commonly used by web

developers to publish updates to a website (i.e. to upload a

new version of the website). Where HTTP is used for

displaying the file in your browser, FTP is used simply to

transfer the file from one computer to a specified location on

another computer. You can use FTP to transfer the files from

your computer to a remote computer (such as a web server),

or to transfer from the remote computer to your local

computer.

URL

To search web resource

A URL stands for Uniform Resource Locator and is probably

most easily described as a "web address". "URL" and "web

address" are often used interchangeably. Here are examples

of URLs:

http://www.quackit.com

http://www.quackit.com/web_hosting

http://www.quackit.com/web_hosting/domain_names.cfm

What is a Domain Name? A domain name is a unique name that is assigned to a

website. No two websites on the Internet can use the same domain name. 4

Because each domain name is unique, this enables anyone to access your website using the domain name.

If you didn't have a domain name, the only way anyone could access your website is by using an IP address. A website's IP address is also unique, but it's much harder to for us humans to remember than a domain name. Well technically speaking, websites on the same machines can (and often do) share an IP address, so IP addresses aren't actually as unique as they might wish they were!

They are short

They are easy to remember

They are easy to spell

4. They have a .com extension

5. They are descriptive

6. Or brandable

7. They don’t contain hyphens or numbers

How Does a Website Get a Domain

Name? asy. After deciding on your preferred domain name, you simply

check for it's availability using a domain name registrar or hosting provider. Once you've found an available domain name, you register it online, then configure it to point to your website (which is also very easy).

Try searching for a domain name now with ZappyHost. In most cases, you don't need to know about the inner workings of DNS when building a website. As mentioned, all you need to do is register your domain name and then point it at your website. You can usually do this via your domain name registrar/web host's control panel. In this case your web host will give you instructions of what to do. Once you've done this, there are some tricks you can use with DNS to assist with your website development. 5

Internet set of computers in network

identified by IP

But We cant remember it

Dns does the job for us

.

If browser/os is not aware of domain

name

They go to

Resolving Name Server

RNS may have this in memory or cache

if it does not than?

It goes to root name server

Com nameserver is also know as TLD(Top level Domain )

Servers

If root name server not found RNS will go to TLD server

If TLD name server not found RNS will go to

ANS(Authorative Name Server)

RNS will take this info in memory and puts in cache and

gives this to OS

Which will give it to browser

How does my Browser find the right

Website?

The first thing your web browser needs to do is translate the

domain name into the IP address of a website.

Doing this enables it to locate the correct website.

Once it's found the correct website, it can then download

the web page, along with it's associated files (images, CSS

files, etc).

Topic 2

Stateless protocol

In computing, a stateless protocol is a communications

protocol that treats each request as an independent

transaction that is unrelated to any previous request so that

the communication consists of independent pairs of requests

and responses. A stateless protocol does not require the

server to retain session information or status about each

communications partner for the duration of multiple

requests. An example of a stateless protocol is the Hypertext

Transfer Protocol (HTTP) which is the foundation of data

communication for the World Wide Web.

Advantages and Disadvantages The stateless design simplifies the server design because there is no need to

dynamically allocate storage to deal with conversations in progress. If a client dies in mid-transaction, no part of the system needs to be responsible for cleaning the present state of the server.

A disadvantage of statelessness is that it may be necessary to include additional information in every request, and this extra information will need to be interpreted by the server.

Examples

An example of a stateless protocol is HTTP.[1] The protocol provides no means of storing a user's data between requests. As a work-around, HTTP servers implement various session management methods,[2] typically utilizing a unique identifier in a cookie or parameter that allows the server to track requests originating from the same client.

Contrast this with a traditional FTP server that conducts an interactive session with the user. During the session, a user is provided a means to be authenticated and set various variables (working directory, transfer mode), all stored on the server as part of the user's state 11

Web server

Definition for web server:

Web definitions:A web server is a computer program that

delivers (serves) content, such as web pages, using the

Hypertext Transfer Protocol (HTTP), over.

Viewing HTML Files Without a Web

Server

Topic 3

Multiple Websites

Page Not Found

Default Documents

SSL Certificates

Apache HTTP Server

Microsoft Internet Information Services (IIS)

Sun Java System Web Server

HTTP Headers

HTTP Headers in HTTP Requests

HTTP Headers in HTTP Responses

Multiple Websites Multiple Websites

A web server can (and usually does) contain more than one website. In fact, many hosting companies host hundreds, or even thousands of websites on a single web server. Each website is usually assigned a unique IP address which distinguishes it from other websites on the

same machine. This IP address is also what the DNS server uses to resolve the domain name. It is also possible to configure multiple websites without using different IP addresses using host headers and/or different ports. This can be useful in a development environment and is quite easy to do.

Page Not Found

If the requested page isn't found, the web server sends the

appropriate error code/message back to the client. You can

create user friendly error messages, then configure your web

server to display that page instead of the usual error page.

This can add a nice touch to your website. How many times

have you (or even worse, your visitors) encountered a plain

white page with some cryptic error message on it? It's very

easy to create custom error pages, then configure your web

server to use them.

0

Default Documents

If you've ever created a website, you may have found that if you

have an "index" file (index.html for example), you don't need to specify the name of the file. For example, the following URLs both load the same page:

1. http://www.quackit.com/html/tutorial

2. http://www.quackit.com/html/tutorial/index.cfm

In this example, "index.cfm" is the default document. You can configure your web server so that any file name can be the default document. For example, you could configure your web server to use "index.cfm" in the event no filename has been specified, or if you use PHP, "index.php". You could even specify different default documents for different directories if you like. 2

SSL Certificates

Apache HTTP Server

Apache HTTP Server (also referred to as simply "Apache")

has, at the time of writing, been the most popular web server

on the web since 1996. Apache is developed and maintained

by the Apache Software Foundation, which consists of a

decentralized team of developers. The software is produced

under the Apache licence, which makes it free and open

source. Apache is available for a range of operating systems,

including Unix, Linux, Novell Netware, Windows, Mac OS

X, Solaris, and FreeBSD. Apache HTTP Server website:

http://httpd.apache.org 21

Microsoft Internet Information Services (IIS)

IIS is, at the time of writing, the second most popular web

server on the web. It is however, gaining market share, and if

the current trend continues, it won't be long before it

overtakes Apache. IIS comes as an optional component of

most Windows operating systems. You can install IIS by using

Add/Remove Windows Components from Add or Remove Programs in

the Control Panel. Microsoft IIS website:

http://www.microsoft.com/iis

Sun Java System Web Server

Based on the Sun One Web Server, the Sun Java System Web

Server is designed for medium to large business applications.

Sun Java System Web Server is available for most operating

systems. Sun Java System Web Server website:

http://www.sun.com/software/products/web_srvr/home

_web_srvr.xml 22

HTTP Headers

HTTP Headers in HTTP Requests

Some of the most common HTTP headers found in HTTP

requests.

Host An HTTP Request is sent to a specific IP Addresses. But since most servers are capable of hosting multiple websites under the same

IP, they must know which domain name the browser is looking for.

1. Host: net.tutsplus.com

This is basically the host name, including the domain and the subdomain.

User-Agent

1. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)

This header can carry several pieces of information such as:

Browser name and version.

Operating System name and version.

Default language.

This is how websites can collect certain general information about their surfers‟ systems. For example, they can detect if the surfer is using a cell phone browser and redirect them to a mobile version of their website which works better with low resolutions.

Accept-Language

1. Accept-Language: en-us,en;q=0.5

23

This header displays the default language setting of the user. If a website has different language versions, it can redirect a new surfer based on this data. It can carry multiple languages, separated by commas. The first one is the preferred language, and each other listed language can carry a “q” value, which is an estimate of the user‟s preference for the language (min. 0 max. 1).

Accept-Encoding 1. Accept-Encoding: gzip,deflate

Most modern browsers support gzip, and will send this in the header. The web server then can send the HTML output in a compressed format. This can reduce the size by up to 80% to save bandwidth and time.

If-Modified-Since

If a web document is already cached in your browser, and you visit it again, your browser can check if the document has been updated by sending this:

1. If-Modified-Since: Sat, 28 Nov 2009 06:38:19 GMT

If it was not modified since that date, the server will send a “304 Not Modified” response code, and no content – and the browser will load the content from the cache.

Cookie

As the name suggests, this sends the cookies stored in your browser for that domain.

1. Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120; foo=bar

These are name=value pairs separated by semicolons. Cookies can also contain the session id. 24

Referer

As the name suggests, this HTTP header contains the referring url. For example, if I visit the Nettuts+ homepage, and click on an article link, this header is sent to my browser:

1. Referer: http://net.tutsplus.com/

Authorization When a web page asks for authorization, the browser opens a login window. When you enter a username and

password in this window, the browser sends another HTTP request, but this time it contains this header.

1. Authorization: Basic bXl1c2VyOm15cGFzcw==

The data inside the header is base64 encoded. For example, base64_decode(„bXl1c2VyOm15cGFzcw==‟) would return „myuser:mypass‟

HTTP Headers in HTTP Responses

Some of the most common HTTP headers found in HTTP responses.

Cache-Control

Definition from w3.org: “The Cache-Control general-header field is used to specify directives which MUST be obeyed by all caching mechanisms along the request/response chain.” These “caching mechanisms” include gateways and proxies that your ISP may be using. Example:

1. Cache-Control: max-age=3600, public

“public” means that the response may be cached by anyone. “max-age” indicates how many seconds the cache is valid for. Allowing your website to be cached can reduce server load and bandwidth, and also improve load times at the browser. 25

Caching can also be prevented by using the “no-cache” directive.

1. Cache-Control: no-cache

Content-Type This header indicates the “mime-type” of the document. The browser then decides how

to interpret the contents based on this. For example, an html page (or a PHP script with html output) may return this:

1. Content-Type: text/html; charset=UTF-8

“text” is the type and “html” is the subtype of the document. The header can also contain more info such as charset. For a gif image, this may be sent.

1. Content-Type: image/gif

The browser can decide to use an external application or browser extension based on the mime-type. For example this will cause the Adobe Reader to be loaded:

1. Content-Type: application/pdf

When loading directly, Apache can usually detect the mime-type of a document and send the appropriate header. Also most browsers have some amount fault tolerance and auto-detection of the mime-types, in case the headers are wrong or not present.

Content-Disposition This header instructs the browser to open a file download box, instead of trying to parse the content. Example:

1. Content-Disposition: attachment; filename="download.zip"

That will cause the browser to do this: 26

Note that the appropriate Content-Type header should also be sent along with this:

1. Content-Type: application/zip

2. Content-Disposition: attachment; filename="download.zip"

Content-Length

When content is going to be transmitted to the browser, the server can indicate the size of it (in bytes) using this header.

1. Content-Length: 89123

This is especially useful for file downloads. That‟s how the browser can determine the progress of the download.

The result is: 27

Now I am going to comment out the Content-Length header

Now the result is: The browser can only tell you how many bytes have been downloaded, but it does not know the total amount. And the progress bar is not showing the progress.

Last-Modified

As the name suggests, this header indicates the last modify date of the document, in GMT format: 28

1. Last-Modified: Sat, 28 Nov 2009 03:50:37 GMT

It offers another way for the browser to cache a document. The browser may send this in the HTTP request:

1. If-Modified-Since: Sat, 28 Nov 2009 06:38:19 GMT

We already talked about this earlier in the "If-Modified-Since" section.

Location This header is used for redirections. If the response code is 301 or 302, the server must also send

this header. For example, when you go to some URL your browser will receive this:

1. HTTP/1.x 301 Moved Permanently

2. ...

3. Location: http://net.tutsplus.com/

4. ...

Set-Cookie

When a website wants to set or update a cookie in your browser, it will use this header.

1. Set- Cookie: skin=noskin; path=/; domain=.amazon.com; expires=Sun, 29-Nov-2009 21:42:28 GMT

2. Set-Cookie: session-id=120-7333518-8165026; path=/; domain=.amazon.com; expires=Sat Feb 27 08:00:00 2010 GMT

Each cookie is sent as a separate header. Note that the cookies set via JavaScript do not go through HTTP headers.

If the expiration date is not specified, the cookie is deleted when the browser window is closed. 29

WWW-Authenticate A website may send this header to authenticate a user

through HTTP. When the browser sees this header, it will open up a login dialogue window.

1. WWW-Authenticate: Basic realm="Restricted Area"

Which looks like this:

Content-Encoding

This header is usually set when the returned content is compressed.

1. Content-Encoding: gzip

30

Topic 4

A Beginners Session to Ajax

Asynchronous client calls to the server. A “Post

Back” free environment.

What To Expect From This Session

Basics of Ajax

BIG picture of how Ajax works

Code samples

What is Ajax?

Asynchronous Javascript And XML

Asynchronous server roundtrips without posting back

and no browser “flickering”.

Javascript JavaScript communicates with the server

XML

Transfering Data

What is so cool about Ajax?

Connection between client side script and server side script.

Better user experience

More flexibility

More options

How does Ajax work?

A client script asynchronously calls a server side function.

Classic VS Ajax

How does AJAX work?

*XML REFRESH DOM

Ajax In the Real World

Windows Live Local

Windows Live Mail (Hotmail Beta)

Google Maps

Google Suggest

Scenario

Car Classifieds website has a dropdown with the makes of all

the cars. Based on the selection of the “makes” dropdown the

“models” dropdown has to be populated with the correct

models provided by the manufacturer.

Script.html

DOM

Everything is object

XML WITH DOM

HTTP REQUEST

Now what is HTTP request? Whenever a page is

downloaded, all the components of the page like images,

stylesheets, scripts, flash etc. are downloaded. More the

number of components more the number of http requests to

the server to download each component and hence slower

the site speed

The XMLHttpRequest Object

The XMLHttpRequest Object

XMLHttpRequest is a JavaScript object that was designed by Microsoft and adopted by Mozilla, Apple, and Google. It's now being standardized in the W3C. It provides an easy way to retrieve data at a URL. Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).

To create an instance of XMLHttpRequest, simply do this:

The JavaScript object that takes care of making (asynchronous) HTTP calls

The XMLHttpRequest object is used to exchange data with a server behind the scenes.

Update a web page without reloading the page

Request data from a server after the page has loaded

Receive data from a server after the page has loaded

Send data to a server in the background

To learn more about the

XMLHttpRequest object, study our XML DOM tutorial.

XMLHttpRequest Example

XMLHttpRequest Methods abort() getAllResponseHeaders() getResponseHeader() open() overrideMimeType() send() setRequestHeader() Non-standard methods init() openRequest()

sendAsBinary() Notes

Script Manager

This is an essential control we must use in our web page in

order to use the controls the Ajax Control Toolkit includes.

The Toolkit Script Manager control doesn't have any visual

The ScriptManager control manages client script for AJAX-

enabled ASP.NET Web pages.

Update Progress The UpdateProgress control enables us to provide feedback

about the progress of the partial page rendering. Please note that

for initial page rendering, UpdateProgress control content is not

displayed. UpdateProgress control is not an independent control

it must be associated with an UpdatePanel control.

Timmer

Timer controls allows you to do postbacks at certain

intervals. If used together with UpdatePanels, which is the

most common approach, it allows for timed partial updates

of your page, but it can be used for posting back the entire

page as well.

Assignment

Develop a website and host it free

Discuss what will be different SSL

pages

Sesion/Cookies example

Pg1

Name

Submit

Pg2

Address

Submit

Pg3

Email id

Submit

Pg4

Designation

Submit

Answer

All

Form example

AJAX Example

Session example

How to Create a Cookie?

The "Response.Cookies" command is used to create cookies.

Note: The Response.Cookies command must appear BEFORE the <html> tag.

In the example below, we will create a cookie named "firstname" and assign the value "Alex" to it:

<%

Response.Cookies("firstname")="Alex"

%>

It is also possible to assign properties to a cookie, like setting a date when the cookie should expire:

<%

Response.Cookies("firstname")="Alex"

Response.Cookies("firstname").Expires=#May 10,2012#

%>

How to Retrieve a Cookie Value?

The "Request.Cookies" command is used to retrieve a cookie value.

Ajax html page <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataEnteryForm.aspx.cs" Inherits="DataEnteryForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Auto-fill states</title>

<link rel="stylesheet" rev="stylesheet" href="script5.css" />

<script src="script5.js" type="text/javascript">

</script>

</head>

<body>

<form action="#">

Please enter your state:<br />

<input type="text" id="searchField" autocomplete="off" /><br />

<div id="popups"> </div>

</form>

</body>

</html>

.css body, #searchField {

font: 1.2em arial, helvetica, sans-serif;

}

#popups {

position: absolute;

}

#searchField.error {

background-color: #FC0;

}

div.suggestions {

background-color: #FFF;

padding: 2px 6px;

border: 1px solid #000;

}

div.suggestions:hover {

background-color: #69F;

}

Javascript window.onload = initAll;

var xhr = false;

var statesArray = new Array();

function initAll() {

document.getElementById("searchField").onkeyup = searchSuggest;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e) { }

}

}

if (xhr) {

xhr.onreadystatechange = setStatesArray;

xhr.open("GET", "us-states.xml", true);

xhr.send(null); }

else {

alert("Sorry, but I couldn't create an XMLHttpRequest"); }}

function setStatesArray() {

if (xhr.readyState == 4) { if (xhr.status == 200) {

if (xhr.responseXML) { var allStates =

xhr.responseXML.getElementsByTagName("item");

for (var i = 0; i < allStates.length; i++) { statesArray[i] =

allStates[i].getElementsByTagName("label")[0].firstChild;

} } } else {

alert("There was a problem with the request " + xhr.status) }}}

function searchSuggest() {

var str = document.getElementById("searchField").value;

document.getElementById("searchField").className = "";

if (str != "") {

document.getElementById("popups").innerHTML = "";

for (var i = 0; i < statesArray.length; i++) {

var thisState = statesArray[i].nodeValue;

if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) {

var tempDiv = document.createElement("div");

tempDiv.innerHTML = thisState;

tempDiv.onclick = makeChoice;

tempDiv.className = "suggestions";

document.getElementById("popups").appendChild(tempDiv);

} }

var foundCt = document.getElementById("popups").childNodes.length;

if (foundCt == 0) {

document.getElementById("searchField").className = "error"; }

if (foundCt == 1) {

document.getElementById("searchField").value = document.getElementById("popups").firstChild.innerHTML document.getElementById("popups").innerHTML = "“; } }}

function makeChoice(evt) {

var thisDiv = (evt) ? evt.target : window.event.srcElement;

document.getElementById("searchField").value = thisDiv.innerHTML;

document.getElementById("popups").innerHTML = "";

}