the wage at Ajax will be higher than at Acme the wage at Ajax will be lower than at Acme
Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint -...
Transcript of Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint -...
![Page 1: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/1.jpg)
Ajax at HBS
David LiebermanApplication Software ArchitectEducational Technologies GroupHarvard Business [email protected]
![Page 2: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/2.jpg)
Why bother?
• Performance gain?
• Simpler code?
• Better, more intuitive UI
• Rising user expectations!
![Page 3: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/3.jpg)
What does AJAX mean, anyway?
• Asynchronous JavaScript And XML
![Page 4: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/4.jpg)
What does AJAX mean, anyway?
• Asynchronous JavaScript And XML
![Page 5: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/5.jpg)
What does AJAX mean, anyway?
• Asynchronous JavaScript And XML• Just plain “Ajax,” thank you.
![Page 6: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/6.jpg)
My Goals for Ajax
• Take the protocol out of the equation
![Page 7: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/7.jpg)
My Goals for Ajax
• Take the protocol out of the equation– Put data exchange in the foreground
![Page 8: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/8.jpg)
My Goals for Ajax
• Take the protocol out of the equation– Put data exchange in the foreground– If I have to write
request.getParameter(“…”)I’m not interested …
![Page 9: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/9.jpg)
My Goals for Ajax
• Take the protocol out of the equation– Put data exchange in the foreground– If I have to write
request.getParameter(“…”)I’m not interested …
• So: XML in, XML out
![Page 10: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/10.jpg)
My Goals for Ajax
• Take the protocol out of the equation– Put data exchange in the foreground– If I have to write
request.getParameter(“…”)I’m not interested …
• So: XML in, XML out• Show me the framework!
– Struts?
![Page 11: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/11.jpg)
XMLHttpRequest properties
• responseText [String]
Raw response text• responseXML [XML Object]
If response text is well-formed XML
• readyState [Integer]
• status [Integer = the HttpResponse code]
![Page 12: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/12.jpg)
XMLHttpRequest methods
• open([String] method,[String] url,
[boolean] asynchronous)
• send([String] arg)
![Page 13: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/13.jpg)
XMLHttpRequest event
• onReadyStateChange
![Page 14: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/14.jpg)
XMLHttpRequest
Set up method variables
function get(url, callback) {
var ajaxrequest;
var ajaxresponse;
. . .
}
![Page 15: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/15.jpg)
XMLHttpRequest
Bind the request callback method
function get(url, callback) {
. . .
function bindRequestChange() {
if (ajaxrequest.readyState == 4) {
if (ajaxrequest.status == 200) {
ajaxresult = ajaxrequest.responseXML;
eval(callback + "(ajaxresult)");
} else {
alert("There was a problem retrieving the XML data: \n" + ajaxresult.statusText);
}
}
}
}
![Page 16: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/16.jpg)
XMLHttpRequest
Instantiate the XMLHttpRequest object
function get {. . .
if (window.XMLHttpRequest) {ajaxrequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {ajaxrequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (ajaxrequest) {ajaxrequest.onreadystatechange = bindRequestChange;ajaxrequest.open("GET", url, true);ajaxrequest.send(null);
}}
![Page 17: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/17.jpg)
Three Implementations at HBS
• Application Access Admin
• Tutorial Platform Authoring
• Videotools Portal Admin
• Controlled environments with small user communities
![Page 18: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/18.jpg)
Application Access Admin
• Utility for controlling access to applications or application modules based on group membership
• Ajax feature:– Auto-populating roles selector
![Page 19: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/19.jpg)
Tutorials Platform Authoring
• Tutorials Platform: exposes Flash content to end-users delivered via XML (Ajax competitor alert!)
• Authoring environment: assembling these tutorials element-by-element
• Ajax features:– Metadata– Tree sorting– Rich text editor
![Page 20: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/20.jpg)
Gotchas
• Support!
• Google we are not.
• The Javascript DOM API: more like JAXP than JDOM (cfJDOM + JXPath)
• Safari!
![Page 21: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/21.jpg)
Videotools Portal Admin
• Portal: a stylized, sorted collection of video assets targeted to a specific user community
• Admin requires: sorting, labeling, refreshing, creating RSS feeds.
• Out with XML, in with JSON!
![Page 22: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/22.jpg)
Coming (maybe) to a browser near you …
• Ajax Push– AKA “Reverse Ajax”– AKA “Comet”
![Page 23: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/23.jpg)
JavaScript Libraries
• Scriptaculoushttp://script.aculo.us/
• Prototypehttp://prototype.conio.net/
• Yahoo! UI Libraryhttp://developer.yahoo.com/yui/
• Zimbra Toolkithttp://www.zimbra.com/community/ajaxtk_download.html
• Dojo http://dojotoolkit.org/
• DWR http://getahead.org/dwr/getstarted
![Page 24: Ajax at HBS - Harvard Universitycscie259/distribution/lectures/12/... · Microsoft PowerPoint - AJAX at HBS.ppt [Read-Only] Created Date: 5/3/2007 11:39:03 AM ...](https://reader034.fdocuments.us/reader034/viewer/2022050406/5f83de0ea4053e2183765189/html5/thumbnails/24.jpg)
Other Resources
• http://www.jdom.org
• http://jakarta.apache.org/commons/jxpath/
• http://www.json.org
• http://www.ajaxian.com