web architecture. traditionally client-server but web2.0 is more distributed (cloud) hypertext...
TRANSCRIPT
![Page 1: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/1.jpg)
Web Architecture
![Page 2: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/2.jpg)
• Traditionally client-server but web2.0 is more distributed (cloud)
• Hypertext Transfer Protocol (HTTP) over TCP/IP
![Page 3: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/3.jpg)
How I get my page on a client?
1. Parsing the URL2. Sending the request33 Server responses
![Page 4: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/4.jpg)
status
![Page 5: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/5.jpg)
The response header fields1. Location: This tells the user agent where the resource it requested can
be found. The value is just the URL of the new resource.2. Server: This tells the user agent which web server is used. Nearly all web
servers return this header, although some leave it out.3. Content-length: This gives the size of the resource, in bytes.4. Content-type: This describes the file format of the resource.5. Content-encoding: This means that the resource has been coded in some
way and must be decoded before use.6. Expires: This field can be set for data that are updated at a known time
(for instance if they are generated by a script). It is used to prevent browsers from caching the resource beyond the given date.
7. Last-modified: This tells the browser when the resource was last modified. Can be useful for mirroring, update notification etc.
![Page 6: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/6.jpg)
At the client’s browser
http
Character encoding
Fonts, Colors
![Page 7: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/7.jpg)
Cascaded Style Sheets
• Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics .
• A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
• A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
• Selectors are used to declare which part of the markup a style is to be applied
• See Example
![Page 8: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/8.jpg)
Html code with Java Script<html>
<head><title>This is a first JavaScript example</title><script language="javascript">...</script></head>
<body>This is a first JavaScript example.</body>
</html>
![Page 9: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/9.jpg)
Document Object ModelHierarchical Objects
WindowFrame
LocationHistory
Navigatordocument
imageformtext
XMLHttpRequest ??
![Page 10: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/10.jpg)
![Page 11: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/11.jpg)
Hierarchy Objects
Object Properties Methods Event Handlers Window defaultStatus
framesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
onLoadonUnloadonBluronFocus
Frame defaultStatusframesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
none (The onLoad and onUnload event handlers belong to the Window object)
Location hashhosthostnamehrefpathnameporprotocolsearch
reloadreplace
none
![Page 12: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/12.jpg)
History lengthforwardgo
back none
Navigator appCodeNameappNameappVersionmimeTypespluginsuserAgent
javaEnabled none
document alinkColoranchorsappletsareabgColorcookiefgColorformsimageslastModifiedlinkColorlinkslocationreferrertitlevlinkColor
clearcloseopenwritewriteln
none (the onLoad and onUnload event handlers belong to the Window object.
![Page 13: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/13.jpg)
image bordercompleteheighthspacelowsrcnamesrcvspacewidth
none none
form actionelementsencodingFileUploadmethodnametarget
submitreset
onSubmitonReset
text defaultValuenametypevalue
focusblurselect
onBluronChargeonFocusonSelect
![Page 14: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/14.jpg)
Built-in Objects
ArrayData
String
![Page 15: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/15.jpg)
Built-in Objects
Object Properties Methods Event Handlers
Array length joinreversesort xx
none
Date none getDategetDaygetHoursgetMinutesgetMonthgetSecondsgetTimegetTimeZoneoffsetgetYearparseprototypesetDatesetHourssetMinutessetMonthsetSecondssetTimesetYeartoGMTStringtoLocaleStringUTC
none
![Page 16: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/16.jpg)
String lengthprototype
anchorbigblinkboldcharAtfixedfontColorfontSizeindexOfitalicslastIndexOflinksmallsplitstrikesubsubstringsuptoLowerCasetoUpperCase
Window
![Page 17: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/17.jpg)
Opening XMLRequest Object
• open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
• XMLHttpRequestObject.open(“GET”, datasource);
![Page 18: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/18.jpg)
A in ajax stands for asynchronous• handshaking
function getData(dataSource, divID){if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = callback()
}}
function callback(){...}
![Page 19: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/19.jpg)
Shortcut for callback()function getData(dataSource, divID)
{if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = function(){
.
.
.}
}}
![Page 20: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/20.jpg)
![Page 21: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/21.jpg)
ajax
![Page 22: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/22.jpg)
ajax
–Asynchronous JavaScript and XML–Umbrella term for technologies that often:
•Use client-side scripting for layout and formatting•Use less than full page reloads to change content•Use data formats other than HTML•Interact asynchronously with the server
–Not necessarily JavaScript or XML, but we’ll use the term for convenience
![Page 23: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/23.jpg)
MySpaceTraffic
Request:GET http://profile.myspace.com:80/index.cfm?fuseaction=user.viewprofile&friendid=32732620&MyToken=fcf392cd-2a35-4cc2-86fa-cb24b7a330dd HTTP/1.0
Response:
<!---*** WEBPROFILE045 *** ---><html><head><title>www.myspace.com/oskibear</title><meta name="keywords" content="friends networking sharing photos finding friends blogsjournals bloggingjournaling bands music rate picsjoin groups forums classifieds online social networking" /><meta name="description" content="MySpaceProfile -Oski, 64 years old, Male, Berkeley, CALIFORNIA, US, Grrrrrrah!" /><meta http-equiv="expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><link rel="STYLESHEET" type="text/css" href="http://x.myspace.com/js/myspace.css" /><script language="JavaScript">randomseed= Date.parse(newDate());</script><script language="JavaScript" type="text/javascript" src="http://x.myspace.com/js/myspaceJS011.js"></script><BASE HREF="http://www.myspace.com/" TARGET="_self"></BASE></head><body bgcolor="e5e5e5" alink="4e607b" link="4e607b" vlink="4e607b" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" style="visibility:visible; display:block">….…………
![Page 24: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/24.jpg)
Google Maps Traffic
Request:GET http://maps.google.com:80/maps?
spn=0.001247,0.002427&z=19&t=k&vp=37.871279,-122.251825&ev=ziHTTP/1.0
Response:GAddCopyright("k","483",37.4855,-122.6324,38.1363,
-122.2355,12,"");GAddCopyright("k","484",37.4825,-122.2761,38.1346,
-121.8590,12,"");
![Page 25: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/25.jpg)
![Page 26: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/26.jpg)
Ajax in 5 steps
![Page 27: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/27.jpg)
![Page 28: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/28.jpg)
![Page 29: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/29.jpg)
![Page 30: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/30.jpg)
![Page 31: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/31.jpg)
ajax History
•Before there was browser support for asynchronous calls:–There were hidden <IFrame>
•IFramestraditionally used to dynamically •IFrameset to 0px, invisible to the user•Used to GET/POST form fields to the server
•Example:<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="http://www.badguy.com/" frameBorder="0“ scrolling="no"><form action=‘evil.cgi' method='POST'><input type='text' name='field1' value='foo'><input type='text' name='field2' value='bar'> </form></iframe>
![Page 32: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/32.jpg)
Real ajax Started with…–XMLHttpRequestObject (often called XHR)•In Internet Explorer, XMLHttpobject, part of MSXML
–ActiveX object, vsnative object in Firefox–Will be implemented as a native object in IE 71
•Instantiation: if (window.XMLHttpRequest){// If IE7, Mozilla, Safari, etc: Use native objectvarxmlHttp= new XMLHttpRequest()}else {if (window.ActiveXObject){// ...otherwise, use the ActiveX control for IE5.x and IE6varxmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }}
![Page 33: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/33.jpg)
• XMLHttpRequest (XHR) is a DOM API that can be used inside a web browser scripting language, such as JavaScript, to send an HTTP or an HTTPS request directly to a web server and load the server response data directly back into the scripting language.
• Once the data is within the scripting language, it is available as both an XML document, if the response was valid XML markup, and as plain text.
![Page 34: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/34.jpg)
Example AJAX requestxmlHttp= new XMLHttpRequest();xmlHttp.open("GET", “http://www.example.com”);xmlHttp.onreadystatechange= updatePage;xmlHttp.send(null);
Example AJAX response handlingfunction updatePage() {
if (xmlHttp.readyState== 4) {if (request.status== 200) {varresponse = xmlHttp.responseText;
}}
}
![Page 35: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/35.jpg)
Downstream Options•The real beauty of XHR
–Arbitrary structure of content•Not restricted like HTML Forms
–Asynchronous Communication, including callbacks•XHR can handle many types of downstream (from
server) data–XML–Full JavaScript–JavaScript Arrays–JSON–Custom Serialization Frameworks
•Atlas•Google Web Toolkit
![Page 36: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/36.jpg)
![Page 37: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/37.jpg)
![Page 38: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/38.jpg)
![Page 39: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/39.jpg)
![Page 40: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/40.jpg)
![Page 41: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/41.jpg)
![Page 42: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/42.jpg)
![Page 43: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/43.jpg)
![Page 44: Web Architecture. Traditionally client-server but web2.0 is more distributed (cloud) Hypertext Transfer Protocol (HTTP) over TCP/IP](https://reader033.vdocuments.mx/reader033/viewer/2022051401/5697bf7b1a28abf838c838af/html5/thumbnails/44.jpg)
• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting withobjects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use