feb19-webservices3
- 1. The Web: Concepts and Technology Web Services (conclusion) Feb 19 1 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009
- 2. Today’s Plan Web Services JSON (review/summary) XML 2 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009
- 3. AJAX (Asynchronous Javascript + XML) (A h J i t Uses browser’s XML support: DOM, XSLT XMLHttpRequest Google Maps is best-known AJAX application 3 Agichtein for Emory CS171, Spring 2008
- 4. AJAX Design Principles The browser hosts an application, not content Application d delivered to b A li i code d li d browser, mostly as J S i l JavaScript code The server delivers data, not content Data may be plain text, JavaScript fragments, or XML documents User/application interaction is continuous and fluid UI metaphors like drag-and-drop become possible This is real coding and requires discipline Significant developer responsibility to manage conversational state over entire web transaction 4 Agichtein for Emory CS171, Spring 2008
- 5. Basic AJAX process 5 Agichtein for Emory CS171, Spring 2008
- 6. JSON in Ajax HTML Delivery. JSON data is built into the page. <html>... <script> var data = { ... JSONdata ... }; 6 Agichtein for Emory CS171, Spring 2008
- 7. JSON in Ajax XMLHttpRequest Obtain responseText Parse the responseText responseData = eval( '(' + responseText + ')'); responseData = responseText.parseJSON(); 7 Agichtein for Emory CS171, Spring 2008
- 8. JSON in Ajax Secret <iframe> Request data using form.submit to the <iframe> target. The server sends the JSON text embedded in a script in a document. <html><head><script> h l h d i document.domain = 'penzance.com'; parent.deliver({ ... JSONtext ... }); </script></head></html> The function deliver is passed the value. p 8 Agichtein for Emory CS171, Spring 2008
- 9. JSON in Ajax Dynamic script tag hack. Create a script node. The src url makes the request. The server sends the JSON text embedded in a script. deliver({ ... JSONtext ... }); The function deliver is passed the value. The dynamic script tag hack is insecure. y p g 9 Agichtein for Emory CS171, Spring 2008
- 10. JSONRequest A new facility. Two way data interchange between any page and any server. Exempt from the Same Origin Policy. Campaign to make a standard feature of all browsers. http://www.JSON.org/JSONRequest.html 10 Agichtein for Emory CS171, Spring 2008
- 11. Yahoo Web Service with JSON Tutorial/Howto: http://developer.yahoo.com/common/json.html h d l h h l Can use nice interface widgets: http://developer.yahoo.com/yui/index.html y y http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html 11 Agichtein for Emory CS171, Spring 2008
- 12. jQuery Library http://jquery.com Usage: same as YUI <html> head <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // Your code goes here g </script> </head> y <body> <a href="http://jquery.com/">jQuery</a> </body> </html> 12 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009
- 13. Google Maps API http://code.google.com/apis/maps/ http://cs190.mathcs.emory.edu/~cs190000/project1/maps.html 13 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009