This document discusses web services and JSON. It provides an overview of AJAX and how it uses XMLHttpRequest to asynchronously update parts of a web page without reloading. AJAX applications retrieve data from the server in the background and update the UI without interfering with the user experience. The document then discusses how JSON can be used with AJAX to transmit data between client and server, including embedding JSON in script tags or using the JSONRequest standard. Finally, it mentions some libraries and APIs that use JSON, such as Yahoo, jQuery and Google Maps.
Boost PC performance: How more available memory can improve productivity
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
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
