web architecture. traditionally client-server but web2.0 is more distributed (cloud) hypertext...
TRANSCRIPT
Web Architecture
• Traditionally client-server but web2.0 is more distributed (cloud)
• Hypertext Transfer Protocol (HTTP) over TCP/IP
How I get my page on a client?
1. Parsing the URL2. Sending the request33 Server responses
status
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.
At the client’s browser
http
Character encoding
Fonts, Colors
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
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>
Document Object ModelHierarchical Objects
WindowFrame
LocationHistory
Navigatordocument
imageformtext
XMLHttpRequest ??
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
History lengthforwardgo
back none
Navigator appCodeNameappNameappVersionmimeTypespluginsuserAgent
javaEnabled none
document alinkColoranchorsappletsareabgColorcookiefgColorformsimageslastModifiedlinkColorlinkslocationreferrertitlevlinkColor
clearcloseopenwritewriteln
none (the onLoad and onUnload event handlers belong to the Window object.
image bordercompleteheighthspacelowsrcnamesrcvspacewidth
none none
form actionelementsencodingFileUploadmethodnametarget
submitreset
onSubmitonReset
text defaultValuenametypevalue
focusblurselect
onBluronChargeonFocusonSelect
Built-in Objects
ArrayData
String
Built-in Objects
Object Properties Methods Event Handlers
Array length joinreversesort xx
none
Date none getDategetDaygetHoursgetMinutesgetMonthgetSecondsgetTimegetTimeZoneoffsetgetYearparseprototypesetDatesetHourssetMinutessetMonthsetSecondssetTimesetYeartoGMTStringtoLocaleStringUTC
none
String lengthprototype
anchorbigblinkboldcharAtfixedfontColorfontSizeindexOfitalicslastIndexOflinksmallsplitstrikesubsubstringsuptoLowerCasetoUpperCase
Window
Opening XMLRequest Object
• open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
• XMLHttpRequestObject.open(“GET”, datasource);
A in ajax stands for asynchronous• handshaking
function getData(dataSource, divID){if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = callback()
}}
function callback(){...}
Shortcut for callback()function getData(dataSource, divID)
{if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = function(){
.
.
.}
}}
ajax
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
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">….…………
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,"");
Ajax in 5 steps
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>
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"); }}
• 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.
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;
}}
}
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
• 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