DOC PREVIEW
Princeton COS 333 - Web 2.0

This preview shows page 1-2-3 out of 8 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 8 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 8 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 8 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 8 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

"Web 2.0"• buzzword – probably originated with O'Reilly conference in 9/05• what's different from "Web 1.0"?– [technical aspects, not business]• Web as platform; cloud computing– systems as services, not on a PC, e.g., Google Docs• continuous software update– because it's on the server• data as central component– e.g., Amazon, Google, Yahoo, Facebook, Flickr, ...• lightweight programming & data transfer– Atom, REST instead of SOAP– JSON instead of XML• mashups using APIs– Google maps, Yahoo pipes, • "collective intelligence" (?)– Wikipedia, Google page rank, online reviews, blogs, crowd-sourcing, Twitter, ... XMLHttpRequest ("XHR")• interactions between client and server are usually synchronous– there can be significant delay– page has to be completely redrawn• XMLHttpRequest provides asynchronous communication with server– often no visible delay– page does not have to be completely redrawn• first widespread use in Google Suggest, Maps, Gmail (Feb 2005)– "The real importance of Google's map and satellite program, however, is not its impressive exterior but the novel technology, known as Ajax, that lies beneath." (James Fallows, NY Times, 4/17/05)• Ajax: Asynchronous Javascript + XML(shorthand/marketing/buzzword term coined 2/05)– (X)HTML + CSS for presentation–DOM for changing display– Javascript to implement client actions– XML for data exchange with server (but it doesn't have to use XML)– "server agnostic": server can use any technologyAjax interface to Princeton directory<h1> unPhonebook</h1><form name=phone>Type here: <input type="text" id="pat" onkeyup='geturl(pat.value);' ></form><pre id="place"></pre>Basic structure of Ajax codevar req;function geturl(s) {if (s.length > 1) {url = 'http://www.cs.princeton.edu/~bwk/phone3.cgi?' + s;loadXMLDoc(url); // loads asynchronously}}function loadXMLDoc(url) {if (window.XMLHttpRequest) { // native XMLHttpRequesreq = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE ActiveXreq = new ActiveXObject("Microsoft.XMLHTTP");}if (req) {req.onreadystatechange = processReqChange;req.open("GET", url);req.send(null);}} function processReqChange() {if (req.readyState == 4) { // completed requestif (req.status == 200)show(req.responseText); // or responseXML}}function show(s) { // show whatever came backdocument.getElementById("place").innerHTML = s}Server script (phone2.cgi)q1=`echo $QUERY_STRING | gawk '{split($0,x,"%20"); print x[1]}' `q2=`echo $QUERY_STRING | gawk '{split($0,x,"%20"); print x[2]}' `/usr/local/bin/ldapsearch -x -h ldap.princeton.edu -u -b \o='Princeton University,c=US' "(cn=*$q1*)" uid cn telephoneNumber \studenttelephoneNumber studentstreet street ou |php -r 'while (!feof(STDIN)) {$d = (fgets(STDIN));if (preg_match("/^#/", $d)) continue;if (preg_match("/^dn:|^ufn:/", $d)) continue;if (preg_match("/^cn:/", $d))if (strlen($d) > strlen($cn)) $cn = $d;if (preg_match("/telephoneNumber|street/", $d))$out = $out . " " . trim($d);if (preg_match("/^ou:/", $d)) $out = $out . " " . trim($d);if (strlen(trim($d))==0 && strlen($cn . $out) > 0) {$out = trim($cn) . " " . $out;$out = preg_replace("/Undergraduate Class of/", "", $out);$out = preg_replace("/cn:|ou:|telephoneNumber:|(student)?street:/"$out = preg_replace("/@Princeton.EDU/", "", $out);print "$out\n";$out = $cn = "";}}' | grep -i ".*$q2" | sed -e /Success/dSimpler server script (phone3.cgi)#!/bin/shPATH=.:/usr/bin:/usr/local/binecho "Content-Type: text/html"; echoq1=`echo $QUERY_STRING | gawk '{ n=split($0, x, "%20"); print x[1]}'`q2=`echo $QUERY_STRING | gawk '{ n=split($0, x, "%20"); print x[2]}'`q3=`echo $QUERY_STRING | gawk '{ n=split($0, x, "%20"); print x[3]}'`grep -i "$q1" phone.txt |grep -i ".$q2" |grep -i ".$q3" • works on precomputed data fileJavascript objects• everything in Javascript is an object– except numbers, booleans, null, undefined• create objects withvar obj = new Object();var obj = {};• objects are collections of named values– name-value pairs– essentially just associative arrays– can access elements with either syntaxobj.property = whatever;obj["property"] = whatever;• values can be anything– basic values like numbers– arrays– functions –objectsJavascript objects (2)• function literals– functions are just valuesvar max = function(a,b) { if (a>b) return a; else return b; }• object literals (initializers):var course = {dept: "cos",numbers: [109, 333],prof: {name1: "brian", name2: "kernighan",office: { bldg: "cs", room: "311" },email: "bwk"}, toString: function() {s = this.dept + this.numbers + " " + this.prof.name1 + " " + this.prof.name2 + " " + this.prof.office.bldg + this.prof.office.room+ " " + this.prof.email; return s} }Javascript objects (3)• each object has a prototype property that is used to make new instances• changing the prototype affects all subsequent onesfunction Point(x,y) {this.x = x; this.y = y;}Point.prototype.dist = function(that) {var dx = this.x - that.x;var dy = this.y - that.y;return Math.sqrt(dx*dx+dy*dy);}Point.prototype.toString = function() {return '(' + this.x + "," + this.y + ')';}Point.ORIGIN = new Point(0,0);var p = new Point(3,4);var d = p.dist(Point.ORIGIN);var msg = "Dist to " + p + " is " + d;JSON : Javascript Object Notation• lightweight data interchange format– based on object literals– an alternative to XML– maps easily to most other languages• two basic structures– object: unordered collection of name-value pairsjust an associative array or hash table{ string: value, string, value, ... }– array: ordered collection of values[ value, value, ... ]– string is "..."– value is string, number, true, false, object or array • Javascript eval function can convert this into a data structure:var obj = eval(json_string) # bad idea!– this is potentially unsafe, since the string can contain more than just JSON• see json.orgYAMLLibraries, API's, Frameworks• browsers are not perfectly standardized• DOM and CSS coding is messy and complicated • web services are ever more complex• how do we make it easy to create applications?• libraries of common Javascript operations• API's, often Javascript, to access services• frameworks: development environments for integrated client & server programmingFrom developer.yahoo.comYAHOO.util.Connect =


View Full Document

Princeton COS 333 - Web 2.0

Download Web 2.0
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Web 2.0 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Web 2.0 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?