95-733 Internet TechnologiesCourse Web SitePrerequisitesSpecific TechnologiesStructure of the CourseReadingsGradingSome Suggested Topics For Student Assigned HomeworkRich Internet ApplicationsRIA Using AjaxAJAXBefore We StartPowerPoint PresentationTypical Ajax(1)Typical Ajax(2)Typical Ajax(3)Typical Ajax(4)The XMLHttpRequest Object as Described by W3CW3C Example 1Slide 20W3C Example 2W3C Example 3State and State ChangeTypical InteractionA Complete Example From IBMMain Features of Index.jsp (1)Main Features of Index.jsp (2)Main Features of Index.jsp (3)Main Features of Index.jsp (4)Main Features of Index.jsp (5)Main Features of Item.javaMain Features of Catalog.java(1)Main Features of Catalog.java(2)Main Features of Cart.java(1)Main Features of Cart.java(2)Main Features of Cart.java(3)Main Features of CartServlet.java(1)Main Features of CartServlet.java(2)Main Features of CartServlet.java(3)Main Features Axis1.js (1)Main Features Axis1.js (2)Main Features Axis1.js (3)Main Features Axis1.js (4)Main Features Cart.js (1)Main Features Cart.js (2)Main Features Cart.js (3)Shopping Cart InteractionMain Features Cart.js (4)Another Example From Sebesta Chapter 10Index.jsp Main FeaturesJavascript Main FeaturesTwo Servlets - One for AJAXAnother For the FormXML Or JSON ? (1)XML Or JSON ? (2)Which To Use?Slide 57Some Popular ToolkitsjQuery AJAX ExampleDojo Ajax Example95-733 Internet Technologies1Master of Information System Management95-733 Internet TechnologiesLecture 1: Introduction95-733 Internet Technologies2Master of Information System ManagementCourse Web Site•http://www.andrew.cmu.edu/~mm695-733 Internet Technologies3Master of Information System ManagementPrerequisites•The ability to program in Java •Enthusiasm for programming •Interested in web technologies95-733 Internet Technologies4Master of Information System Management Specific Technologies•Netbeans and Glassfish•JavaScript, Servlets and Java Server Pages•XML (various languages)•AJAX •Mashups •Freebase•Ruby•Frameworks – Ruby on Rails•Grammars - DTD’s, XSDL, JSON Schema•XML Transformation - XSLT•Semantic Web – OWL, RDF, Protégé, Jena95-733 Internet Technologies5Master of Information System ManagementStructure of the Course•Lectures / class participation•Demonstrations•Homework (programming) •Midterm •Final examination95-733 Internet Technologies6Master of Information System ManagementReadings•Readings from the required text are assigned for each lecture -- read them in advance•Readings from the web also assigned•For this week read “Programming the World Wide Web”, 7th ed. Chapters 1, 2 and 3. Especially chapter 3 on CSS.•For next week read “Programming the World Wide Web”, 7th ed. chapters 4, 5 and 10.•Chapters 4 and 5 are on JavaScript•Chapter 10 covers AJAX. •Read the article by Philip McCarthy of IBM on AJAX95-733 Internet Technologies7Master of Information System ManagementGrading•Homework/Programming (3-5) 50%•One of the homework problems is designed by the student. A presentation and demonstration is required. See me soon about your topic. •For the student designed homework, small groups are permitted. Each student presents for the same number of minutes.•Midterm 10%•Final Exam 40%95-733 Internet TechnologiesSome Suggested Topics For Student Assigned Homework•Explore one of the many XML languages in more detail than we do in class.•Discuss and demonstrate an HTML5 element (audio, video, time, canvas).•HTML5 document structure •HTML5 Local storage.•Flash, PhoneGap, GWT, Jquery, etc…•SOFEA•Many other options exist. See the schedule for projects from previous terms..8Master of Information System Management95-733 Internet Technologies9Master of Information System ManagementRich Internet Applications •The traditional web employed thin clients.•In RIA, the browser is extended by downloaded code.•With AJAX, the downloaded code interacts with the server asynchronously. The client does not block.•This makes for a more responsive user experience.95-733 Internet Technologies10Master of Information System ManagementRIA Using AjaxAsynchronous Java Script and XML• Why bother? - Everyone loves the browser but communication with the server is coarse-grained. A full page reload interrupts the interaction flow. •Example Applications: (Web 2.0) - Google Maps runs in a browser but behaves like an application. - Flikr photo sharing, Google Maps, Blackboard, etc.. use AJAX.95-733 Internet TechnologiesAJAX•Typically uses JavaScript or VBScript on the client side. •The server side might be in any language, e.g., PHP, ASP.NET, or Java.•Any XML document or text may be returned to the caller. Simple text, JavaScript Object Notation (JSON) or XML is common.•Client-side Javascript libraries like Dojo or Prototype or Jquery may be used.•Frameworks (RoR, JSF, etc.,) support Ajax.•Normally, requests may only go back to the originating server.•However, mashups (combining diverse site output) may still be constructed by having the originating server make calls to other servers.•Client side mashups may also be built with a dynamic <script> tag.•Ajax is important to mobile phones. JSON service access is easy•See www.openajax.org11Master of Information System Management95-733 Internet TechnologiesBefore We Start•A servlet is Java code that runs on the server when an HTTP request arrives.•A Java Server Page (JSP) is XHTML+ Java and is compiled to a servlet.•JavaScript is not Java and runs in the browser.•XHTML is one of many XML languages12Master of Information System Management95-733 Internet Technologies13Master of Information System ManagementThis is a UML sequence diagram.This shows a typical AJAXround trip.A solid arrowheadrepresents a synchronouscall.A stick arrowheadrepresents anasynchronoussignal.95-733 Internet Technologies14Master of Information System ManagementTypical Ajax(1)1. Javascript and HTML is delivered to the browser.2. The JavaScript code is pointed to by a <script> tag.3. The HTML defines a button that calls a function.95-733 Internet Technologies15Master of Information System ManagementTypical Ajax(2)4. Within the function (which may be passed a URL with GET data) a browser dependent request object is created with a URL (and, perhaps, GET data). 5. A handler is defined.6. The request object is told about the