1 / 60

95-733 Internet Technologies

95-733 Internet Technologies. Lecture 1: Introduction. Course Web Site. http://www.andrew.cmu.edu/~mm6. Prerequisites. The ability to program in Java Enthusiasm for programming Interested in web technologies. Specific Technologies. Netbeans and Glassfish

nusa
Download Presentation

95-733 Internet Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 95-733 Internet Technologies Lecture 1: Introduction Master of Information System Management

  2. Course Web Site • http://www.andrew.cmu.edu/~mm6 Master of Information System Management

  3. Prerequisites • The ability to program in Java • Enthusiasm for programming • Interested in web technologies Master of Information System Management

  4. 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é, Jena Master of Information System Management

  5. Structure of the Course • Lectures / class participation • Demonstrations • Homework (programming) • Midterm • Final examination Master of Information System Management

  6. Readings • 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 AJAX Master of Information System Management

  7. Grading • 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% Master of Information System Management

  8. Some 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… • Many other options exist. See the schedule for projects from previous terms.. Master of Information System Management

  9. Rich 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. Master of Information System Management

  10. RIA Using Ajax Asynchronous 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. Master of Information System Management

  11. AJAX • 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.org Master of Information System Management

  12. Before 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 languages Master of Information System Management

  13. This is a UML sequence diagram. This shows a typical AJAX round trip. A solid arrowhead represents a synchronous call. A stick arrowhead represents an asynchronous signal. Master of Information System Management

  14. Typical Ajax(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. Master of Information System Management

  15. Typical 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 handler. 7. The request object is told to send a post or get request asynchronously. Master of Information System Management

  16. Typical Ajax(3) 8. If POST is used, the send method is called on the request object with the POST data. 9. The handler executes on various state changes in the request object. 10.The handler accesses the server response by asking the request object first for its state (and if it's ready with no errors) its response. Master of Information System Management

  17. Typical Ajax(4) 11. The response may be text, or XML or JSON. 12. The handler performs some action on the browser. This action may alter the HTML's DOM and change what the browser displays. Master of Information System Management

  18. The XMLHttpRequest Object as Described by W3C • The XMLHttpRequest interface can be used by scripts to programmatically connect to their originating server via HTTP. • Implements an interface exposed by a scripting engine. • Supports any text format (not only XML). • Supports HTTP and HTTPS. • The term “Request” should be broadly defined to include Request and Response. Master of Information System Management

  19. W3C Example 1 Some simple JavaScript code to do something with data from an XML document fetched over the network: function test(data) { // taking care of data } Master of Information System Management

  20. function handler() { if(this.readyState == 4 && this.status == 200) { // so far so good if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data) // success! test(this.responseXML.getElementById('test').firstChild.data); else test(null); } else if (this.readyState == 4 && this.status != 200) { // fetched the wrong page or network error... test(null); } } var client = new XMLHttpRequest(); client.onreadystatechange = handler; client.open("GET", "test.xml"); client.send(); Master of Information System Management

  21. W3C Example 2 If you just want to ping the server with a message you could do something like: function ping(message) { var client = new XMLHttpRequest(); client.open("POST", "/ping"); client.send(message); } We are not establishing a callback handler. We are not interested in a response. Master of Information System Management

  22. W3C Example 3 Or, if you want to check the status of a document on the server, you can make a head request. function fetchStatus(address) { var client = new XMLHttpRequest(); client.onreadystatechange = function() { if(this.readyState == 4) returnStatus(this.status); } client.open("HEAD", address); client.send(); } Master of Information System Management

  23. State and State Change The state of the object. The readyState attribute must be one of the following values: 0 Uninitialized The initial value. 1 Open The open() method has been successfully called. 2 Sent The user agent successfully acknowledged the request. 3 Receiving Immediately before receiving the message body (if any). All HTTP headers have been received. 4 Loaded The data transfer has been completed. When readyState changes value a readystatechange event is to be dispatched on the XMLHttpRequest object. Master of Information System Management

  24. Typical Interaction post JavaScript function XML XMLHTTPRequest handler • - Executed on • state change. • - this.responseXML • points to the root • of the XML • write HTML to • HTML DOM HTML Button Master of Information System Management

  25. A Complete Example From IBM Demonstrations: See article by Philip McCarthy on Ajax at: http://www.ibm.com/developerworks/library/j-ajax1/ Eclipse workspace mm6/95-733 Visit http://localhost:8080/AjaxProject/index.jsp Netbeans workspace mm6/95-733/AjaxUsingNetbeans ACoolAjaxShoppingCart and ACoolAjaxShoppingCartImproved Master of Information System Management

  26. Main Features of Index.jsp (1) This page needs access to these imported Java packages. <%@ page import="java.util.*" %> <%@ page import="developerworks.ajax.store.*"%> The store package contains Item.java, Catalog.java and Cart.java Master of Information System Management

  27. Main Features of Index.jsp (2) The header holds pointers to script code to be included in the page and then executed by the browser. <script type="text/javascript" language="javascript" src="ajax1.js"> </script> <script type="text/javascript" language="javascript" src="cart.js"> </script> This is not constrained by the same origin policy! Master of Information System Management

  28. Main Features of Index.jsp (3) The table body tag encloses table rows that are generated on the server. This is Java (part of JSP) and is not JavaScript. <tbody> <% for (Iterator<Item> I = new Catalog().getAllItems().iterator(); I.hasNext() ; ) { Item item = I.next(); %> Master of Information System Management

  29. Main Features of Index.jsp (4) The addToCart call is a call on JavaScript. <!-- For each Item do --> <tr> <td><%= item.getName() %></td> <td><%= item.getDescription() %></td> <td><%= item.getFormattedPrice() %></td> <td> <button onclick="addToCart('<%= item.getCode() %>')"> Add to Cart </button> </td> </tr> <% } %> </tbody> Master of Information System Management

  30. Main Features of Index.jsp (5) The <ul> and <span> tags each have a unique identifier. These identifier will be used by the event handler. <div style=”…”> <h2>Cart Contents</h2> <ul id="contents"></ul> Total cost: <span id="total">$0.00</span> </div> Master of Information System Management

  31. Main Features of Item.java Getter and setters on code, name,description and price. package developerworks.ajax.store; import java.math.BigDecimal; publicclass Item { private String code; private String name; private String description; privateintprice; public Item(String code,String name,String description,int price) { this.code=code; this.name=name; this.description=description; this.price=price; } public String getCode() { returncode; } Master of Information System Management

  32. Main Features of Catalog.java(1) package developerworks.ajax.store; import java.util.*; publicclass Catalog { privatestatic Map<String,Item> items; static { items = new HashMap<String,Item>(); items.put("hat001",new Item("hat001", "Hat","Stylish bowler hat (SALE!)", 1999)); : } Master of Information System Management

  33. Main Features of Catalog.java(2) public Collection<Item> getAllItems() { returnitems.values(); } publicboolean containsItem(String itemCode) { returnitems.containsKey(itemCode); } public Item getItem(String itemCode) { returnitems.get(itemCode); } } Master of Information System Management

  34. Main Features of Cart.java(1) package developerworks.ajax.store; public class Cart { private HashMap<Item,Integer> contents; public Cart() { contents = new HashMap<Item,Integer>(); } Master of Information System Management

  35. Main Features of Cart.java(2) public void addItem(String itemCode) { Catalog catalog = new Catalog(); if (catalog.containsItem(itemCode)) { Item item = catalog.getItem(itemCode); int newQuantity = 1; if (contents.containsKey(item)) { Integer currentQuantity = contents.get(item); newQuantity += currentQuantity.intValue(); } contents.put(item, new Integer(newQuantity)); } } Master of Information System Management

  36. Main Features of Cart.java(3) public String toXml() { StringBuffer xml = new StringBuffer(); xml.append("<?xml version=\"1.0\"?>\n"); xml.append("<cart generated=\""+ System.currentTimeMillis()+ "\" total=\""+getCartTotal()+"\">\n"); for (Iterator<Item> I = contents.keySet().iterator() ; I.hasNext() ; ) { Item item = I.next(); int itemQuantity = contents.get(item).intValue(); xml.append("<item code=\""+item.getCode()+"\">\n"); xml.append("<name>"); : xml.append("</cart>\n"); return xml.toString(); } Master of Information System Management

  37. Main Features of CartServlet.java(1) private Cart getCartFromSession(HttpServletRequest req) { HttpSession session = req.getSession(true); Cart cart = (Cart)session.getAttribute("cart"); if (cart == null) { cart = new Cart(); session.setAttribute("cart", cart); } return cart; } Master of Information System Management

  38. Main Features of CartServlet.java(2) publicvoid doPost(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException { Enumeration headers = req.getHeaderNames(); while (headers.hasMoreElements()) { String header =(String) headers.nextElement(); System.out.println(header+": "+req.getHeader(header)); } Cart cart = getCartFromSession(req); String action = req.getParameter("action"); String item = req.getParameter("item"); Master of Information System Management

  39. Main Features of CartServlet.java(3) if ((action != null)&&(item != null)) { if ("add".equals(action)) { cart.addItem(item); } elseif ()….. } String cartXml = cart.toXml(); res.setContentType("text/xml"); res.getWriter().write(cartXml); } Master of Information System Management

  40. Main Features Axis1.js (1) /* * Returns an new XMLHttpRequest object, or false if the browser * doesn't support it */ function newXMLHttpRequest() { var xmlreq = false; // Create XMLHttpRequest object in non-Microsoft browsers if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } Master of Information System Management

  41. Main Features Axis1.js (2) else if (window.ActiveXObject) { try { // Try to create XMLHttpRequest in later versions of Internet Explorer xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Failed to create required ActiveXObject try { // Try version supported by older versions of Internet Explorer xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // Unable to create an XMLHttpRequest by any means xmlreq = false; } } } Master of Information System Management

  42. Main Features Axis1.js (3) /* Returns a function that waits for the specified XMLHttpRequest to complete, then passes it XML response to the given handler function. req - The XMLHttpRequest whose state is changing responseXmlHandler - Function to pass the XML response to */ function getReadyStateHandler(req, responseXmlHandler) { Master of Information System Management

  43. Main Features Axis1.js (4) // Return an anonymous function that listens to the // XMLHttpRequest instance return function () { // If the request's status is "complete" if (req.readyState == 4) { // Check that we received a successful response from the server if (req.status == 200) { // Pass the XML payload of the response to the handler // function. responseXmlHandler(req.responseXML); } else { // An HTTP problem has occurred alert("HTTP error "+req.status+": "+req.statusText); }}}} Master of Information System Management

  44. Main Features Cart.js (1) // Timestamp of cart that page was last updated with var lastCartUpdate = 0; // Adds the specified item to the shopping cart, via Ajax call // itemCode - product code of the item to add function addToCart(itemCode) { var req = newXMLHttpRequest(); req.onreadystatechange = getReadyStateHandler(req, updateCart); req.open("POST", "cart.do", true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send("action=add&item="+itemCode); } Establish handler and pack up and send the request. Master of Information System Management

  45. Main Features Cart.js (2) /* * Update shopping-cart area of page to reflect contents of cart * described in XML document. */ function updateCart(cartXML) { var cart = cartXML.getElementsByTagName("cart")[0]; var generated = cart.getAttribute("generated"); if (generated > lastCartUpdate) { lastCartUpdate = generated; var contents = document.getElementById("contents"); contents.innerHTML = ""; Master of Information System Management

  46. Main Features Cart.js (3) var items = cart.getElementsByTagName("item"); for (var I = 0 ; I < items.length ; I++) { var item = items[I]; var name = item.getElementsByTagName("name")[0].firstChild.nodeValue; var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue; var listItem = document.createElement("li"); listItem.appendChild(document.createTextNode(name+" x "+quantity)); contents.appendChild(listItem); } } document.getElementById("total").innerHTML = cart.getAttribute("total"); } Master of Information System Management

  47. Shopping Cart Interaction post addToCart(itemCode) XML XMLHTTPRequest UpdateCart reads XML writes HTML Anonymous handler - Executed on state change. - req.responseXML points to the root of the XML - calls updateCart HTML Button Master of Information System Management

  48. Main Features Cart.js (4) The handler is reading data with the following format: <?xml version="1.0"?> <cart generated="1200367057873" total="$19.99"> <item code="str001"> <name>String</name> <quantity>1</quantity> </item> </cart> Master of Information System Management

  49. Another Example From Sebesta Chapter 10 A form is required to collect name, address, zip, city, and state. The zip code entry causes an asynchronous call on a servlet to automatically complete the city and state fields. The asynchronous call is made when the user blurs (or moves away from) the zip code field. This demo is in the Netbeans project mm6/www/95-733/AjaxUsingNetbeans/SebestaAjaxExample. Master of Information System Management

  50. Index.jsp Main Features <tr> <td> Zip Code: </td> <td> <input type = "text" name="zip" size = "10" onblur = "getPlace(this.value)" /> </td> </tr> <tr> <td> City </td> <td> <input type = "text" name="city" id= "city" size = "30" /> </td> </tr> <tr> <td> State </td> <td> <input type = "text" name="state" id="state" size = "30" /></td> </tr> Locations written to by ajax handler Master of Information System Management

More Related