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 URL 2.Sending the request 3.  Server responses

status

The response header fields 1.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 htmlCSSDOM Java script (AJAX) 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 This is a first JavaScript example. This is a first JavaScript example.

Document Object Model Hierarchical Objects Window Frame Location History Navigator document image form text XMLHttpRequest ??

Hierarchy Objects ObjectPropertiesMethodsEvent Handlers WindowdefaultStatus frames opener parent scroll self status top window alert blur close confirm focus open prompt clearTimeout setTimeout onLoad onUnload onBlur onFocus FramedefaultStatus frames opener parent scroll self status top window alert blur close confirm focus open prompt clearTimeout setTimeout none (The onLoad and onUnload event handlers belong to the Window object) Locationhash host hostname href pathname por protocol search reload replace none

Historylength forward go backnone NavigatorappCodeName appName appVersion mimeTypes plugins userAgent javaEnablednone documentalinkColor anchors applets area bgColor cookie fgColor forms images lastModified linkColor links location referrer title vlinkColor clear close open write writeln none (the onLoad and onUnload event handlers belong to the Window object.

imageborder complete height hspace lowsrc name src vspace width none formaction elements encoding FileUpload method name target submit reset onSubmit onReset textdefaultValue name type value focus blur select onBlur onCharge onFocus onSelect

Built-in Objects Array Data String

Built-in Objects ObjectPropertiesMethodsEvent Handlers Arraylengthjoin reverse sort xx none DatenonegetDate getDay getHours getMinutes getMonth getSeconds getTime getTimeZoneoffset getYear parse prototype setDate setHours setMinutes setMonth setSeconds setTime setYear toGMTString toLocaleString UTC none

Stringlength prototype anchor big blink bold charAt fixed fontColor fontSize indexOf italics lastIndexOf link small split strike sub substring sup toLowerCase toUpperCase Window

XMLHttpRequest Object Properties for Mozilla, Firefox, Netscape, Chrome PropertyDescription channelContains the channel used to perform the request. Read-only. readyStateContains the state of the request. Read- only. responseTextContains the response body as a string. Read-only. responseXMLContains the response body as XML. Read-only. statusContains the HTTP status code returned by a request. Read-only. statusTextContains the HTTP response status text. Read-only.

XMLHttpRequest Object Methods for Mozilla, Firefox, Netscape, Chrome Method overrideMimeType Description abort Aborts the HTTP request. getAllResponseHeaders Returns all the HTTP headers. getResponseHeader Returns the value of an HTTP header. openRequest Open / send / setRequestHeader Native (nonscript) method to open a request. OverrideMimeTypeOverrides the MIME type the server returns.

Ready state property

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

–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 &MyToken=fcf392cd-2a35-4cc2-86fa-cb24b7a330dd HTTP/1.0 Response: randomseed= Date.parse(newDate()); …. …

Google Maps Traffic Request: GET &z=19&t=k&vp= , &ev=ziHTTP/1.0 Response: GAddCopyright("k","483", , , , ,12,""); GAddCopyright("k","484", , , , ,12,"");

Ajax in 5 steps

ajax History Before there was browser support for asynchronous calls: –There were hidden 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=" frameBorder="0“ scrolling="no">

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 object varxmlHttp= new XMLHttpRequest() } else { if (window.ActiveXObject){ //...otherwise, use the ActiveX control for IE5.x and IE6 varxmlHttp= 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 request xmlHttp= new XMLHttpRequest(); xmlHttp.open("GET", “ xmlHttp.onreadystatechange= updatePage; xmlHttp.send(null); Example AJAX response handling function 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 docum ents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in usecross-platformlanguageobjectsHTMLXHTMLXML