0
The Web: Concepts and Technology

                              Web Services (conclusion)
                                ...
Today’s Plan
       Web Services
          JSON (review/summary)
          XML




2
    Eugene Agichtein   CS 190: The We...
AJAX (Asynchronous Javascript + XML)
         (A    h       J      i t
       Uses browser’s XML support: DOM, XSLT
      ...
AJAX Design Principles
       The browser hosts an application, not content
         Application d delivered to b
        ...
Basic AJAX process




5
    Agichtein for Emory CS171, Spring 2008
JSON in Ajax
       HTML Delivery.

       JSON data is built into the page.
           <html>...
           <script>
    ...
JSON in Ajax
       XMLHttpRequest
           Obtain responseText
           Parse the responseText

              respons...
JSON in Ajax
       Secret <iframe>
       Request data using form.submit to the
       <iframe> target.
       The server...
JSON in Ajax
       Dynamic script tag hack.
       Create a script node. The src url makes the request.
       The server...
JSONRequest
      A new facility.
      Two way data interchange between any page and any server.
      Exempt from the Sa...
Yahoo Web Service with JSON
        Tutorial/Howto:
            http://developer.yahoo.com/common/json.html
            h ...
jQuery Library
        http://jquery.com

       Usage: same as YUI
     <html>
       head
      <head>
       <script ty...
Google Maps API
     http://code.google.com/apis/maps/

http://cs190.mathcs.emory.edu/~cs190000/project1/maps.html




13
...
Upcoming SlideShare
Loading in...5
×

feb19-webservices3

306

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
306
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "feb19-webservices3"

  1. 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. 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. 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. 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. 5. Basic AJAX process 5 Agichtein for Emory CS171, Spring 2008
  6. 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. 7. JSON in Ajax XMLHttpRequest Obtain responseText Parse the responseText responseData = eval( '(' + responseText + ')'); responseData = responseText.parseJSON(); 7 Agichtein for Emory CS171, Spring 2008
  8. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×