web architecture for mca, java etc
TRANSCRIPT
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 = "";
}