Distributed Systems Browser-Based Programming 95-702 Distibuted Systems 1Objectives • Look at the user-side of distributed systems • Introduce browser-based programming techniques • Introduce device-awareness & content adaptation 95-702 Distibuted Systems 2User-side of Distributed Systems Distributed Systems Desktop / Laptop Mobile Brower-based Joe XHTML CSS Javascript Ajax Joe XHTML CSS Javascript Ajax Native application (not today) Java Mike Android 95-702 Distibuted Systems 3Browsers • Browsers provide a powerful, standards-based (for the most part) platform for developing user applications. • With varying capabilities, they work on: – Feature phone – Smartphone – Blackberry / iPhone / Android – iPad – Netbook / Laptop – Desktop – ? 95-702 Distibuted Systems 4Outline • Core browser technologies – XHTML – CSS – Javascript • Ajax • Device awareness – User-Agent – Device Description Repositories • WURFL 95-702 Distibuted Systems 5Core browser technologies • Structure – XHTML • Presentation – CSS • Behavior – Javascript 95-702 Distibuted Systems 6 Mostly outside the scope of this course We will focus on the communication aspects AjaxHTML, CSS, Javascript • These are outside the scope of this course, but necessary for scripting browser-based user interfaces. • If you don’t have some prior experience with HTML and CSS, you should familiarize yourself. • As an IT professional, these are well within your grasp. • You will regularly be expected to pick up new languages, platforms, frameworks, and architectures in your work. • If a question / answer / primer session would be worthwhile, we could arrange one outside of class. 95-702 Distibuted Systems 7Resources • Here are a few good video introductions – HTML & CSS – The VERY Basics • http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/ – Google: HTML, CSS, and Javascript from the Ground Up • http://code.google.com/edu/submissions/html-css-javascript/ – Douglas Crockford videos • http://video.yahoo.com/watch/111593/1710507 • And a few cheatsheets: – HTML: http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ – CSS: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ – Javascript: http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/ 95-702 Distibuted Systems 8Ajax • What is Ajax? – Shorthand for Asynchronous JavaScript and XML – Is a technique of designing web-based applications • What are exemplars of an Ajax approach? – Gmail – Google Maps – Others? 95-702 Distibuted Systems 9Ajax is built on • HTML/XHTML • CSS • Javascript • Document Object Model (DOM) • Event model (e.g. onMouseClick) • Web remoting (e.g. XMLHttpRequest) 95-702 Distibuted Systems 10Some Ajax Patterns • Dynamically update page elements • Dynamically restructure page layout • Dynamically update content from remote source • Friendly interactive interface to remote services • Responsive first-person interaction • Collaborative interaction • Streaming within a web-page context • Submission throttling • Partial completion 95-702 Distibuted Systems 11History of browser / server interaction • Static web page – User / Browser / web server • Dynamic web page / web application – User / Browser / web server / CGI – CGI may be PHP, Ruby, Java/JEE, etc. • Ajax-style web application – User / Event Handler / Response Handler / web app 95-702 Distibuted Systems 12Browser – server communication • Key to the Ajax style communication is communication between a browser and a server within the context of a page – I.e. without a new page load – Avoiding “click and wait” • XMLHttpRequest is the primary means of facilitating this communication • All modern browsers have a built-in XMLHttpRequest object. – E.g. IE7+, Firefox, Chrome, Safari, Opera… 13 95-702 Distibuted SystemsXMLHttpRequest basics • Get a new XMLHttpRequest • Open it – Blocking, or non-blocking • Send a request • Process the response 14 95-702 Distibuted SystemsNew • xhr = new XMLHttpRequest(); 15 95-702 Distibuted SystemsXMLHttpRequest open parameters • 1st : http request method (text string) – i.e. get, post (most often) – Also head, put , delete, options • 2nd: URL of HTTP request (text string) – Typically restricted to be on the same server:port • 3rd: is the request asynchronous (boolean) – True means a send will not block (asynchronous) – False means a send will block (synchronous) 16 95-702 Distibuted SystemsSynchronous • If synchronous – Send… • Will block until response fully received – Check if response.status == 200 // OK – Use results 17 95-702 Distibuted SystemsAsynchronous XMLHttpRequest • If non-blocking (asynchronous) • xhr.readyState values 0. Object has been constructed 1. Open method successful • headers can now be set • send can now be done 2. Response headers have been received 3. Response body is being received (in progress) 4. Response complete (or something went wrong) 18 95-702 Distibuted SystemsAsynchronous • If asynchronous – Send… – In onreadystatechange handler • If (request.readyState == 4) • // response ready – Check if response.status == 200 – Use results 19 95-702 Distibuted SystemsXMLHttpRequest send parameters • GET – Put parameters on the URL query string – open("GET", "http://localhost/ajax/test.aspx?param1=x¶m2=y", true) ; – send(null); • POST – Put parameters as arguments to send – open("POST", "http://localhost/ajax/test.aspx", true); – send("param1=x¶m2=y"); 20 95-702 Distibuted SystemsUse the results • Text – The results can be treated as text – responseText • XML – Or, if the response is valid XML, it can be treated as such – responseXML will be a DOM document object 21 95-702 Distibuted SystemsSimplest example http://www.andrew.cmu.edu/course/95-702/examples/ajax/eg1.html http://www.andrew.cmu.edu/course/95-702/examples/ajax/data.txt <head>!<script>!function doXMLHttpRequest() { ! xhr = new XMLHttpRequest(); ! xhr.open("GET",
View Full Document
Unlocking...